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

Popravljen mobilni meni
Deploy to Production on Develop Push / deploy (push) Successful in 59s Details

This commit is contained in:
Mark Poljanšek 2025-09-04 16:14:35 +02:00
parent 6ed8073b76
commit c1094898b7
19 changed files with 130 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
code_export.txt
View File

@ -3157,11 +3157,11 @@ footer hr {
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -3538,11 +3538,11 @@ footer hr {
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -5783,12 +5783,12 @@ footer hr {
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Link to the main JS file -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -6120,12 +6120,12 @@ footer hr {
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Link to the main JS file -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -7159,7 +7159,7 @@ footer hr {
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -7503,7 +7503,7 @@ footer hr {
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -9959,7 +9959,7 @@ footer hr {
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -10303,7 +10303,7 @@ footer hr {
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -11534,12 +11534,12 @@ document.addEventListener('DOMContentLoaded', function() {
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Поврзување до главната JS-датотека -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -11791,12 +11791,12 @@ document.addEventListener('DOMContentLoaded', function() {
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Поврзување до главната JS-датотека -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -15293,12 +15293,12 @@ msos spletna stran
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Povezava do glavne JS datoteke -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -15550,12 +15550,12 @@ msos spletna stran
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Povezava do glavne JS datoteke -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -17703,7 +17703,7 @@ msos spletna stran
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""
@ -17913,7 +17913,7 @@ msos spletna stran
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>"""

4
css/base/_base.css
View File

@ -21,8 +21,8 @@ body {
color: #101828;
}
/* Prepreči drsenje strani, ko je mobilni meni odprt */
body.nav-open {
/* NOVO (zamenjaj znotraj _base.css): */
html.nav-open, html.nav-open body {
overflow: hidden;
}

92
css/layout/_header.css
View File

@ -35,7 +35,6 @@
gap: 48px;
}
/* KLJUČNA SPREMEMBA: Navigacijskemu ovoju damo možnost rasti, da zapolni prostor */
.header-content > nav {
flex-grow: 1;
display: flex;
@ -55,10 +54,9 @@
display: flex;
align-items: center;
height: 100%;
width: 100%; /* Dovolimo, da seznam zasede celotno širino <nav> elementa */
width: 100%;
}
/* KLJUČNA SPREMEMBA: Poravnamo elemente na desno znotraj razpoložljivega prostora */
.navigation.desktop-nav {
justify-content: flex-end;
}
@ -82,7 +80,7 @@
align-items: center;
gap: 8px;
transition: color 0.2s ease-in-out;
white-space: nowrap; /* KLJUČNA SPREMEMBA: Prepreči prelom besedila */
white-space: nowrap;
}
.navigation > .menu-item > a:hover {
@ -104,10 +102,9 @@
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0; /* Preprečimo, da bi se gumbi stisnili */
flex-shrink: 0;
}
/* Stili za izbiro jezika (ostanejo enaki) */
.language-selector {
position: relative;
cursor: pointer;
@ -169,19 +166,19 @@
background-color: #FFFFFF;
border: 1px solid #EAECF0;
list-style: none;
margin: 8px 0 0 0; /* Povečan odmik za zračnost */
margin: 8px 0 0 0;
padding: 8px;
min-width: 260px;
border-radius: 12px;
box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
/* To pravilo povzroča težave na mobilnih napravah in ga bomo spodaj povozili */
.navigation .menu-item:hover > .dropdown-menu {
opacity: 1;
visibility: visible;
@ -219,7 +216,7 @@
/* ==========================================================================
5. Stili za mobilno glavo in "accordion" meni - OPTIMIZIRANO
5. Stili za mobilno glavo in "accordion" meni - POPOLNA PRENOVA
========================================================================== */
@media (max-width: 1024px) {
@ -235,14 +232,9 @@
z-index: 1002;
}
/* === GLAVNI POPRAVEK ZA DELOVANJE MOBILNEGA MENIJA === */
/* Preprečimo, da bi .header-content zavzel ves prostor na mobilni napravi,
kar je sicer pravilno za namizje, a na mobilni napravi potisne ikono menija
izven vidnega polja ali prepreči klik nanjo. */
.header-content {
flex-grow: 0;
}
/* ======================================================= */
.navigation.desktop-nav,
.dropdown-header-navigation .container > .navigation-actions {
@ -254,11 +246,12 @@
font-size: 24px;
color: #101828;
cursor: pointer;
z-index: 1002;
z-index: 1003;
}
.mobile-menu-icon .fa-times { display: none; }
body.nav-open .mobile-menu-icon .fa-bars { display: none; }
body.nav-open .mobile-menu-icon .fa-times { display: block; }
html.nav-open .mobile-menu-icon .fa-bars { display: none; }
html.nav-open .mobile-menu-icon .fa-times { display: block; }
.mobile-nav-panel {
display: flex;
@ -277,7 +270,7 @@
overflow-y: auto;
}
body.nav-open .mobile-nav-panel {
html.nav-open .mobile-nav-panel {
transform: translateX(0);
}
@ -287,14 +280,17 @@
align-items: stretch;
width: 100%;
gap: 0;
border-bottom: 1px solid #EAECF0;
padding-bottom: 24px;
}
.mobile-nav .menu-item {
display: block;
height: auto;
border-bottom: 1px solid #EAECF0;
}
.mobile-nav .menu-item:last-of-type {
border-bottom: none;
.mobile-nav .menu-item:first-of-type {
border-top: 1px solid #EAECF0;
}
.mobile-nav .menu-item > a {
@ -309,29 +305,29 @@
height: auto;
}
.mobile-nav .menu-item.open > a::after {
html.nav-open .mobile-nav .menu-item.open > a::after {
transform: rotate(180deg);
}
.mobile-nav .dropdown-menu {
position: static;
background-color: #F9FAFB;
box-shadow: none;
border-radius: 0;
padding: 0 0 0 16px;
min-width: auto;
width: 100%;
max-height: 0;
overflow: hidden;
transform: none;
opacity: 1;
visibility: visible;
transform: none;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
box-shadow: none;
border: none;
background-color: transparent;
width: 100%;
min-width: auto;
margin: 0;
padding: 0 0 8px 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.mobile-nav .menu-item.open > .dropdown-menu {
max-height: 500px;
padding: 16px 0 16px 16px;
}
.mobile-nav .dropdown-menu ul {
@ -340,17 +336,45 @@
list-style: none;
}
.mobile-nav .dropdown-menu li {
padding: 0;
}
.mobile-nav .dropdown-menu a {
display: block;
padding: 12px 16px 12px 24px;
color: #344054;
font-weight: 500;
font-size: 18px;
padding: 10px 0;
border-radius: 6px;
white-space: normal;
}
.mobile-nav .dropdown-menu a:hover {
background-color: transparent;
background-color: #F9FAFB;
color: #101828;
}
/* === KLJUČNI POPRAVEK: Onemogočimo namizne :hover efekte na mobilnih napravah === */
.mobile-nav .menu-item:hover > .dropdown-menu {
/* Preprečimo, da bi namizno pravilo :hover vplivalo na mobilni meni.
Na mobilni napravi je stanje odprtosti nadzorovano izključno z razredom .open. */
opacity: 1;
visibility: visible;
transform: none;
}
.mobile-nav .menu-item:hover > a::after {
/* Preprečimo obračanje puščice ob :hover dogodku.
Puščica se bo obrnila le, ko je dodan razred .open. */
transform: none;
}
html.nav-open .mobile-nav .menu-item.open > a::after {
/* Zagotovimo, da se puščica obrne, ko je meni odprt */
transform: rotate(180deg);
}
/* ================================================================================ */
.mobile-nav-panel .navigation-actions {
display: flex;
flex-direction: column;

2
en/about-us/index.html
View File

@ -371,6 +371,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

6
en/about-us/index.html.bak
View File

@ -99,7 +99,7 @@
</div>
</header>
<!-- KLJUČNA SPREMEMBA: Mobilni panel je zdaj ZUNAJ <header> elementa -->
<!-- Mobile Navigation Panel (ostane znotraj markerjev, a za <header>) -->
<div class="mobile-nav-panel">
<nav>
<ul class="navigation mobile-nav">
@ -367,10 +367,10 @@
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

1
en/index.html
View File

@ -465,6 +465,5 @@
</footer>
<!-- END_FOOTER -->
<script src="../main.js"></script>
</body>
</html>

2
en/projects/index.html
View File

@ -326,7 +326,5 @@
</footer>
<!-- END_FOOTER -->
<!-- Link to the main JS file -->
<script src="../../main.js"></script>
</body>
</html>

6
en/projects/index.html.bak
View File

@ -99,7 +99,7 @@
</div>
</header>
<!-- KLJUČNA SPREMEMBA: Mobilni panel je zdaj ZUNAJ <header> elementa -->
<!-- Mobile Navigation Panel (ostane znotraj markerjev, a za <header>) -->
<div class="mobile-nav-panel">
<nav>
<ul class="navigation mobile-nav">
@ -322,11 +322,9 @@
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Link to the main JS file -->
<script src="../../main.js"></script>
</body>
</html>

2
en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html
View File

@ -334,6 +334,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

2
en/projects/makedonska-studentska-vecer-vo-ljubljana/index.html.bak
View File

@ -334,6 +334,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

2
en/projects/testproject/index.html
View File

@ -334,6 +334,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

2
en/projects/testproject/index.html.bak
View File

@ -334,6 +334,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

41
main.js
View File

@ -2,28 +2,43 @@ document.addEventListener('DOMContentLoaded', function() {
/**
* ===================================================================
* 1. OSNOVNA FUNKCIONALNOST MOBILNE NAVIGACIJE
* Ta koda je ključna za delovanje mobilnega menija.
* 1. OSNOVNA FUNKCIONALNOST MOBILNE NAVIGACIJE (Robustna različica)
* ===================================================================
*/
// --- Odpiranje in zapiranje glavnega mobilnega panela ---
// === MOBILNI MENI: Robusten toggle na <html> ===
try {
const mobileMenuIcon = document.querySelector('.mobile-menu-icon');
const body = document.querySelector('body');
const icon = document.querySelector('.mobile-menu-icon');
const root = document.documentElement; // Ciljamo <html>, da se izognemo konfliktom na <body>
if (mobileMenuIcon && body) {
mobileMenuIcon.addEventListener('click', () => {
body.classList.toggle('nav-open');
});
if (!icon) {
console.error('Mobile menu icon not found.');
} else {
console.error('Mobile menu icon or body not found.');
icon.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation(); // Preprečimo "bubbling" dogodka, ki bi lahko takoj zaprl meni
root.classList.toggle('nav-open');
});
// Zapri meni ob kliku izven panela ali ikone
document.addEventListener('click', (e) => {
if (root.classList.contains('nav-open') && !e.target.closest('.mobile-nav-panel') && !e.target.closest('.mobile-menu-icon')) {
root.classList.remove('nav-open');
}
});
// Zapri meni s tipko Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
root.classList.remove('nav-open');
}
});
}
} catch (error) {
console.error('Error in Mobile Menu Toggle:', error);
} catch (err) {
console.error('Error in Mobile Menu Toggle:', err);
}
// --- Mobilni Accordion podmeni ---
// --- Mobilni Accordion podmeni (ostane nespremenjen) ---
try {
const mobileNav = document.querySelector('.mobile-nav-panel .mobile-nav');
if (mobileNav) {

2
mk/projects/index.html
View File

@ -248,6 +248,6 @@
<!-- END_FOOTER -->
<!-- Поврзување до главната JS-датотека -->
<script src="../../main.js"></script>
</body>
</html>

6
mk/projects/index.html.bak
View File

@ -164,7 +164,7 @@
<!-- Проект 2 (Placeholder) -->
<article class="post-card">
<a href="testproject/" class="post-link">
<img src="../../images/5-pmmentals.jpg" alt="Жена презентира пред табла со лепливи белешки на тим" class="post-image">
<img src="../../images/5-pmmentals.webp" alt="Жена презентира пред табла со лепливи белешки на тим" class="post-image">
<div class="post-content">
<p class="post-meta">Demi Wilkinson • 16 Јан 2022 • Студентски живот</p>
<h3 class="post-title">ПМ ментални модели</h3>
@ -243,11 +243,11 @@
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Поврзување до главната JS-датотека -->
<script src="../../main.js"></script>
</body>
</html>

2
si/projects/index.html
View File

@ -248,6 +248,6 @@
<!-- END_FOOTER -->
<!-- Povezava do glavne JS datoteke -->
<script src="../../main.js"></script>
</body>
</html>

6
si/projects/index.html.bak
View File

@ -164,7 +164,7 @@
<!-- Placeholder Project 2 -->
<article class="post-card">
<a href="testproject/" class="post-link">
<img src="../../images/5-pmmentals.jpg" alt="Ženska predstavlja pred belo tablo z listki ekipi" class="post-image">
<img src="../../images/5-pmmentals.webp" alt="Ženska predstavlja pred belo tablo z listki ekipi" class="post-image">
<div class="post-content">
<p class="post-meta">Demi Wilkinson • 16 Jan 2022 • Študentsko življenje</p>
<h3 class="post-title">Mentalni modeli za PM</h3>
@ -243,11 +243,11 @@
</div>
</div>
</div>
<script src="../../main.js"></script>
</footer>
<!-- END_FOOTER -->
<!-- Povezava do glavne JS datoteke -->
<script src="../../main.js"></script>
</body>
</html>

2
si/projects/testproject/index.html
View File

@ -201,6 +201,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>

2
si/projects/testproject/index.html.bak
View File

@ -201,6 +201,6 @@
</footer>
<!-- END_FOOTER -->
<script src="../../main.js"></script>
</body>
</html>