feat: mobile UI card layout for players and courses (#16)

2026-05-22 21:07:00 +02:00
parent e25f66c5d3
commit cc9d8eb4cd
14 changed files with 1007 additions and 56 deletions
@@ -43,4 +43,41 @@
            </button>
        </div>
    </div>
+
+    <div class="topbar__mobile">
+        <div class="topbar__mobile-row1">
+            <a href="/" class="topbar__mobile-brand">
+                <span class="topbar__mobile-mark" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 17 L9 11 L13 15 L21 6" />
+                        <path d="M14 6 L21 6 L21 13" />
+                    </svg>
+                </span>
+                <span class="topbar__mobile-brand-text">
+                    <span class="topbar__mobile-title">Rating Tracker</span>
+                    <span class="topbar__mobile-sub">Disc golf &middot; unofficial</span>
+                </span>
+            </a>
+            <button
+                class="topbar__mobile-refresh"
+                type="button"
+                hx-post="/api/refresh-all"
+                hx-vals='{"page": "<%= activePage %>"}'
+                hx-target="#topbar"
+                hx-swap="outerHTML"
+                hx-disabled-elt="this"
+                title="Refresh all"
+                aria-label="Refresh all"
+            >
+                <span class="topbar__refresh-icon" aria-hidden="true">&#8635;</span>
+                <span class="topbar__refresh-spinner" aria-hidden="true"></span>
+            </button>
+        </div>
+        <div class="topbar__mobile-row2">
+            <nav class="topbar__mobile-nav" aria-label="Primary">
+                <a href="/" class="<%= activePage === 'players' ? 'active' : '' %>">Players</a>
+                <a href="/courses" class="<%= activePage === 'courses' ? 'active' : '' %>">Courses</a>
+            </nav>
+        </div>
+    </div>
 </header>