kamov/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

better UI for flox

Browse source
This commit is contained in:
Maciej Jur 2024-08-23 01:06:06 +02:00
parent 28a50b6d51
commit 29428092ab
Signed by: kamov
GPG key ID: 191CBFF5F72ECAFD
4 changed files with 48 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/html/head.rs
View file

@ -49,6 +49,6 @@ where
fn render_style(style: &HashedStyle) -> impl Renderable + '_ {
maud_move!(
link rel="stylesheet" href=(style.path.as_str()) integrity=(&style.sri);
link rel="stylesheet" href=(style.path.as_str());
)
}

26
src/html/mod.rs
View file

@ -222,19 +222,25 @@ where
page(
sack,
maud!(
main .flox {
div {
h2 { "Flox" }
div #editor {}
button #run { "Run!" }
}
div {
h2 { "Output" }
div #output {}
main {
div .flox-playground {
div .cell {
header {
h2 { "Flox" }
}
div .editor {
div #editor {}
button #run .run { "Run!" }
}
}
div .cell {
h2 { "Output" }
pre #output {}
}
}
}
script type="module" { (Raw("import 'editor';")) }
),
String::from("Search"),
String::from("Flox"),
)
}

1
src/html/post.rs
View file

@ -91,3 +91,4 @@ where
crate::html::page(sack, main, metadata.title.clone())
}

34
styles/_flox.scss
View file

@ -1,6 +1,32 @@
.flox {
display: flex;
flex-direction: row;
margin: 1em;
.flox-playground {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: max(24rem, 0.5vh);
gap: 1em;
margin-block: 0.5em;
padding: 1em;
.editor, #output {
height: calc(100% - 4em);
overflow-y: auto;
border: 1px dashed black;
border-radius: 0.5em;
background-color: white;
}
.editor {
position: relative;
#run {
position: absolute;
right: 0.5em;
bottom: 0.5em;
padding: 0.25em 0.5em;
}
}
#output {
padding: 1em;
}
}