From 26c3636febac596f21ef803a888e81e298b60630 Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Sun, 25 May 2025 20:52:45 +0200
Subject: [PATCH] Fix category filtering on list pages

---
 layouts/_default/list.html | 78 ++++++++++----------------------------
 1 file changed, 19 insertions(+), 59 deletions(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 1a1663a..7c48ca8 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -6,43 +6,20 @@
   {{ end }}
 </div>
 
-<div class="cards-container">
-  {{ range $cat := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
-    <div class="category-cards" id="category-{{ $cat | urlize }}">
-      {{ range where $.Site.RegularPages "Params.category" $cat }}
-        {{ 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 }}
+<div class="cards" id="cards">
+  {{ range .Site.RegularPages }}
+    {{ if not (eq .Params.draft true) }}
+      {{ partial "card.html" . }}
     {{ end }}
-  </div>
+  {{ end }}
 </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>
+// Tab switching with "All" default view
 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
   const tabsContainer = document.getElementById('tabs');
   const allTab = document.createElement('div');
@@ -52,40 +29,23 @@ document.addEventListener('DOMContentLoaded', function() {
   tabsContainer.prepend(allTab);
   
   // Make other tabs inactive initially
-  document.querySelectorAll('.tab').forEach(tab => {
-    tab.classList.remove('active');
-  });
-  allTab.classList.add('active');
+  tabs.forEach(tab => tab.classList.remove('active'));
   
-  // Add click handler for all tabs
+  // Add click handler for all tabs (including the new All tab)
   document.querySelectorAll('.tab').forEach(tab => {
     tab.addEventListener('click', function() {
-      const selectedCategory = this.getAttribute('data-tab');
-      
-      // Update active tab
       document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
       this.classList.add('active');
+      const cat = this.getAttribute('data-tab');
       
-      // Hide all category sections
-      document.querySelectorAll('.category-cards').forEach(section => {
-        section.classList.remove('active');
-      });
-      
-      // 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');
+      allCards.forEach(card => {
+        if (cat === 'all') {
+          card.style.display = '';
         } else {
-          // Fallback to showing all if category not found
-          document.getElementById('category-all').classList.add('active');
-          console.log('Category section not found:', sectionId);
+          const category = card.getAttribute('data-category');
+          card.style.display = (category === cat) ? '' : 'none';
         }
-      }
+      });
     });
   });