christian/c64-basic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Highlight active program filters

Browse source
This commit is contained in:
Christian Johannesen 2026-10-22 12:12:13 +02:00
parent ef7b504ea4
commit 74cb26bd58
2 changed files with 13 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/app.js
View file

@ -150,10 +150,20 @@ function loadBatchNearViewport() {
if (programSentinel.getBoundingClientRect().top <= window.innerHeight + 500) appendProgramBatch();
}
function updateFilterIndicators() {
searchInput.classList.toggle('active-filter', searchInput.value.trim() !== '');
categoryFilter.classList.toggle('active-filter', categoryFilter.value !== '');
languageFilter.classList.toggle('active-filter', languageFilter.value !== '');
resetFiltersButton.classList.toggle('filters-active', Boolean(
searchInput.value.trim() || categoryFilter.value || languageFilter.value
));
}
function renderPrograms() {
const query = searchInput.value.trim().toLowerCase();
const selectedCategory = categoryFilter.value;
const selectedLanguage = languageFilter.value;
updateFilterIndicators();
filteredPrograms = allPrograms
.filter(program => !selectedCategory || program.category === selectedCategory)
.filter(program => !selectedLanguage || program.language === selectedLanguage)

3
public/styles.css
View file

@ -23,6 +23,8 @@ h1 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
.library-toolbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: .65rem; margin: 2rem 0 0; padding: .75rem; border: 1px solid #b8b1e738; border-radius: 12px; background: #17113bef; box-shadow: 0 12px 30px #09062180; backdrop-filter: blur(12px); }
.library-toolbar input, .library-toolbar select { height: 42px; padding: 0 .8rem; border: 1px solid #b8b1e740; border-radius: 8px; background: var(--c64-panel-blue); color: #fff; font: inherit; }
.library-toolbar input:focus, .library-toolbar select:focus { border-color: var(--c64-light-blue); outline: 2px solid #7869c466; }
.library-toolbar input.active-filter, .library-toolbar select.active-filter { border-color: #75d7d0; background: #254f68; color: #fff; box-shadow: inset 0 0 0 1px #75d7d055, 0 0 0 1px #75d7d022; }
.library-toolbar input.active-filter:focus, .library-toolbar select.active-filter:focus { outline-color: #75d7d066; }
.search-field { flex: 1 1 260px; }
.search-field input { width: 100%; }
.view-switcher { display: flex; gap: .25rem; padding: .2rem; border-radius: 8px; background: #100c2c; }
@ -32,6 +34,7 @@ h1 { margin: 0; font-size: clamp(2rem, 7vw, 4rem); line-height: 1; }
.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.filters-active { color: #75d7d0; }
.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; }