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

Refine modal arrows and counter

This commit is contained in:
Your Name 2026-01-02 02:18:56 -05:00
parent f5bf27a56e
commit 6a0dcc650d
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -247,7 +247,7 @@ function applyPostDetails(modalWrap, post) {
? `<img src="${escapeHtml(heroImageSrc)}" data-fullsrc="${escapeHtml(heroFullSrc)}" alt="" loading="lazy" data-gallery-index="0" />`
: `<div class="sw-modal-hero-fallback"><div class="sw-modal-hero-fallback-inner"><i class="${categoryIconClass(post)}"></i><span>${escapeHtml(normCatLabel(post))}</span></div></div>`;
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"></i></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right"></i></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>`

10
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:52px;
height:52px;
width:60px;
height:60px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.35);
background: rgba(0,0,0,0.55);
@ -924,7 +924,7 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
.sw-modal-gallery-indicator{
position:absolute;
top:0.75rem;
right:calc(10px + 52px + 10px);
right:calc(10px + 60px + 14px);
padding:0.2rem 0.65rem;
border-radius:999px;
background:rgba(0,0,0,0.6);
@ -950,8 +950,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
@media (max-width: 768px) {
.sw-modal-hero-arrow{
width:46px;
height:46px;
width:54px;
height:54px;
border-width:0;
background:rgba(15,23,42,0.7);
}