From dc1653ab57f6d1f9818894604adbb36723a1b24f Mon Sep 17 00:00:00 2001 From: popovskik Date: Tue, 28 Jul 2026 11:04:41 +0200 Subject: [PATCH 1/5] 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

- + + +
- - - - - +
- + - \ No newline at end of file + diff --git a/en/projects/in-memory-of-frosina-kulakova/index.html b/en/projects/in-memory-of-frosina-kulakova/index.html new file mode 100644 index 00000000..9b8fc4fb --- /dev/null +++ b/en/projects/in-memory-of-frosina-kulakova/index.html @@ -0,0 +1,273 @@ + + + + + + In Memory of Frosina Kulakova - MSOS + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Select Language

+ +
+ +
+
+ + +
+
+
+

Published on February 8, 2025

+

In Memory of Frosina Kulakova

+

On February 8, 2025, Macedonian students in Ljubljana gathered for a peaceful public event to honor the memory of Frosina Kulakova, who tragically lost her life in Skopje just days earlier.

+
+ +
+ Candles and flowers in memory of Frosina Kulakova +
+ +
+

The news of Frosina’s tragic passing on January 29, 2025, deeply shook students across Slovenia. Even though we are far from home, the pain was shared, and the need to come together was clear. Out of this feeling grew the initiative to organize a peaceful public gathering in Ljubljana, where young people could unite, light candles, lay flowers, and dedicate a moment of silence in her memory.

+ +
+ Students lighting candles in memory of Frosina +
+ +

A message of unity

+ +

This gathering was not about politics or criticism. It was about togetherness, humanity, and shared responsibility. As students abroad, we wanted to show that we care, that we remember, and that we hope for a better tomorrow where such injustices will no longer happen.

+ +

By standing side by side in moments like these, we learn that our strength lies not only in our studies and ambitions but also in our ability to support one another when it matters most.

+ +
+ Flowers and candles laid in remembrance +
+ +

Closing thoughts

+ +

Frosina’s story reminded us of the fragility of life and the importance of solidarity. We are grateful to all who came, who lit a candle, or who simply stood with us in silence.

+ +

As an organization, MSOS will always strive to provide a space where students can come together, in joy, in struggle, and in remembrance, to shape a community that carries both hope and responsibility for the future.

+ +

Rest in peace, Frosina. 🕊️🙏🏻

+
+
+
+ + + + + + + + diff --git a/en/projects/in-memory-of-the-kochani-victims/index.html b/en/projects/in-memory-of-the-kochani-victims/index.html new file mode 100644 index 00000000..4200dea5 --- /dev/null +++ b/en/projects/in-memory-of-the-kochani-victims/index.html @@ -0,0 +1,283 @@ + + + + + + In Memory of the Victims of the Kochani Tragedy - MSOS + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Select Language

+ +
+ +
+
+ + +
+
+
+

Published on March 21, 2025

+

In Memory of the Victims of the Kochani Tragedy

+

On March 21, 2025, more than 600 people gathered at Kongresni trg in Ljubljana for a peaceful public gathering to honor the victims of the tragic fire in Kochani.

+
+ +
+ Candles and flowers at Kongresni trg in memory of the Kochani victims +
+ +
+

On March 16, 2025, a fire broke out in the Pulse nightclub in Kochani, North Macedonia, taking the lives of 60 people and leaving deep scars across the country. For Macedonian students abroad, the news was devastating. Though far from home, the feeling of loss was shared, and the need to stand together was undeniable.

+ +

The MSOS community decided to create a moment of solidarity in Slovenia, not as an act of protest or politics, but as a way to express humanity, grief, and unity in the face of tragedy.

+ +
+ Candlelight and flowers at the memorial gathering in Ljubljana +
+ +

The gathering in Ljubljana

+ +

On March 21, the square in Ljubljana was filled with silence and candlelight. What began as an expectation of around 200 attendees grew into a gathering of more than 600 people of all ages. The program opened with a short address by the MSOS president, followed by a 16-minute silence to honor the victims, one minute for each March day leading up to the tragedy.

+ +

Students, families, and members of the wider community laid flowers and lit candles, creating a sea of light and color that remained untouched for weeks after, as no one dared to disturb the memorial. The atmosphere was solemn, respectful, and deeply emotional.

+ +
+ A sea of candles and flowers left by attendees +
+ +

A message beyond borders

+ +

This gathering was a reminder that even away from home, students carry their roots, their compassion, and their voice for justice. It was not a promotional act but a human one, a sign that the new generation wants to build a future where solidarity and care define who we are.

+ +

The event also received coverage in Slovenia, with the MSOS president giving a short interview for RTV Slovenia, reflecting on the importance of standing united in difficult times.

+ +
+ Attendees standing together during the moment of silence +
+ +

Closing words

+ +

The tragedy in Kochani showed us how fragile life is, but also how strong we can be when we come together. In Ljubljana, the student community stood side by side, sending love and respect back home.

+ +

May the victims rest in peace.

+
+
+
+ + + + + + + + diff --git a/en/projects/index.html b/en/projects/index.html index 892c8c6c..b852bb5e 100644 --- a/en/projects/index.html +++ b/en/projects/index.html @@ -211,6 +211,61 @@ diff --git a/en/projects/paint-and-wine-at-sunset/index.html b/en/projects/paint-and-wine-at-sunset/index.html new file mode 100644 index 00000000..8e0add26 --- /dev/null +++ b/en/projects/paint-and-wine-at-sunset/index.html @@ -0,0 +1,307 @@ + + + + + + Paint & Wine at Sunset, Celebrating Women’s Day with Art & Music - MSOS + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Select Language

+ +
+ +
+
+ + +
+
+
+

Published on March 8, 2025

+

Paint & Wine at Sunset, Celebrating Women’s Day with Art & Music

+

Paint, wine, and music brought students together in Gorizia to celebrate Women’s Day and mark the first MSOS Nova Gorica event.

+
+ +
+ Paint & Wine at Sunset event in Gorizia +
+ +
+

On International Women’s Day, the MSOS Nova Gorica team hosted its very first local event in collaboration with the Macedonian Cultural Association "Ohridski Biseri". Students from Ljubljana, Nova Gorica, and the surrounding region crossed the border into Gorizia, Italy, for an evening of painting, wine, and music.

+ +
+ Students painting during the Paint & Wine evening +
+ +

A first for MSOS Nova Gorica

+ +

This was more than just an event. It was the first official activity organized by our new MSOS Nova Gorica team. With support from the Macedonian Cultural Association "Ohridski Biseri", we transformed the cozy venue Etnoteca Mama Angela into a space filled with creativity and laughter.

+ +
+ The cozy venue Etnoteca Mama Angela +
+ +

Art, music, and togetherness

+ +

The concept was simple but powerful: a Paint & Wine Night where anyone could sit down with a canvas, brushes, and a glass of wine, and let inspiration take over. No prior painting experience was needed. Some chose to create symbolic pieces honoring women, others painted freely from the heart.

+ +

A live DJ set gave the evening a vibrant rhythm, turning it into more than just a workshop. It became a celebration. Between brushstrokes and beats, students connected, shared stories, and enjoyed an atmosphere that was both creative and festive.

+ +
+ Canvases filling with color as students paint +
+ +
+ Students enjoying wine and music together +
+ +

Why it mattered

+ +

Held on March 8, International Women’s Day, the event carried a deeper meaning. It was a chance to celebrate and appreciate women, not only through words but through art. The paintings that came out of the night were diverse, personal, and full of color, much like the student community itself.

+ +

To capture the spirit of the night, we created an aftermovie, which you can watch below.

+ +
+ +
+ +
+ Finished paintings on display +
+ +
+ The group enjoying the celebration +
+ +

Looking ahead

+ +

Paint & Wine Night showed that MSOS Nova Gorica is ready to bring fresh ideas and energy to our student family. From wine glasses clinking to canvases filling with color, the night left everyone with memories and a few paint-stained fingers, that will not be forgotten.

+ +
+ A memory from the Paint & Wine evening +
+ +
+ The MSOS Nova Gorica community at sunset +
+
+
+
+ + + + + + + + diff --git a/en/projects/testproject/index.html.bak b/en/projects/watching-handball-together-in-slovenia/index.html similarity index 51% rename from en/projects/testproject/index.html.bak rename to en/projects/watching-handball-together-in-slovenia/index.html index a53c4e33..500e1e03 100644 --- a/en/projects/testproject/index.html.bak +++ b/en/projects/watching-handball-together-in-slovenia/index.html @@ -1,9 +1,9 @@ - + - Macedonian Student Night in Ljubljana - MSOS + Cheering for Macedonia, Watching Handball Together in Slovenia - MSOS @@ -13,8 +13,8 @@ - - + + @@ -34,7 +34,7 @@ Who We Are