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

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