From 29428092aba391444479f42c2109ffd86abfef07 Mon Sep 17 00:00:00 2001
From: Maciej Jur <maciej@kamoshi.org>
Date: Fri, 23 Aug 2024 01:06:06 +0200
Subject: [PATCH] better UI for flox

---
 src/html/head.rs  |  2 +-
 src/html/mod.rs   | 26 ++++++++++++++++----------
 src/html/post.rs  |  1 +
 styles/_flox.scss | 34 ++++++++++++++++++++++++++++++----
 4 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/html/head.rs b/src/html/head.rs
index 652be79..8ff1c2f 100644
--- a/src/html/head.rs
+++ b/src/html/head.rs
@@ -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());
 	)
 }
diff --git a/src/html/mod.rs b/src/html/mod.rs
index 405b644..2a19ef0 100644
--- a/src/html/mod.rs
+++ b/src/html/mod.rs
@@ -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"),
 	)
 }
diff --git a/src/html/post.rs b/src/html/post.rs
index 8a98d15..5dc2257 100644
--- a/src/html/post.rs
+++ b/src/html/post.rs
@@ -91,3 +91,4 @@ where
 
 	crate::html::page(sack, main, metadata.title.clone())
 }
+
diff --git a/styles/_flox.scss b/styles/_flox.scss
index 0e45998..6b6b87b 100644
--- a/styles/_flox.scss
+++ b/styles/_flox.scss
@@ -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;
+  }
 }