canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify modal arrows

This commit is contained in:
Your Name 2026-01-02 02:12:26 -05:00
parent 6cb6a1e66f
commit dac6fc3555
2 changed files with 6 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Map/markerManager.js
View File

@ -249,10 +249,7 @@ function applyPostDetails(modalWrap, post) {
const arrowHtml = heroHasGallery
? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left" /></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right" /></button>`
: "";
const indicatorHtml = heroHasGallery
? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
: "";
target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
target.innerHTML = `${heroImageHtml}${arrowHtml}`;
bindHeroLightbox(modalWrap);
if (heroHasGallery) {
initModalGallery(modalWrap, heroGallery);
@ -467,12 +464,6 @@ function initModalGallery(modalWrap, gallery) {
const heroImg = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img");
if (!heroImg) return;
const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow");
const indicator = modalWrap.querySelector(".sw-modal-gallery-indicator");
const currentIndicator = indicator?.querySelector(".sw-modal-gallery-current");
const totalIndicator = indicator?.querySelector(".sw-modal-gallery-total");
if (totalIndicator) {
totalIndicator.textContent = String(gallery.length);
}
let activeIndex = 0;
const setActive = (idx) => {
if (!Number.isFinite(idx)) return;

53
src/styles/mapMarkers.css
View File

@ -898,8 +898,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
position:absolute;
top:50%;
transform:translateY(-50%) scale(0.95);
width:36px;
height:36px;
width:44px;
height:44px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.35);
background: rgba(0,0,0,0.55);
@ -920,46 +920,6 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
.sw-modal-hero-arrow.right{
right:10px;
}
.sw-modal-gallery-indicator{
position:absolute;
bottom:0.75rem;
left:50%;
transform:translateX(-50%);
background:rgba(15,23,42,0.8);
color:#f0f9ff;
border-radius:999px;
padding:.25rem .75rem;
font-size:.75rem;
font-weight:700;
letter-spacing:.05em;
display:flex;
align-items:center;
gap:.35rem;
z-index:12;
pointer-events:none;
box-shadow:0 10px 25px rgba(2,6,23,0.6);
}
.sw-modal-gallery-indicator{
position:absolute;
top:0.75rem;
right:-6px;
bottom:auto;
left:auto;
transform:none;
padding:0.1rem 0.5rem;
border-radius:999px;
background:rgba(2,6,23,0.65);
box-shadow:0 8px 16px rgba(0,0,0,0.35);
}
.sw-modal-gallery-indicator span{
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.sw-modal-gallery-separator{
opacity:.6;
}
.sw-modal-hero-arrow,
.sw-cluster-hero-media .sw-modal-hero-arrow{
@ -968,16 +928,11 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
@media (max-width: 768px) {
.sw-modal-hero-arrow{
width:32px;
height:32px;
width:40px;
height:40px;
border-width:0;
background:rgba(15,23,42,0.7);
}
.sw-modal-gallery-indicator{
font-size:.68rem;
bottom:.5rem;
padding:.2rem .6rem;
}
}
.sw-modal-hero-fallback{