improve styling of reference drawer

seigler · Apr 16, 2024 · be41bda · be41bda
1 parent 9dd1560
commit be41bda
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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%;
 }