From be41bda281958a4e7aa4736ffb1327b339f92c80 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <joshua@seigler.net>
Date: Tue, 16 Apr 2024 01:20:43 -0400
Subject: [PATCH] improve styling of reference drawer

---
 src/components/Drawer.tsx     |  5 +++--
 src/components/FontPicker.tsx | 33 ++++++++++++++++++---------------
 src/components/Main.tsx       |  2 +-
 src/components/ReadingBox.tsx |  2 +-
 src/style.css                 | 30 +++++++++++++++++++++++++++---
 5 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
index 9ee6660..ebeeccd 100644
--- a/src/components/Drawer.tsx
+++ b/src/components/Drawer.tsx
@@ -11,10 +11,11 @@ export default function Drawer({ children }: DrawerProps) {
         onClick={() => {
           isOpen.value = !isOpen.value;
         }}
+        class="drawer-handle"
       >
-        {isOpen.value ? "Hide 🞃" : "Expand 🞁"}
+        {isOpen.value ? "Reference 🞃" : "Reference 🞁"}
       </button>
-      {isOpen.value && children}
+      {children}
     </div>
   );
 }
diff --git a/src/components/FontPicker.tsx b/src/components/FontPicker.tsx
index fba6612..1b368d5 100644
--- a/src/components/FontPicker.tsx
+++ b/src/components/FontPicker.tsx
@@ -3,20 +3,23 @@ import { fontNames, selectedFont } from "./store";
 
 export default function FontPicker() {
   return (
-    <select
-      onChange={(event) => {
-        const newValue = event.currentTarget.value;
-        selectedFont.value = newValue;
-        localforage.setItem("aurebesh-font", newValue);
-      }}
-    >
-      {fontNames.map((font) => {
-        return (
-          <option value={font} selected={font === selectedFont.value}>
-            {font}
-          </option>
-        );
-      })}
-    </select>
+    <div>
+      Font:{" "}
+      <select
+        onChange={(event) => {
+          const newValue = event.currentTarget.value;
+          selectedFont.value = newValue;
+          localforage.setItem("aurebesh-font", newValue);
+        }}
+      >
+        {fontNames.map((font) => {
+          return (
+            <option value={font} selected={font === selectedFont.value}>
+              {font}
+            </option>
+          );
+        })}
+      </select>
+    </div>
   );
 }
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
index ff79f39..7dfde02 100644
--- a/src/components/Main.tsx
+++ b/src/components/Main.tsx
@@ -34,8 +34,8 @@ export default function Main() {
       </main>
       <footer>
         <Drawer>
-          <FontPicker />
           <Reference />
+          <FontPicker />
         </Drawer>
       </footer>
     </>
diff --git a/src/components/ReadingBox.tsx b/src/components/ReadingBox.tsx
index fe366ad..2f64691 100644
--- a/src/components/ReadingBox.tsx
+++ b/src/components/ReadingBox.tsx
@@ -50,7 +50,7 @@ Pursued by the Empire's sinister agents, Princess Leia races home aboard her sta
         </div>
       </dialog>
 
-      <div>
+      <div class="readingbox-actions">
         <button
           onClick={() => {
             editModalRef.current?.showModal();
diff --git a/src/style.css b/src/style.css
index 69f0dff..a553304 100644
--- a/src/style.css
+++ b/src/style.css
@@ -145,7 +145,7 @@ dialog::backdrop {
   height: "100%";
   z-index: 3;
   background-color: var(--color-backdrop);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(1rem);
 }
 
 #app {
@@ -240,6 +240,7 @@ h1 {
   flex-direction: column;
   gap: 0.5em;
   padding-bottom: 1em;
+  font-size: 4vmin;
 }
 
 main {
@@ -266,6 +267,12 @@ main {
   padding: 1em;
 }
 
+.readingbox-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
 .dualtext-help[data-hover="true"] {
   pointer-events: all;
 }
@@ -304,11 +311,28 @@ main {
 }
 
 footer {
-  width: "100%";
+  width: 100%;
 }
 .drawer {
-  width: "100%";
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  padding: 1rem;
+  background-color: var(--color-backdrop);
+  backdrop-filter: blur(1rem);
+}
+.drawer[data-open="true"] {
+  transform: none;
+}
+.drawer-handle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  width: 100%;
 }