diff --git a/public/app.js b/public/app.js index d4855f6..0cef385 100644 --- a/public/app.js +++ b/public/app.js @@ -7,6 +7,7 @@ const searchInput = document.querySelector('#search'); const categoryFilter = document.querySelector('#category-filter'); const languageFilter = document.querySelector('#language-filter'); const sortOrder = document.querySelector('#sort-order'); +const resetFiltersButton = document.querySelector('#reset-filters'); const gridViewButton = document.querySelector('#grid-view'); const listViewButton = document.querySelector('#list-view'); const sourceModal = document.querySelector('#source-modal'); @@ -136,7 +137,7 @@ function appendProgramBatch() { visibleProgramCount = nextCount; programSentinel.hidden = visibleProgramCount >= filteredPrograms.length; status.className = 'status'; - status.textContent = `${visibleProgramCount} of ${filteredPrograms.length} matching programs shown · ${allPrograms.length} total`; + status.textContent = `${filteredPrograms.length} matching ${filteredPrograms.length === 1 ? 'program' : 'programs'}`; } function observeProgramSentinel() { @@ -289,7 +290,17 @@ function setCategory(category) { renderPrograms(); } +function resetFilters() { + searchInput.value = ''; + categoryFilter.value = ''; + languageFilter.value = ''; + sortOrder.value = 'newest'; + if (location.pathname !== '/') history.pushState({}, '', '/'); + renderPrograms(); +} + refreshButton.addEventListener('click', loadPrograms); +resetFiltersButton.addEventListener('click', resetFilters); searchInput.addEventListener('input', renderPrograms); categoryFilter.addEventListener('change', () => setCategory(categoryFilter.value)); languageFilter.addEventListener('change', renderPrograms); diff --git a/public/index.html b/public/index.html index 73bdd49..2d043b3 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,6 @@
@@ -38,12 +37,13 @@ +
diff --git a/public/styles.css b/public/styles.css index a68092c..86a0fd6 100644 --- a/public/styles.css +++ b/public/styles.css @@ -30,6 +30,9 @@ h1 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; } .view-button { min-width: 42px; padding: .4rem; background: transparent; color: var(--c64-lightest-blue); font-size: 1.2rem; } .view-button.active { background: var(--c64-light-blue); color: #fff; } .toolbar-button { padding: 0 .9rem; } +.reset-button { align-self: center; height: auto; margin: 0; padding: .35rem .45rem; border: 0; background: transparent; color: #aaa5ce; font-size: .78rem; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2rem; } +.reset-button:hover { color: #fff; text-decoration-color: currentColor; } +.reset-button:focus-visible { outline: 2px solid var(--c64-light-blue); outline-offset: 2px; } .program-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; } .program-card { display: flex; min-height: 270px; flex-direction: column; align-items: flex-start; padding: 1.25rem; border: 1px solid #b8b1e733; border-radius: 14px; background: #211a59d9; color: #fff; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; } .program-card:hover { transform: translateY(-3px); border-color: var(--c64-light-blue); }