System-End/YSWS-Catalog
1
0
Fork 0
mirror of https://github.com/System-End/YSWS-Catalog.git synced 2026-04-19 19:55:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Correct program filtering and search functionality using classList instead of style.display

Browse source
This commit is contained in:
PawiX25 2024-12-10 18:20:44 +01:00
parent 78708b356c
commit fbcc95b1f9
2 changed files with 46 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
script.js
View file

@ -376,17 +376,49 @@ function filterPrograms(category) {
btn.classList.toggle('active', btn.dataset.category === category);
});
if (category === 'all') {
sections.forEach(section => section.classList.remove('hidden'));
return;
}
sections.forEach(section => {
const sectionPrograms = section.querySelectorAll('.program-card');
const hasActivePrograms = Array.from(sectionPrograms)
.some(card => card.querySelector(`.status-${category}`));
const programCards = section.querySelectorAll('.program-card');
section.classList.toggle('hidden', !hasActivePrograms);
programCards.forEach(card => {
const statusElement = card.querySelector('.program-status');
const status = statusElement.textContent;
if (category === 'all') {
card.classList.remove('hidden-by-filter');
} else {
card.classList.toggle('hidden-by-filter', status !== category);
}
});
const hasVisibleCards = Array.from(programCards)
.some(card => !card.classList.contains('hidden-by-filter') &&
!card.classList.contains('hidden-by-search'));
section.classList.toggle('hidden', !hasVisibleCards);
});
}
function searchPrograms(searchTerm) {
const programCards = document.querySelectorAll('.program-card');
searchTerm = searchTerm.toLowerCase().trim();
programCards.forEach(card => {
const name = card.querySelector('h3').textContent.toLowerCase();
const description = card.querySelector('p').textContent.toLowerCase();
const slackChannel = card.querySelector('.program-links')?.textContent.toLowerCase() || '';
const matches = name.includes(searchTerm) ||
description.includes(searchTerm) ||
slackChannel.includes(searchTerm);
card.classList.toggle('hidden-by-search', !matches);
});
const sections = document.querySelectorAll('.category-section');
sections.forEach(section => {
const hasVisibleCards = Array.from(section.querySelectorAll('.program-card'))
.some(card => !card.classList.contains('hidden-by-filter') &&
!card.classList.contains('hidden-by-search'));
section.classList.toggle('hidden', !hasVisibleCards);
});
}
@ -411,30 +443,6 @@ function initializeTheme() {
}
}
function searchPrograms(searchTerm) {
const programCards = document.querySelectorAll('.program-card');
searchTerm = searchTerm.toLowerCase().trim();
programCards.forEach(card => {
const name = card.querySelector('h3').textContent.toLowerCase();
const description = card.querySelector('p').textContent.toLowerCase();
const slackChannel = card.querySelector('.program-links')?.textContent.toLowerCase() || '';
const matches = name.includes(searchTerm) ||
description.includes(searchTerm) ||
slackChannel.includes(searchTerm);
card.classList.toggle('hidden-by-search', !matches);
});
const sections = document.querySelectorAll('.category-section');
sections.forEach(section => {
const hasVisiblePrograms = Array.from(section.querySelectorAll('.program-card'))
.some(card => !card.classList.contains('hidden-by-search'));
section.classList.toggle('hidden', !hasVisiblePrograms);
});
}
function updateDeadlines() {
const deadlineElements = document.querySelectorAll('.program-deadline');
deadlineElements.forEach(element => {

5
styles.css
View file

@ -681,6 +681,11 @@ td {
display: none;
}
.program-card.hidden-by-filter,
.program-card.hidden-by-search {
display: none;
}
@media screen and (min-width: 32em) {
.ultratitle {
font-size: var(--font-5);