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
49 lines
1.8 KiB
Plaintext
49 lines
1.8 KiB
Plaintext
<% var body = `
|
|
<div class="card-section">
|
|
<h3>Find Courses</h3>
|
|
<div class="card-section-form">
|
|
<input
|
|
type="text"
|
|
class="input"
|
|
id="course-search"
|
|
name="q"
|
|
placeholder="Search courses by name or city..."
|
|
hx-get="/partials/course-table"
|
|
hx-trigger="input changed delay:300ms, search"
|
|
hx-target="#courses-table"
|
|
style="width: 340px;"
|
|
/>
|
|
<button class="btn" onclick="scrapeCourses()" id="scrape-courses-btn">
|
|
<i class="fas fa-sync-alt"></i> Scrape Courses
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile tab pill (visible only on mobile via CSS) -->
|
|
<div class="m-tab-pill">
|
|
<button class="m-tab-pill__btn m-tab-pill__btn--active" type="button">Find courses</button>
|
|
<button class="m-tab-pill__btn m-tab-pill__btn--disabled" type="button" disabled>Import from Tjing</button>
|
|
</div>
|
|
|
|
<!-- Mobile search input (hidden on desktop, shown on mobile via CSS) -->
|
|
<input
|
|
type="text"
|
|
class="m-search-input"
|
|
id="course-search-mobile"
|
|
name="q"
|
|
placeholder="Search courses by name or city..."
|
|
hx-get="/partials/course-table"
|
|
hx-trigger="input changed delay:300ms, search"
|
|
hx-target="#courses-table"
|
|
/>
|
|
|
|
<div id="courses-table" hx-get="/partials/course-table" hx-trigger="load"></div>
|
|
`; %>
|
|
|
|
<%- include('../partials/layout', {
|
|
title: 'PDGA Courses - Sweden',
|
|
activePage: 'courses',
|
|
cssFiles: ['courses.css'],
|
|
jsFiles: ['courses.js'],
|
|
body: body
|
|
}) %> |