From dc1653ab57f6d1f9818894604adbb36723a1b24f Mon Sep 17 00:00:00 2001 From: popovskik Date: Tue, 28 Jul 2026 11:04:41 +0200 Subject: [PATCH] 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) --- css/pages/_projects.css | 148 ++++++++++++++++++++++++++++++++ en/projects/index.html | 34 ++++++-- main.js | 183 +++++++++++++++++++++++++++++++++++++++- mk/projects/index.html | 34 ++++++-- si/projects/index.html | 34 ++++++-- 5 files changed, 411 insertions(+), 22 deletions(-) diff --git a/css/pages/_projects.css b/css/pages/_projects.css index 9025d841..5cc65856 100644 --- a/css/pages/_projects.css +++ b/css/pages/_projects.css @@ -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; } diff --git a/en/projects/index.html b/en/projects/index.html index 4c4741cb..892c8c6c 100644 --- a/en/projects/index.html +++ b/en/projects/index.html @@ -188,13 +188,31 @@ + +
+ + +
+

All our projects

-
- + + +
+ +
+ + +
+

Сите наши проекти

-
- + + +
+ +
+ + +
+

Vsi naši projekti

-
- + + +