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

Merge branch 'fix/lightbox-mobile-layout' into develop-kristijan

This commit is contained in:
popovskik 2026-08-27 17:00:12 +02:00
parent 9ffb7fe257 1273edcb41
commit 6c710eafb7
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/components/_lightbox.css
View File

@ -73,16 +73,33 @@
.lightbox-project:hover { background: #D9752E; transform: translateX(-50%) translateY(-1px); } .lightbox-project:hover { background: #D9752E; transform: translateX(-50%) translateY(-1px); }
.lightbox-project[hidden] { display: none; } .lightbox-project[hidden] { display: none; }
/* While the viewer is open, hide the floating "Ask MSOS" pill so it can't
overlap the caption / "Read the story" button. */
body.lightbox-open .msa-root { display: none !important; }
@media (max-width: 700px) { @media (max-width: 700px) {
.event-gallery { margin: 36px 0 8px; } .event-gallery { margin: 36px 0 8px; }
.event-gallery-title { font-size: 19px; margin: 0 0 12px; } .event-gallery-title { font-size: 19px; margin: 0 0 12px; }
.event-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } .event-gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.lightbox { padding: 12px; } /* Stack image -> "Read the story" -> caption in a centred column so the
.lightbox-img { max-width: 96vw; max-height: 80vh; } button and caption sit directly under the photo instead of pinned to the
screen bottom (where they were cramped and clashed with the pill). The
reduced image height guarantees room below even for tall/portrait photos. */
.lightbox { padding: 12px; flex-direction: column; justify-content: center; gap: 14px; }
.lightbox-img { max-width: 96vw; max-height: 62vh; }
.lightbox-prev { left: 8px; } .lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; } .lightbox-next { right: 8px; }
.lightbox-close { top: 12px; right: 12px; } .lightbox-close { top: 12px; right: 12px; }
.lightbox-caption { font-size: 12.5px; bottom: 12px; } .lightbox-project {
position: static; transform: none; left: auto; bottom: auto;
margin: 0; flex: 0 0 auto;
}
.lightbox-project:hover { transform: none; }
.lightbox-caption {
position: static; left: auto; right: auto; bottom: auto;
flex: 0 0 auto; max-width: 92vw; margin: 0 auto;
font-size: 12.5px;
}
} }

3
main.js
View File

@ -907,11 +907,14 @@ document.addEventListener('DOMContentLoaded', function() {
lb.classList.add('is-open'); lb.classList.add('is-open');
lb.setAttribute('aria-hidden', 'false'); lb.setAttribute('aria-hidden', 'false');
document.documentElement.style.overflow = 'hidden'; document.documentElement.style.overflow = 'hidden';
// hide the floating "Ask MSOS" pill so it doesn't overlap the viewer
document.body.classList.add('lightbox-open');
} }
function close() { function close() {
lb.classList.remove('is-open'); lb.classList.remove('is-open');
lb.setAttribute('aria-hidden', 'true'); lb.setAttribute('aria-hidden', 'true');
document.documentElement.style.overflow = ''; document.documentElement.style.overflow = '';
document.body.classList.remove('lightbox-open');
img.setAttribute('src', ''); img.setAttribute('src', '');
} }
function step(d) { idx = (idx + d + group.length) % group.length; render(); } function step(d) { idx = (idx + d + group.length) % group.length; render(); }