fix: address mobile UI review findings (#16)

- 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
This commit is contained in:
Samuel Enocsson
2026-05-22 21:27:05 +02:00
parent cc9d8eb4cd
commit b51c47dc4c
7 changed files with 88 additions and 57 deletions
+32
View File
@@ -13,6 +13,7 @@
.mobile-add-bar { display: none; }
.mobile-section-head { display: none; }
.m-tab-pill { display: none; }
.m-search-input { display: none; }
/* ═══════════════════════════════════════════════════ */
@media (max-width: 880px) {
@@ -24,6 +25,37 @@
.add-bar { display: none !important; }
.footnote { display: none !important; }
/* Hide desktop search card on mobile (mobile has .m-search-input instead) */
.card-section { display: none; }
/* ── Mobile course search input ─────────────────── */
.m-search-input {
display: block;
width: 100%;
height: 38px;
padding: 0 12px;
background: var(--paper-2);
border: 1px solid var(--line-2);
border-radius: 10px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
outline: none;
box-sizing: border-box;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.m-search-input::placeholder {
color: var(--ink-3);
opacity: 0.7;
}
.m-search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 14%, transparent);
}
/* Hide desktop table but keep .table-card as wrapper */
.table-card > #ratings-table table,
#ratings-table table,