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

kristijan-dev #2

Merged
popovskik merged 5 commits from kristijan-dev into develop 2026-07-29 11:40:52 +00:00
Conversation 0 Commits 5 Files Changed 166 +411 -22
5 changed files with 411 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dc1653ab57 - Show all commits

148
css/pages/_projects.css
View File

@ -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;
}

34
en/projects/index.html
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>

183
main.js
View File

@ -467,7 +467,188 @@ document.addEventListener('DOMContentLoaded', function() {
/**
* ===================================================================
* 6. ZAGON FUNKCIJ PO NALOŽITVI STRANI
* 6. FILTER KATEGORIJ ZA SEZNAM PROJEKTOV / OBJAV
* ===================================================================
*
* Deluje na katerikoli strani s seznamom (projekti, novice, ...).
* Popolnoma jezikovno neodvisen: gumbi nosijo stabilni ključ
* (data-filter / data-subfilter), kartice pa data-category /
* data-subcategory. Oznake so lahko v katerem koli jeziku.
*/
try {
const grid = document.querySelector('.posts-grid');
if (grid) {
const filterSection = document.querySelector('.filter-section');
const pagination = document.querySelector('.pagination');
const cards = Array.from(grid.querySelectorAll('.post-card'));
const emptyMsg = document.querySelector('.filter-empty');
// Koliko kartic na stran. Ko bo objav več kot toliko, se
// paginacija samodejno vklopi; do takrat prikaže eno stran.
const PAGE_SIZE = 9;
let activeCat = 'all';
let activeSub = 'all';
let currentPage = 1;
let matching = cards.slice();
// --- Paginacija ---
const pageNumbers = pagination ? pagination.querySelector('.pagination-numbers') : null;
const arrows = pagination ? pagination.querySelectorAll('.pagination-arrow') : [];
const prevArrow = arrows.length ? arrows[0] : null;
const nextArrow = arrows.length > 1 ? arrows[arrows.length - 1] : null;
const totalPages = () => Math.max(1, Math.ceil(matching.length / PAGE_SIZE));
const renderPageNumbers = (total) => {
if (!pageNumbers) return;
pageNumbers.innerHTML = '';
const addNum = (n) => {
const a = document.createElement('a');
a.href = '#';
a.className = 'page-number' + (n === currentPage ? ' active' : '');
a.textContent = n;
a.addEventListener('click', (e) => { e.preventDefault(); goToPage(n); });
pageNumbers.appendChild(a);
};
const addDots = () => {
const s = document.createElement('span');
s.className = 'page-dots';
s.textContent = '...';
pageNumbers.appendChild(s);
};
// Do 7 strani pokažemo vse; sicer okno okoli trenutne strani.
const seq = [];
if (total <= 7) {
for (let i = 1; i <= total; i++) seq.push(i);
} else {
seq.push(1);
const start = Math.max(2, currentPage - 1);
const end = Math.min(total - 1, currentPage + 1);
if (start > 2) seq.push('...');
for (let i = start; i <= end; i++) seq.push(i);
if (end < total - 1) seq.push('...');
seq.push(total);
}
seq.forEach(p => (p === '...' ? addDots() : addNum(p)));
};
const render = () => {
const total = totalPages();
if (currentPage > total) currentPage = total;
if (currentPage < 1) currentPage = 1;
cards.forEach(c => { c.hidden = true; });
const start = (currentPage - 1) * PAGE_SIZE;
matching.slice(start, start + PAGE_SIZE).forEach(c => { c.hidden = false; });
if (emptyMsg) emptyMsg.hidden = matching.length !== 0;
if (pagination) {
// Skrij paginacijo, ko ni zadetkov.
pagination.hidden = matching.length === 0;
renderPageNumbers(total);
if (prevArrow) prevArrow.classList.toggle('disabled', currentPage <= 1);
if (nextArrow) nextArrow.classList.toggle('disabled', currentPage >= total);
}
};
function goToPage(n) {
const total = totalPages();
currentPage = Math.min(Math.max(1, n), total);
render();
// Po menjavi strani se pomaknemo na vrh seznama.
const anchor = filterSection || grid;
const y = anchor.getBoundingClientRect().top + window.scrollY - 100;
window.scrollTo({ top: y, behavior: 'smooth' });
}
if (prevArrow) {
prevArrow.addEventListener('click', (e) => {
e.preventDefault();
if (currentPage > 1) goToPage(currentPage - 1);
});
}
if (nextArrow) {
nextArrow.addEventListener('click', (e) => {
e.preventDefault();
if (currentPage < totalPages()) goToPage(currentPage + 1);
});
}
// --- Filter (če je na strani) ---
const computeMatching = () => {
matching = cards.filter(card => {
const cat = (card.getAttribute('data-category') || '').trim();
const sub = (card.getAttribute('data-subcategory') || '').trim();
let show = activeCat === 'all' || cat === activeCat;
if (show && activeCat !== 'all' && activeSub !== 'all') {
show = sub === activeSub;
}
return show;
});
};
if (filterSection) {
const pills = Array.from(filterSection.querySelectorAll('.filter-pill'));
const subnavs = Array.from(filterSection.querySelectorAll('.filter-subnav'));
const showSubnavFor = (cat) => {
subnavs.forEach(sn => {
const match = sn.getAttribute('data-parent') === cat;
sn.hidden = !match;
if (match) {
sn.querySelectorAll('.filter-chip').forEach(chip =>
chip.classList.toggle('active',
(chip.getAttribute('data-subfilter') || 'all') === 'all'));
}
});
};
pills.forEach(pill => {
pill.addEventListener('click', () => {
activeCat = pill.getAttribute('data-filter') || 'all';
activeSub = 'all';
currentPage = 1;
pills.forEach(p => {
const on = p === pill;
p.classList.toggle('active', on);
p.setAttribute('aria-pressed', on ? 'true' : 'false');
});
showSubnavFor(activeCat);
computeMatching();
render();
});
});
subnavs.forEach(sn => {
sn.querySelectorAll('.filter-chip').forEach(chip => {
chip.addEventListener('click', () => {
activeSub = chip.getAttribute('data-subfilter') || 'all';
currentPage = 1;
sn.querySelectorAll('.filter-chip').forEach(c =>
c.classList.toggle('active', c === chip));
computeMatching();
render();
});
});
});
// Začetno stanje: "Vse" aktivno, podfiltri skriti.
showSubnavFor(activeCat);
}
computeMatching();
render();
}
} catch (error) {
console.error('Error in Project Filter/Pagination setup:', error);
}
/**
* ===================================================================
* 7. ZAGON FUNKCIJ PO NALOŽITVI STRANI
* ===================================================================
*/
highlightActiveLink();

34
mk/projects/index.html
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>

34
si/projects/index.html
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>