Skip to content

Commit 41c920c

Browse files
brunoborgesCopilot
andcommitted
Hide all cards by default — require category filter selection
Cards start hidden with filter-hidden class. No pill is active on load. Clicking a pill shows that category; clicking again hides all. The 'All' pill shows every card. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 88a892a commit 41c920c

File tree

3 files changed

+9
-5
lines changed

3 files changed

+9
-5
lines changed

site/app.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -157,14 +157,18 @@
157157
pills.forEach(pill => {
158158
pill.addEventListener('click', () => {
159159
const category = pill.dataset.filter || 'all';
160+
const wasActive = pill.classList.contains('active');
160161

161-
// Update active pill
162+
// Update active pill (toggle off if re-clicked)
162163
pills.forEach(p => p.classList.remove('active'));
163-
pill.classList.add('active');
164+
if (!wasActive) pill.classList.add('active');
165+
166+
const showAll = (!wasActive && category === 'all');
167+
const showCategory = (!wasActive && category !== 'all') ? category : null;
164168

165169
// Filter cards
166170
cards.forEach(card => {
167-
if (category === 'all' || card.dataset.category === category) {
171+
if (showAll || card.dataset.category === showCategory) {
168172
card.classList.remove('filter-hidden');
169173
} else {
170174
card.classList.add('filter-hidden');

templates/index-card.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<a href="/{{category}}/{{slug}}.html" class="tip-card" data-category="{{category}}">
1+
<a href="/{{category}}/{{slug}}.html" class="tip-card filter-hidden" data-category="{{category}}">
22
<div class="tip-card-body">
33
<div class="tip-card-header">
44
<div class="tip-badges"><span class="badge {{category}}">{{catDisplay}}</span></div>

templates/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ <h2 class="section-title">All comparisons</h2>
218218
</div>
219219
<div class="filter-pills" id="categoryFilter">
220220
<span class="filter-label">Filter:</span>
221-
<button class="filter-pill active" data-filter="all">All</button>
221+
<button class="filter-pill" data-filter="all">All</button>
222222
<button class="filter-pill" data-filter="language">Language</button>
223223
<button class="filter-pill" data-filter="collections">Collections</button>
224224
<button class="filter-pill" data-filter="strings">Strings</button>

0 commit comments

Comments
 (0)