Tighten marker modal controls

src/components/Map/markerManager.js

@@ -249,32 +249,10 @@ 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>`
       : "";
-    target.innerHTML = `${heroImageHtml}${arrowHtml}`;
+    const indicatorHtml = heroHasGallery
-    let galleryRow = modalWrap.querySelector(".sw-modal-gallery-row");
+      ? `<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>`
-    if (heroHasGallery) {
+      : "";
-      if (!galleryRow) {
+    target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
-        galleryRow = document.createElement("div");
-        galleryRow.className = "sw-modal-gallery-row";
-        const heroRow = target.closest(".sw-modal-hero-row");
-        const parent = heroRow?.parentNode || target.parentNode || modalWrap;
-        if (parent) {
-          parent.insertBefore(galleryRow, heroRow ? heroRow.nextSibling : target.nextSibling || null);
-        } else {
-          modalWrap.appendChild(galleryRow);
-        }
-      }
-      galleryRow.innerHTML = heroGallery
-        .map(
-          (url, idx) =>
-            `<button type="button" class="sw-modal-gallery-thumb${idx === 0 ? " active" : ""}" data-index="${idx}"><img src="${escapeHtml(
-              url
-            )}" alt="" loading="lazy" /></button>`
-        )
-        .join("");
-    } else if (galleryRow) {
-      galleryRow.remove();
-      galleryRow = null;
-    }
     bindHeroLightbox(modalWrap);
     if (heroHasGallery) {
       initModalGallery(modalWrap, heroGallery);
@@ -472,14 +450,15 @@ function bindHeroLightbox(modalWrap) {
   if (!modalWrap) return;
   const img = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img");
   if (!img || img.dataset.zoomBound === "1") return;
-  const fullSrc = (img.getAttribute("data-fullsrc") || img.getAttribute("src") || "").trim();
-  if (!fullSrc) return;
   img.dataset.zoomBound = "1";
   img.style.cursor = "zoom-in";
   img.addEventListener("click", (e) => {
     e.preventDefault();
     e.stopPropagation();
-    openImageLightbox(fullSrc);
+    const src = (img.getAttribute("data-fullsrc") || img.getAttribute("src") || "").trim();
+    if (src) {
+      openImageLightbox(src);
+    }
   });
 }
 
@@ -487,9 +466,14 @@ function initModalGallery(modalWrap, gallery) {
   if (!modalWrap || !Array.isArray(gallery) || gallery.length === 0) return;
   const heroImg = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img");
   if (!heroImg) return;
-  let activeIndex = 0;
-  const thumbButtons = modalWrap.querySelectorAll(".sw-modal-gallery-thumb");
   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;
     const normalized = (idx + gallery.length) % gallery.length;
@@ -497,10 +481,9 @@ function initModalGallery(modalWrap, gallery) {
     heroImg.src = gallery[normalized];
     heroImg.dataset.fullsrc = gallery[normalized];
     heroImg.dataset.galleryIndex = String(normalized);
-    thumbButtons.forEach((btn) => {
+    if (currentIndicator) {
-      const btnIndex = Number(btn.dataset.index);
+      currentIndicator.textContent = String(normalized + 1);
-      btn.classList.toggle("active", btnIndex === normalized);
+    }
-    });
   };
   arrows.forEach((btn) => {
     btn.addEventListener("click", (event) => {
@@ -510,14 +493,6 @@ function initModalGallery(modalWrap, gallery) {
       setActive(nextIndex);
     });
   });
-  thumbButtons.forEach((btn) => {
-    btn.addEventListener("click", (event) => {
-      event.stopPropagation();
-      const idx = Number(btn.dataset.index);
-      if (Number.isNaN(idx)) return;
-      setActive(idx);
-    });
-  });
   setActive(0);
   let touchStartX = 0;
   const touchThreshold = 30;

src/styles/mapMarkers.css

@@ -878,6 +878,11 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
   pointer-events:none;
 }
 
+.sw-modal-hero,
+.sw-cluster-hero-media{
+  position:relative;
+  overflow:hidden;
+}
 .sw-modal-hero img{
   width:100%;
   height:100%;
@@ -915,34 +920,61 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
 .sw-modal-hero-arrow.right{
   right:10px;
 }
-.sw-modal-gallery-row{
+.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;
-  gap:0.35rem;
+  align-items:center;
-  overflow-x:auto;
+  gap:.35rem;
-  padding-top:0.5rem;
+  z-index:12;
-  margin-top:0.5rem;
+  pointer-events:none;
+  box-shadow:0 10px 25px rgba(2,6,23,0.6);
 }
-.sw-modal-gallery-thumb{
+.sw-modal-gallery-indicator{
-  border-radius:12px;
+  position:absolute;
-  border:1px solid transparent;
+  top:0.75rem;
-  width:48px;
+  right:0.25rem;
-  height:48px;
+  bottom:auto;
-  flex:0 0 auto;
+  left:auto;
-  overflow:hidden;
+  transform:none;
-  padding:0;
+  padding-right:0.3rem;
+}
+.sw-modal-gallery-indicator span{
   display:inline-flex;
   align-items:center;
   justify-content:center;
-  background:rgba(15,23,42,0.65);
+  line-height:1;
 }
-.sw-modal-gallery-thumb.active{
+.sw-modal-gallery-separator{
-  border-color:rgba(56,189,248,0.95);
+  opacity:.6;
+}
+
+.sw-modal-hero-arrow,
+.sw-cluster-hero-media .sw-modal-hero-arrow{
+  box-shadow:0 2px 12px rgba(0,0,0,0.45);
+}
+
+@media (max-width: 768px) {
+  .sw-modal-hero-arrow{
+    width:32px;
+    height:32px;
+    border-width:0;
+    background:rgba(15,23,42,0.7);
+  }
+  .sw-modal-gallery-indicator{
+    font-size:.68rem;
+    bottom:.5rem;
+    padding:.2rem .6rem;
   }
-.sw-modal-gallery-thumb img{
-  width:100%;
-  height:100%;
-  object-fit:cover;
-  display:block;
 }
 
 .sw-modal-hero-fallback{