better UI for flox
This commit is contained in:
parent
28a50b6d51
commit
29428092ab
|
@ -49,6 +49,6 @@ where
|
||||||
|
|
||||||
fn render_style(style: &HashedStyle) -> impl Renderable + '_ {
|
fn render_style(style: &HashedStyle) -> impl Renderable + '_ {
|
||||||
maud_move!(
|
maud_move!(
|
||||||
link rel="stylesheet" href=(style.path.as_str()) integrity=(&style.sri);
|
link rel="stylesheet" href=(style.path.as_str());
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -222,19 +222,25 @@ where
|
||||||
page(
|
page(
|
||||||
sack,
|
sack,
|
||||||
maud!(
|
maud!(
|
||||||
main .flox {
|
main {
|
||||||
div {
|
div .flox-playground {
|
||||||
h2 { "Flox" }
|
div .cell {
|
||||||
div #editor {}
|
header {
|
||||||
button #run { "Run!" }
|
h2 { "Flox" }
|
||||||
}
|
}
|
||||||
div {
|
div .editor {
|
||||||
h2 { "Output" }
|
div #editor {}
|
||||||
div #output {}
|
button #run .run { "Run!" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
div .cell {
|
||||||
|
h2 { "Output" }
|
||||||
|
pre #output {}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
script type="module" { (Raw("import 'editor';")) }
|
script type="module" { (Raw("import 'editor';")) }
|
||||||
),
|
),
|
||||||
String::from("Search"),
|
String::from("Flox"),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,3 +91,4 @@ where
|
||||||
|
|
||||||
crate::html::page(sack, main, metadata.title.clone())
|
crate::html::page(sack, main, metadata.title.clone())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,32 @@
|
||||||
|
|
||||||
.flox {
|
.flox-playground {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: row;
|
grid-template-columns: 1fr 1fr;
|
||||||
margin: 1em;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue