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

Refine program library toolbar defaults

Browse source
This commit is contained in:
Christian Johannesen 2026-10-22 12:08:35 +02:00
parent 36e8f50149
commit ef7b504ea4
3 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/app.js
View file

@ -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);

4
public/index.html
View file

@ -11,7 +11,6 @@
<body>
<header class="site-header">
<a class="brand" href="/">C64 Program Collection</a>
<span>VICE x64sc · WebAssembly</span>
</header>
<main>
<section id="library" class="panel">
@ -38,12 +37,13 @@
<label>
<span class="sr-only">Sort programs</span>
<select id="sort-order">
<option value="newest">Sort: Newest first</option>
<option value="title">Sort: Title</option>
<option value="category">Sort: Category</option>
<option value="newest">Sort: Newest first</option>
<option value="oldest">Sort: Oldest first</option>
</select>
</label>
<button id="reset-filters" class="reset-button" type="button">Reset</button>
<div class="view-switcher" role="group" aria-label="View style">
<button id="grid-view" class="view-button active" type="button" aria-pressed="true" title="Grid view">▦</button>
<button id="list-view" class="view-button" type="button" aria-pressed="false" title="List view">☷</button>

3
public/styles.css
View file

@ -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); }