Add category filter and functional pagination to projects listing
Add a Proxify-style category filter and real client-side pagination to the Events & Projects listing across all three languages (EN/SI/MK). - Filter: a pill nav (All / Events / Student Life / Projects / Webinars) plus a contextual sub-chip row for Events (Sports / Cultural / Entertainment / Educational). Buttons carry stable data-filter / data-subfilter keys and cards carry data-category / data-subcategory, so a single language-agnostic handler drives all three locales. - Pagination: replaces the hardcoded dead 1..10 links with real client-side paging (9 per page). Shows a single page today and grows automatically as content is added, with windowed page numbers, enabled/disabled Prev/Next, and smooth scroll-to-top. Integrates with the filter (resets to page 1, repaginates, hides when no matches). - Show a localized empty-state message when a filter has no results. - Nudge the filter block up and add space below it for even spacing. - Drop the duplicate News pill (News has its own top-nav section) and retag the placeholder card from announcements to projects so it stays reachable. Verified with jsdom across EN/SI/MK: filtering, sub-filtering, empty state, single/multi-page navigation, and filter/pagination interaction. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskik
parent
13e4c04c3e
commit
dc1653ab57
|
|
@ -93,6 +93,114 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 1b. Filter kategorij (pill navigacija + podfiltri) */
|
||||
|
||||
.filter-section {
|
||||
padding: 0 24px 44px;
|
||||
margin-top: -40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Zunanja "pill" navigacija (glavne kategorije) */
|
||||
.filter-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
max-width: 100%;
|
||||
padding: 6px;
|
||||
background: #F9FAFB;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0px 8px 30px rgba(16, 24, 40, 0.06);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.filter-nav::-webkit-scrollbar { display: none; }
|
||||
|
||||
.filter-pill {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 999px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: #344054;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.filter-pill:hover {
|
||||
color: #2D738C;
|
||||
}
|
||||
|
||||
.filter-pill.active {
|
||||
color: #2D738C;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
|
||||
}
|
||||
|
||||
/* Notranja vrstica s podfiltri (npr. vrste dogodkov) */
|
||||
.filter-subnav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.filter-subnav[hidden] { display: none; }
|
||||
|
||||
.filter-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
padding: 0 18px;
|
||||
border: 1px solid #D0D5DD;
|
||||
background: #FFFFFF;
|
||||
border-radius: 999px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #344054;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.filter-chip:hover {
|
||||
border-color: #2D738C;
|
||||
color: #2D738C;
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background: #101828;
|
||||
border-color: #101828;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* Sporočilo, ko noben zadetek ne ustreza filtru */
|
||||
.filter-empty {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #667085;
|
||||
font-size: 16px;
|
||||
padding: 32px 0;
|
||||
}
|
||||
.filter-empty[hidden] { display: none; }
|
||||
|
||||
/* Skrite kartice pri filtriranju */
|
||||
.post-card[hidden] { display: none; }
|
||||
|
||||
/* 2. Sekcija z vsemi objavami */
|
||||
|
||||
.all-posts-section {
|
||||
|
|
@ -131,6 +239,8 @@
|
|||
border-top: 1px solid #EAECF0;
|
||||
}
|
||||
|
||||
.pagination[hidden] { display: none; }
|
||||
|
||||
.pagination-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -139,6 +249,16 @@
|
|||
font-weight: 500;
|
||||
color: #667085;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.pagination-arrow:hover { color: #101828; }
|
||||
|
||||
.pagination-arrow.disabled {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pagination-numbers {
|
||||
|
|
@ -157,8 +277,12 @@
|
|||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #667085;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.page-number:hover { background-color: rgba(102, 112, 133, 0.08); }
|
||||
|
||||
.page-number.active {
|
||||
background-color: rgba(102, 112, 133, 0.16);
|
||||
color: #2D738C;
|
||||
|
|
@ -207,6 +331,30 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 0 16px 28px;
|
||||
margin-top: -24px;
|
||||
align-items: stretch;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Na mobilnem se glavna navigacija vodoravno pomika */
|
||||
.filter-nav {
|
||||
justify-content: flex-start;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.filter-subnav {
|
||||
justify-content: flex-start;
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.filter-subnav::-webkit-scrollbar { display: none; }
|
||||
|
||||
.filter-chip { flex: 0 0 auto; }
|
||||
|
||||
.all-posts-section {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -188,13 +188,31 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Category Filter -->
|
||||
<section class="filter-section">
|
||||
<nav class="filter-nav" aria-label="Project categories">
|
||||
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">All</button>
|
||||
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Events</button>
|
||||
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Student Life</button>
|
||||
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Projects</button>
|
||||
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Webinars</button>
|
||||
</nav>
|
||||
<div class="filter-subnav" data-parent="events" hidden>
|
||||
<button type="button" class="filter-chip active" data-subfilter="all">All events</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="sports">Sports</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="cultural">Cultural</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="entertainment">Entertainment</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="educational">Educational</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- All Projects Section -->
|
||||
<section class="all-posts-section">
|
||||
<div class="container column-layout">
|
||||
<h2>All our projects</h2>
|
||||
<div class="posts-grid">
|
||||
<!-- Project: Meet Student Slovenia 2024 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="educational">
|
||||
<a href="meet-student-slovenia-2024/" class="post-link">
|
||||
<img src="../../images/event4-img-1.webp" alt="A group of students at the 'Meet Student Slovenia 2024' event" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -205,7 +223,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Project: Morning Coffee in front of CTK – 2024 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="student-life">
|
||||
<a href="morning-coffee-in-front-of-ctk/" class="post-link">
|
||||
<img src="../../images/event4-image1.webp" alt="Students enjoying coffee and burek in front of CTK library" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -216,7 +234,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Project: Meet Student Slovenia 2023 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="educational">
|
||||
<a href="meet-student-slovenia-2023/" class="post-link">
|
||||
<img src="../../images/event3-photo-1.webp" alt="Panel discussion at the 'Meet Student Slovenia 2023' event" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -227,7 +245,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Project: Macedonian Student Night -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="entertainment">
|
||||
<a href="macedonian-student-night-in-ljubljana/" class="post-link">
|
||||
<img src="../../images/msnl-1.webp" alt="Atmosphere from the Macedonian Student Night in Ljubljana" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -238,7 +256,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Placeholder Project 1 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="projects">
|
||||
<a href="testproject/" class="post-link">
|
||||
<img src="../../images/4-billwalsh.webp" alt="Pink and blue tinted image of a snowy mountain peak" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -249,7 +267,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Placeholder Project 2 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="student-life">
|
||||
<a href="testproject/" class="post-link">
|
||||
<img src="../../images/5-pmmentals.webp" alt="A woman presenting in front of a whiteboard with sticky notes to a team" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -260,7 +278,9 @@
|
|||
</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="filter-empty" hidden>No projects match this filter yet.</p>
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav class="pagination">
|
||||
<a href="#" class="pagination-arrow"><i class="fas fa-arrow-left"></i> Previous</a>
|
||||
|
|
|
|||
183
main.js
183
main.js
|
|
@ -467,7 +467,188 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
/**
|
||||
* ===================================================================
|
||||
* 6. ZAGON FUNKCIJ PO NALOŽITVI STRANI
|
||||
* 6. FILTER KATEGORIJ ZA SEZNAM PROJEKTOV / OBJAV
|
||||
* ===================================================================
|
||||
*
|
||||
* Deluje na katerikoli strani s seznamom (projekti, novice, ...).
|
||||
* Popolnoma jezikovno neodvisen: gumbi nosijo stabilni ključ
|
||||
* (data-filter / data-subfilter), kartice pa data-category /
|
||||
* data-subcategory. Oznake so lahko v katerem koli jeziku.
|
||||
*/
|
||||
try {
|
||||
const grid = document.querySelector('.posts-grid');
|
||||
|
||||
if (grid) {
|
||||
const filterSection = document.querySelector('.filter-section');
|
||||
const pagination = document.querySelector('.pagination');
|
||||
const cards = Array.from(grid.querySelectorAll('.post-card'));
|
||||
const emptyMsg = document.querySelector('.filter-empty');
|
||||
|
||||
// Koliko kartic na stran. Ko bo objav več kot toliko, se
|
||||
// paginacija samodejno vklopi; do takrat prikaže eno stran.
|
||||
const PAGE_SIZE = 9;
|
||||
|
||||
let activeCat = 'all';
|
||||
let activeSub = 'all';
|
||||
let currentPage = 1;
|
||||
let matching = cards.slice();
|
||||
|
||||
// --- Paginacija ---
|
||||
const pageNumbers = pagination ? pagination.querySelector('.pagination-numbers') : null;
|
||||
const arrows = pagination ? pagination.querySelectorAll('.pagination-arrow') : [];
|
||||
const prevArrow = arrows.length ? arrows[0] : null;
|
||||
const nextArrow = arrows.length > 1 ? arrows[arrows.length - 1] : null;
|
||||
|
||||
const totalPages = () => Math.max(1, Math.ceil(matching.length / PAGE_SIZE));
|
||||
|
||||
const renderPageNumbers = (total) => {
|
||||
if (!pageNumbers) return;
|
||||
pageNumbers.innerHTML = '';
|
||||
const addNum = (n) => {
|
||||
const a = document.createElement('a');
|
||||
a.href = '#';
|
||||
a.className = 'page-number' + (n === currentPage ? ' active' : '');
|
||||
a.textContent = n;
|
||||
a.addEventListener('click', (e) => { e.preventDefault(); goToPage(n); });
|
||||
pageNumbers.appendChild(a);
|
||||
};
|
||||
const addDots = () => {
|
||||
const s = document.createElement('span');
|
||||
s.className = 'page-dots';
|
||||
s.textContent = '...';
|
||||
pageNumbers.appendChild(s);
|
||||
};
|
||||
// Do 7 strani pokažemo vse; sicer okno okoli trenutne strani.
|
||||
const seq = [];
|
||||
if (total <= 7) {
|
||||
for (let i = 1; i <= total; i++) seq.push(i);
|
||||
} else {
|
||||
seq.push(1);
|
||||
const start = Math.max(2, currentPage - 1);
|
||||
const end = Math.min(total - 1, currentPage + 1);
|
||||
if (start > 2) seq.push('...');
|
||||
for (let i = start; i <= end; i++) seq.push(i);
|
||||
if (end < total - 1) seq.push('...');
|
||||
seq.push(total);
|
||||
}
|
||||
seq.forEach(p => (p === '...' ? addDots() : addNum(p)));
|
||||
};
|
||||
|
||||
const render = () => {
|
||||
const total = totalPages();
|
||||
if (currentPage > total) currentPage = total;
|
||||
if (currentPage < 1) currentPage = 1;
|
||||
|
||||
cards.forEach(c => { c.hidden = true; });
|
||||
const start = (currentPage - 1) * PAGE_SIZE;
|
||||
matching.slice(start, start + PAGE_SIZE).forEach(c => { c.hidden = false; });
|
||||
|
||||
if (emptyMsg) emptyMsg.hidden = matching.length !== 0;
|
||||
|
||||
if (pagination) {
|
||||
// Skrij paginacijo, ko ni zadetkov.
|
||||
pagination.hidden = matching.length === 0;
|
||||
renderPageNumbers(total);
|
||||
if (prevArrow) prevArrow.classList.toggle('disabled', currentPage <= 1);
|
||||
if (nextArrow) nextArrow.classList.toggle('disabled', currentPage >= total);
|
||||
}
|
||||
};
|
||||
|
||||
function goToPage(n) {
|
||||
const total = totalPages();
|
||||
currentPage = Math.min(Math.max(1, n), total);
|
||||
render();
|
||||
// Po menjavi strani se pomaknemo na vrh seznama.
|
||||
const anchor = filterSection || grid;
|
||||
const y = anchor.getBoundingClientRect().top + window.scrollY - 100;
|
||||
window.scrollTo({ top: y, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
if (prevArrow) {
|
||||
prevArrow.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (currentPage > 1) goToPage(currentPage - 1);
|
||||
});
|
||||
}
|
||||
if (nextArrow) {
|
||||
nextArrow.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
if (currentPage < totalPages()) goToPage(currentPage + 1);
|
||||
});
|
||||
}
|
||||
|
||||
// --- Filter (če je na strani) ---
|
||||
const computeMatching = () => {
|
||||
matching = cards.filter(card => {
|
||||
const cat = (card.getAttribute('data-category') || '').trim();
|
||||
const sub = (card.getAttribute('data-subcategory') || '').trim();
|
||||
let show = activeCat === 'all' || cat === activeCat;
|
||||
if (show && activeCat !== 'all' && activeSub !== 'all') {
|
||||
show = sub === activeSub;
|
||||
}
|
||||
return show;
|
||||
});
|
||||
};
|
||||
|
||||
if (filterSection) {
|
||||
const pills = Array.from(filterSection.querySelectorAll('.filter-pill'));
|
||||
const subnavs = Array.from(filterSection.querySelectorAll('.filter-subnav'));
|
||||
|
||||
const showSubnavFor = (cat) => {
|
||||
subnavs.forEach(sn => {
|
||||
const match = sn.getAttribute('data-parent') === cat;
|
||||
sn.hidden = !match;
|
||||
if (match) {
|
||||
sn.querySelectorAll('.filter-chip').forEach(chip =>
|
||||
chip.classList.toggle('active',
|
||||
(chip.getAttribute('data-subfilter') || 'all') === 'all'));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
pills.forEach(pill => {
|
||||
pill.addEventListener('click', () => {
|
||||
activeCat = pill.getAttribute('data-filter') || 'all';
|
||||
activeSub = 'all';
|
||||
currentPage = 1;
|
||||
pills.forEach(p => {
|
||||
const on = p === pill;
|
||||
p.classList.toggle('active', on);
|
||||
p.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
});
|
||||
showSubnavFor(activeCat);
|
||||
computeMatching();
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
subnavs.forEach(sn => {
|
||||
sn.querySelectorAll('.filter-chip').forEach(chip => {
|
||||
chip.addEventListener('click', () => {
|
||||
activeSub = chip.getAttribute('data-subfilter') || 'all';
|
||||
currentPage = 1;
|
||||
sn.querySelectorAll('.filter-chip').forEach(c =>
|
||||
c.classList.toggle('active', c === chip));
|
||||
computeMatching();
|
||||
render();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Začetno stanje: "Vse" aktivno, podfiltri skriti.
|
||||
showSubnavFor(activeCat);
|
||||
}
|
||||
|
||||
computeMatching();
|
||||
render();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in Project Filter/Pagination setup:', error);
|
||||
}
|
||||
|
||||
/**
|
||||
* ===================================================================
|
||||
* 7. ZAGON FUNKCIJ PO NALOŽITVI STRANI
|
||||
* ===================================================================
|
||||
*/
|
||||
highlightActiveLink();
|
||||
|
|
|
|||
|
|
@ -188,13 +188,31 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Филтер по категории -->
|
||||
<section class="filter-section">
|
||||
<nav class="filter-nav" aria-label="Категории на проекти">
|
||||
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">Сите</button>
|
||||
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Настани</button>
|
||||
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Студентски живот</button>
|
||||
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Проекти</button>
|
||||
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Вебинари</button>
|
||||
</nav>
|
||||
<div class="filter-subnav" data-parent="events" hidden>
|
||||
<button type="button" class="filter-chip active" data-subfilter="all">Сите настани</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="sports">Спорт</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="cultural">Културни</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="entertainment">Забава</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="educational">Едукативни</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Секција со сите проекти -->
|
||||
<section class="all-posts-section">
|
||||
<div class="container column-layout">
|
||||
<h2>Сите наши проекти</h2>
|
||||
<div class="posts-grid">
|
||||
<!-- Проект: Запознај ја студентска Словенија 2024 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="educational">
|
||||
<a href="meet-student-slovenia-2024/" class="post-link">
|
||||
<img src="../../images/event4-img-1.webp" alt="Група студенти на настанот „Запознај ја студентска Словенија 2024“" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -205,7 +223,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Проект: Утринско кафе пред ЦТК – 2024 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="student-life">
|
||||
<a href="morning-coffee-in-front-of-ctk/" class="post-link">
|
||||
<img src="../../images/event4-image1.webp" alt="Студенти уживаат во кафе и бурек пред библиотеката ЦТК" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -216,7 +234,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Проект: Запознај ја студентска Словенија 2023 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="educational">
|
||||
<a href="meet-student-slovenia-2023/" class="post-link">
|
||||
<img src="../../images/event3-photo-1.webp" alt="Панел дискусија на настанот „Запознај ја студентска Словенија 2023“" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -227,7 +245,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Проект: Македонска студентска вечер во Љубљана -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="entertainment">
|
||||
<a href="macedonian-student-night-in-ljubljana/" class="post-link">
|
||||
<img src="../../images/msnl-1.webp" alt="Атмосфера од македонската студентска вечер во Љубљана" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -238,7 +256,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Проект 1 (Placeholder) -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="projects">
|
||||
<a href="testproject/" class="post-link">
|
||||
<img src="../../images/4-billwalsh.webp" alt="Слика на снежен планински врв во розови и сини нијанси" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -249,7 +267,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Проект 2 (Placeholder) -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="student-life">
|
||||
<a href="testproject/" class="post-link">
|
||||
<img src="../../images/5-pmmentals.webp" alt="Жена презентира пред табла со лепливи белешки на тим" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -260,7 +278,9 @@
|
|||
</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="filter-empty" hidden>Ниту еден проект сè уште не одговара на овој филтер.</p>
|
||||
|
||||
<!-- Пагинација -->
|
||||
<nav class="pagination">
|
||||
<a href="#" class="pagination-arrow"><i class="fas fa-arrow-left"></i> Претходна</a>
|
||||
|
|
|
|||
|
|
@ -188,13 +188,31 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Filter kategorij -->
|
||||
<section class="filter-section">
|
||||
<nav class="filter-nav" aria-label="Kategorije projektov">
|
||||
<button type="button" class="filter-pill active" data-filter="all" aria-pressed="true">Vse</button>
|
||||
<button type="button" class="filter-pill" data-filter="events" aria-pressed="false">Dogodki</button>
|
||||
<button type="button" class="filter-pill" data-filter="student-life" aria-pressed="false">Študentsko življenje</button>
|
||||
<button type="button" class="filter-pill" data-filter="projects" aria-pressed="false">Projekti</button>
|
||||
<button type="button" class="filter-pill" data-filter="webinars" aria-pressed="false">Webinarji</button>
|
||||
</nav>
|
||||
<div class="filter-subnav" data-parent="events" hidden>
|
||||
<button type="button" class="filter-chip active" data-subfilter="all">Vsi dogodki</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="sports">Šport</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="cultural">Kulturni</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="entertainment">Zabava</button>
|
||||
<button type="button" class="filter-chip" data-subfilter="educational">Izobraževalni</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Sekcija z vsemi projekti -->
|
||||
<section class="all-posts-section">
|
||||
<div class="container column-layout">
|
||||
<h2>Vsi naši projekti</h2>
|
||||
<div class="posts-grid">
|
||||
<!-- Projekt: Spoznaj študentsko Slovenijo 2024 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="educational">
|
||||
<a href="meet-student-slovenia-2024/" class="post-link">
|
||||
<img src="../../images/event4-img-1.webp" alt="Skupina študentov na dogodku 'Spoznaj študentsko Slovenijo 2024'" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -205,7 +223,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Projekt: Jutranja kava pred CTK – 2024 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="student-life">
|
||||
<a href="morning-coffee-in-front-of-ctk/" class="post-link">
|
||||
<img src="../../images/event4-image1.webp" alt="Študenti uživajo ob kavi in bureku pred knjižnico CTK" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -216,7 +234,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Projekt: Spoznaj študentsko Slovenijo 2023 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="educational">
|
||||
<a href="meet-student-slovenia-2023/" class="post-link">
|
||||
<img src="../../images/event3-photo-1.webp" alt="Panelna razprava na dogodku 'Spoznaj študentsko Slovenijo 2023'" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -227,7 +245,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Projekt: Makedonska študentska noč v Ljubljani -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="events" data-subcategory="entertainment">
|
||||
<a href="macedonian-student-night-in-ljubljana/" class="post-link">
|
||||
<img src="../../images/msnl-1.webp" alt="Vzdušje z Makedonske študentske noči v Ljubljani" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -238,7 +256,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Placeholder Project 1 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="projects">
|
||||
<a href="testproject/" class="post-link">
|
||||
<img src="../../images/4-billwalsh.webp" alt="Roza in modro obarvana podoba zasneženega vrha gore" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -249,7 +267,7 @@
|
|||
</a>
|
||||
</article>
|
||||
<!-- Placeholder Project 2 -->
|
||||
<article class="post-card">
|
||||
<article class="post-card" data-category="student-life">
|
||||
<a href="testproject/" class="post-link">
|
||||
<img src="../../images/5-pmmentals.webp" alt="Ženska predstavlja pred belo tablo z listki ekipi" class="post-image">
|
||||
<div class="post-content">
|
||||
|
|
@ -260,7 +278,9 @@
|
|||
</a>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="filter-empty" hidden>Noben projekt še ne ustreza temu filtru.</p>
|
||||
|
||||
<!-- Paginacija -->
|
||||
<nav class="pagination">
|
||||
<a href="#" class="pagination-arrow"><i class="fas fa-arrow-left"></i> Prejšnja</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue