mark/msos
0
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add category filter and functional pagination to projects listing

Browse Source 
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:
popovskikandClaude Opus 4.8 committed 2026-07-28 11:04:56 +02:00
1 parent 13e4c04c3e
commit dc1653ab57
5 files changed
+411 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

si/projects/index.html
+27 -7
View File
@@ -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>