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

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