Handle small screen widths better on wasm demo

ictrobot · Sep 2, 2024 · eed8bf3 · eed8bf3
1 parent b6e28f7
commit eed8bf3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 19 deletions.
diff --git a/crates/aoc_wasm/web/index.html b/crates/aoc_wasm/web/index.html
@@ -33,6 +33,10 @@
             pointer-events: unset;
         }
 
+        .navbar-link, .navbar-item {
+            gap: 0.25rem;
+        }
+
         @media (min-width: 1024px) { /* >= Desktop */
             .navbar .navbar-dropdown {
                 max-height: calc(75vh);
@@ -71,12 +75,8 @@
                 ictrobot/aoc-rs
             </div>
 
-            <div class="navbar-item is-hidden-desktop aoc-current-year">
-                Year 2015
-            </div>
-
-            <div class="navbar-item is-hidden-desktop aoc-current-day">
-                Day 01
+            <div class="navbar-item is-hidden-desktop">
+                <span class="aoc-current-year">2015</span> Day <span class="aoc-current-day">01</span>
             </div>
 
             <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="aoc-navbar">
@@ -90,11 +90,8 @@
         <div id="aoc-navbar" class="navbar-menu">
             <div class="navbar-start">
                 <div class="navbar-item has-dropdown is-hoverable">
-                    <a class="navbar-link is-hidden-touch aoc-current-year">
-                        Year 2015
-                    </a>
-                    <a class="navbar-link is-hidden-desktop">
-                        Year
+                    <a class="navbar-link">
+                        Year <span class="aoc-current-year is-hidden-touch">2015</span>
                     </a>
 
                     <div id="aoc-navbar-years" class="navbar-dropdown">
@@ -103,11 +100,8 @@
                 </div>
 
                 <div class="navbar-item has-dropdown is-hoverable">
-                    <a class="navbar-link is-hidden-touch aoc-current-day">
-                        Day 01
-                    </a>
-                    <a class="navbar-link is-hidden-desktop">
-                        Day
+                    <a class="navbar-link">
+                        Day <span class="aoc-current-day is-hidden-touch">01</span>
                     </a>
 
                     <div id="aoc-navbar-days" class="navbar-dropdown">
@@ -131,7 +125,7 @@
         </div>
     </nav>
 
-    <div class="columns p-3 is-flex-grow-1">
+    <div class="columns m-1 is-flex-grow-1">
         <div class="column">
             <div id="aoc-input" class="card">
                 <header class="card-header">

diff --git a/crates/aoc_wasm/web/web.mjs b/crates/aoc_wasm/web/web.mjs
@@ -81,11 +81,11 @@ async function run(input, isExample, part) {
 
 function updateNavbar() {
     document.querySelectorAll(".aoc-current-year").forEach((elem) => {
-        elem.innerText = `Year ${YEAR}`
+        elem.innerText = YEAR.toString();
     });
 
     document.querySelectorAll(".aoc-current-day").forEach((elem) => {
-        elem.innerText = `Day ${DAY.toString().padStart(2, "0")}`
+        elem.innerText = DAY.toString().padStart(2, "0");
     });
 
     const years = document.getElementById("aoc-navbar-years");