mandalore/gateway-gamers.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make filter button active/inactive state clearer in dark mode

Browse Source 
btn-outline + btn-active read too similarly to tell apart at a glance
in dark mode. Now: active buttons are solid-colored, matching the
badge they control (warning for Format, info for Scope, same colors
already used on the event cards), and inactive buttons are a dimmed
outline. Color alone now tells you what a button does; fill vs. outline
tells you whether it's on.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SBzcNkW7JcYipnAX6HfgmK
This commit is contained in:
mandalore
2026-09-04 16:38:21 -05:00
co-authored by Claude Sonnet 5
parent a5a922d684
commit 463371d199
2 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/events/index.html
+4 -4
View File
@@ -21,11 +21,11 @@
<!-- Filters: toggle any combination off to narrow the list below -->
<div class="flex flex-wrap items-center gap-2 mb-8" id="filters">
<span class="text-xs uppercase tracking-widest opacity-50 mr-1">Format</span>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="format" data-filter-value="Singles">Singles</button>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
<button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Singles">Singles</button>
<button type="button" class="btn btn-sm btn-warning" data-filter-group="format" data-filter-value="Team Event">Team Event</button>
<span class="text-xs uppercase tracking-widest opacity-50 ml-3 mr-1">Scope</span>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="scope" data-filter-value="RTT">RTT</button>
<button type="button" class="btn btn-sm btn-outline btn-active" data-filter-group="scope" data-filter-value="GT">GT</button>
<button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="RTT">RTT</button>
<button type="button" class="btn btn-sm btn-info" data-filter-group="scope" data-filter-value="GT">GT</button>
</div>
<!-- Loading skeleton -->
sites/events/src/main.js
+14 -3
View File
@@ -221,12 +221,23 @@ function passesFilter(ev) {
return activeFormats.has(formatOf(ev)) && (scope === null || activeScopes.has(scope));
}
// Filter buttons use the same color as the badge they control (warning
// for Format, info for Scope) when active, so it's obvious at a glance
// which is which — and switch to a dimmed outline when off, since
// btn-outline alone reads too similarly to its own active state in dark
// mode to tell the two apart at a glance.
const FILTER_GROUP_COLOR = { format: "btn-warning", scope: "btn-info" };
function setupFilters() {
document.querySelectorAll("#filters button[data-filter-group]").forEach(btn => {
const group = btn.dataset.filterGroup;
const onClass = FILTER_GROUP_COLOR[group];
btn.addEventListener("click", () => {
const set = btn.dataset.filterGroup === "format" ? activeFormats : activeScopes;
const nowActive = !btn.classList.contains("btn-active");
btn.classList.toggle("btn-active", nowActive);
const set = group === "format" ? activeFormats : activeScopes;
const nowActive = !btn.classList.contains(onClass);
btn.classList.toggle(onClass, nowActive);
btn.classList.toggle("btn-outline", !nowActive);
btn.classList.toggle("opacity-40", !nowActive);
if (nowActive) set.add(btn.dataset.filterValue);
else set.delete(btn.dataset.filterValue);
renderCircuits();