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

feat: add list template with category tabs

Browse Source
This commit is contained in:
Greg 2025-05-25 21:08:44 +02:00
parent f802501888
commit 92783eb1b7
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
content/tvseries/arcane copy.md → content/tvseries/white-lotus.md
View File

22
layouts/_default/list.html
View File

@ -30,7 +30,7 @@ document.addEventListener('DOMContentLoaded', function() {
const tabsContainer = document.getElementById('tabs'); const tabsContainer = document.getElementById('tabs');
const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML
const cardsContainer = document.getElementById('cards'); const cardsContainer = document.getElementById('cards');
const allCards = Array.from(cardsContainer.children); const allCards = Array.from(cardsContainer.children); // These are the <a> elements
// Get the current section and section-to-category mappings // Get the current section and section-to-category mappings
const currentSection = tabsContainer.getAttribute('data-current-section'); const currentSection = tabsContainer.getAttribute('data-current-section');
@ -49,7 +49,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Create and prepend the "All" tab // Create and prepend the "All" tab
const allTab = document.createElement('div'); const allTab = document.createElement('div');
allTab.className = 'tab'; // Will be set to active by activateTabAndFilter allTab.className = 'tab';
allTab.textContent = 'All'; allTab.textContent = 'All';
allTab.setAttribute('data-tab', 'all'); allTab.setAttribute('data-tab', 'all');
tabsContainer.prepend(allTab); tabsContainer.prepend(allTab);
@ -69,15 +69,23 @@ document.addEventListener('DOMContentLoaded', function() {
// Filter cards // Filter cards
let visibleCount = 0; let visibleCount = 0;
allCards.forEach(card => { allCards.forEach(cardLinkElement => { // Renamed 'card' to 'cardLinkElement' for clarity
const cardDiv = cardLinkElement.querySelector('.card'); // Get the nested <div class="card">
if (!cardDiv) {
console.warn('Card structure issue: .card div not found inside', cardLinkElement);
cardLinkElement.style.display = 'none'; // Hide if structure is wrong
return; // Skip this card
}
if (selectedCategory === 'all') { if (selectedCategory === 'all') {
card.style.display = ''; cardLinkElement.style.display = '';
visibleCount++; visibleCount++;
} else { } else {
const cardCategory = card.getAttribute('data-category'); const cardCategory = cardDiv.getAttribute('data-category'); // Get category from the .card div
console.log('Card category:', cardCategory, 'Selected:', selectedCategory); console.log('Card element:', cardLinkElement, 'Card div:', cardDiv, 'Card category:', cardCategory, 'Selected:', selectedCategory);
const isVisible = (cardCategory === selectedCategory); const isVisible = (cardCategory === selectedCategory);
card.style.display = isVisible ? '' : 'none'; cardLinkElement.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++; if (isVisible) visibleCount++;
} }
}); });