Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix category filtering on list pages

Browse Source
This commit is contained in:
Greg 2025-05-25 20:52:45 +02:00
parent 10265692a1
commit 26c3636feb
1 changed files with 19 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
layouts/_default/list.html
View File

@ -6,43 +6,20 @@
{{ end }} {{ end }}
</div> </div>
<div class="cards-container"> <div class="cards" id="cards">
{{ range $cat := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }} {{ range .Site.RegularPages }}
<div class="category-cards" id="category-{{ $cat | urlize }}"> {{ if not (eq .Params.draft true) }}
{{ range where $.Site.RegularPages "Params.category" $cat }} {{ partial "card.html" . }}
{{ if not (eq .Params.draft true) }}
{{ partial "card.html" . }}
{{ end }}
{{ end }}
</div>
{{ end }}
<!-- All cards section (shown by default) -->
<div class="category-cards active" id="category-all">
{{ range .Site.RegularPages }}
{{ if not (eq .Params.draft true) }}
{{ partial "card.html" . }}
{{ end }}
{{ end }} {{ end }}
</div> {{ end }}
</div> </div>
<style>
.cards-container {
width: 100%;
}
.category-cards {
display: none; /* Hide all category sections by default */
}
.category-cards.active {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
</style>
<script> <script>
// Tab switching with "All" default view
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab');
const cards = document.getElementById('cards');
const allCards = Array.from(cards.children);
// Add an "All" tab at the beginning // Add an "All" tab at the beginning
const tabsContainer = document.getElementById('tabs'); const tabsContainer = document.getElementById('tabs');
const allTab = document.createElement('div'); const allTab = document.createElement('div');
@ -52,40 +29,23 @@ document.addEventListener('DOMContentLoaded', function() {
tabsContainer.prepend(allTab); tabsContainer.prepend(allTab);
// Make other tabs inactive initially // Make other tabs inactive initially
document.querySelectorAll('.tab').forEach(tab => { tabs.forEach(tab => tab.classList.remove('active'));
tab.classList.remove('active');
});
allTab.classList.add('active');
// Add click handler for all tabs // Add click handler for all tabs (including the new All tab)
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() { tab.addEventListener('click', function() {
const selectedCategory = this.getAttribute('data-tab');
// Update active tab
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
this.classList.add('active'); this.classList.add('active');
const cat = this.getAttribute('data-tab');
// Hide all category sections allCards.forEach(card => {
document.querySelectorAll('.category-cards').forEach(section => { if (cat === 'all') {
section.classList.remove('active'); card.style.display = '';
});
// Show the selected category section
if (selectedCategory === 'all') {
document.getElementById('category-all').classList.add('active');
} else {
// Convert to URL-friendly format for element ID matching
const sectionId = 'category-' + selectedCategory.toLowerCase().replace(/\s+/g, '-');
const section = document.getElementById(sectionId);
if (section) {
section.classList.add('active');
} else { } else {
// Fallback to showing all if category not found const category = card.getAttribute('data-category');
document.getElementById('category-all').classList.add('active'); card.style.display = (category === cat) ? '' : 'none';
console.log('Category section not found:', sectionId);
} }
} });
}); });
}); });