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 + '_ {
|
||||
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(
|
||||
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"),
|
||||
)
|
||||
}
|
||||
|
|
|
@ -91,3 +91,4 @@ where
|
|||
|
||||
crate::html::page(sack, main, metadata.title.clone())
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue