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

Bigger arrows and counter

This commit is contained in:
Your Name 2026-01-02 02:14:28 -05:00
parent dac6fc3555
commit 551a8ccf8c
2 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,7 +249,10 @@ function applyPostDetails(modalWrap, post) {
const arrowHtml = heroHasGallery 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>` ? `<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
? `<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}`;
bindHeroLightbox(modalWrap); bindHeroLightbox(modalWrap);
if (heroHasGallery) { if (heroHasGallery) {
initModalGallery(modalWrap, heroGallery); initModalGallery(modalWrap, heroGallery);
@ -465,6 +468,12 @@ function initModalGallery(modalWrap, gallery) {
if (!heroImg) return; if (!heroImg) return;
const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow"); const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow");
let activeIndex = 0; let activeIndex = 0;
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);
}
const setActive = (idx) => { const setActive = (idx) => {
if (!Number.isFinite(idx)) return; if (!Number.isFinite(idx)) return;
const normalized = (idx + gallery.length) % gallery.length; const normalized = (idx + gallery.length) % gallery.length;

30
src/styles/mapMarkers.css
View File

@ -898,8 +898,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
position:absolute; position:absolute;
top:50%; top:50%;
transform:translateY(-50%) scale(0.95); transform:translateY(-50%) scale(0.95);
width:44px; width:52px;
height:44px; height:52px;
border-radius:50%; border-radius:50%;
border:1px solid rgba(255,255,255,0.35); border:1px solid rgba(255,255,255,0.35);
background: rgba(0,0,0,0.55); background: rgba(0,0,0,0.55);
@ -921,6 +921,28 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
right:10px; right:10px;
} }
.sw-modal-gallery-indicator{
position:absolute;
top:0.75rem;
right:14px;
padding:0.2rem 0.65rem;
border-radius:999px;
background:rgba(0,0,0,0.6);
color:#fff;
font-size:0.78rem;
font-weight:700;
letter-spacing:0.05em;
display:flex;
align-items:center;
gap:0.2rem;
pointer-events:none;
z-index:12;
box-shadow:0 8px 18px rgba(0,0,0,0.45);
}
.sw-modal-gallery-separator{
opacity:0.7;
}
.sw-modal-hero-arrow, .sw-modal-hero-arrow,
.sw-cluster-hero-media .sw-modal-hero-arrow{ .sw-cluster-hero-media .sw-modal-hero-arrow{
box-shadow:0 2px 12px rgba(0,0,0,0.45); box-shadow:0 2px 12px rgba(0,0,0,0.45);
@ -928,8 +950,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
@media (max-width: 768px) { @media (max-width: 768px) {
.sw-modal-hero-arrow{ .sw-modal-hero-arrow{
width:40px; width:46px;
height:40px; height:46px;
border-width:0; border-width:0;
background:rgba(15,23,42,0.7); background:rgba(15,23,42,0.7);
} }