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
@@ -0,0 +1,41 @@
+<%
+var _query = (typeof query !== 'undefined') ? query : null;
+var _total = (typeof total !== 'undefined') ? total : courses.length;
+%>
+
+<div class="mobile-section-head">
+    <span class="kicker">Showing <%= courses.length %> of <%= _total %></span>
+    <a href="/courses">View all &rarr;</a>
+</div>
+
+<% if (courses.length === 0) { %>
+    <p style="text-align: center; color: var(--ink-3); padding: 40px 0;">No courses found.</p>
+<% } else { %>
+<div class="mobile-list">
+    <% courses.forEach(function(course) {
+        var lastUpdated = new Date(course.last_updated).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+        var layoutCount = course.layoutCount || 0;
+    %>
+    <div class="m-course-card" id="m-course-<%= course.id %>" onclick="toggleMobileCourseLayouts(<%= course.id %>)">
+        <div class="m-course-card__head">
+            <div class="m-course-card__name-stack">
+                <div class="m-course-name-row">
+                    <span class="m-course-name"><%= course.name %></span>
+                    <% if (layoutCount > 0) { %>
+                    <span class="m-layouts-pill"><%= layoutCount %> layout<%= layoutCount !== 1 ? 's' : '' %></span>
+                    <% } %>
+                </div>
+                <div class="m-course-card__meta"><%= course.city %> &middot; <%= lastUpdated %></div>
+            </div>
+            <span class="m-chevron">&#9660;</span>
+        </div>
+
+        <div class="m-course-card__expand">
+            <div id="m-layouts-container-<%= course.id %>" class="layouts-container">
+                <div class="no-layouts">Tap to load layouts...</div>
+            </div>
+        </div>
+    </div>
+    <% }); %>
+</div>
+<% } %>