Samuel Enocsson
b51c47dc4c
- Hide desktop .card-section on mobile, add .m-search-input with same HTMX attrs for mobile course search (fixes horizontal overflow) - Remove dead layoutCount var and .m-layouts-pill block in course-cards - Remove dead 768px breakpoints from players.css (table hidden at 880px) - Move .mobile-section-head inside else-block for empty state in both ratings-cards and course-cards (fixes section head showing on empty) - Add tabindex, role=button, aria-expanded, onkeydown to .m-card and .m-course-card; toggle aria-expanded in JS toggle functions - Fix data-history attribute to use <%= (HTML-escaped) instead of <%- - Convert var to const/let in all new/changed JS blocks
40 lines
1.7 KiB
Plaintext
40 lines
1.7 KiB
Plaintext
<%
|
|
var _query = (typeof query !== 'undefined') ? query : null;
|
|
var _total = (typeof total !== 'undefined') ? total : courses.length;
|
|
%>
|
|
|
|
<% if (courses.length === 0) { %>
|
|
<p style="text-align: center; color: var(--ink-3); padding: 40px 0;">No courses found.</p>
|
|
<% } else { %>
|
|
<div class="mobile-section-head">
|
|
<span class="kicker">Showing <%= courses.length %> of <%= _total %></span>
|
|
<a href="/courses">View all →</a>
|
|
</div>
|
|
<div class="mobile-list">
|
|
<% courses.forEach(function(course) {
|
|
var lastUpdated = new Date(course.last_updated).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
|
|
%>
|
|
<div class="m-course-card" id="m-course-<%= course.id %>"
|
|
tabindex="0" role="button" aria-expanded="false" aria-label="Expand course details"
|
|
onclick="toggleMobileCourseLayouts(<%= course.id %>)"
|
|
onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();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>
|
|
</div>
|
|
<div class="m-course-card__meta"><%= course.city %> · <%= lastUpdated %></div>
|
|
</div>
|
|
<span class="m-chevron">▼</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>
|
|
<% } %>
|