diff --git a/app/ui-tarot-lightbox.js b/app/ui-tarot-lightbox.js index 4ffbb9f..16e14f1 100644 --- a/app/ui-tarot-lightbox.js +++ b/app/ui-tarot-lightbox.js @@ -1597,14 +1597,6 @@ return; } - if (mobilePrevButtonEl.parentElement !== overlayEl) { - overlayEl.appendChild(mobilePrevButtonEl); - } - - if (mobileNextButtonEl.parentElement !== overlayEl) { - overlayEl.appendChild(mobileNextButtonEl); - } - const canNavigate = Boolean( lightboxState.isOpen && isCompactLightboxLayout() @@ -1631,7 +1623,70 @@ mobilePrevButtonEl.style.font = isCompact ? "800 26px/1 sans-serif" : "700 20px/1 sans-serif"; mobileNextButtonEl.style.font = isCompact ? "800 26px/1 sans-serif" : "700 20px/1 sans-serif"; + if (isCompact && canNavigate && toolbarEl instanceof HTMLElement) { + toolbarEl.style.display = "grid"; + toolbarEl.style.gridTemplateColumns = "60px minmax(0, auto) 60px"; + toolbarEl.style.columnGap = "12px"; + toolbarEl.style.justifyContent = "stretch"; + toolbarEl.style.justifyItems = "center"; + toolbarEl.style.alignItems = "center"; + + if (mobilePrevButtonEl.parentElement !== toolbarEl) { + toolbarEl.insertBefore(mobilePrevButtonEl, settingsButtonEl || null); + } + + if (mobileNextButtonEl.parentElement !== toolbarEl) { + toolbarEl.appendChild(mobileNextButtonEl); + } + + if (settingsButtonEl instanceof HTMLElement) { + settingsButtonEl.style.gridColumn = "2"; + settingsButtonEl.style.justifySelf = "center"; + } + + mobilePrevButtonEl.style.position = "relative"; + mobileNextButtonEl.style.position = "relative"; + mobilePrevButtonEl.style.top = "auto"; + mobileNextButtonEl.style.top = "auto"; + mobilePrevButtonEl.style.right = "auto"; + mobileNextButtonEl.style.right = "auto"; + mobilePrevButtonEl.style.left = "auto"; + mobileNextButtonEl.style.left = "auto"; + mobilePrevButtonEl.style.bottom = "auto"; + mobileNextButtonEl.style.bottom = "auto"; + mobilePrevButtonEl.style.gridColumn = "1"; + mobileNextButtonEl.style.gridColumn = "3"; + mobilePrevButtonEl.style.justifySelf = "start"; + mobileNextButtonEl.style.justifySelf = "end"; + mobilePrevButtonEl.style.alignSelf = "center"; + mobileNextButtonEl.style.alignSelf = "center"; + mobilePrevButtonEl.style.transform = "none"; + mobileNextButtonEl.style.transform = "none"; + return; + } + + if (mobilePrevButtonEl.parentElement !== overlayEl) { + overlayEl.appendChild(mobilePrevButtonEl); + } + + if (mobileNextButtonEl.parentElement !== overlayEl) { + overlayEl.appendChild(mobileNextButtonEl); + } + + if (toolbarEl instanceof HTMLElement) { + toolbarEl.style.gridTemplateColumns = ""; + toolbarEl.style.columnGap = ""; + toolbarEl.style.justifyItems = ""; + } + + if (settingsButtonEl instanceof HTMLElement) { + settingsButtonEl.style.gridColumn = ""; + settingsButtonEl.style.justifySelf = ""; + } + if (!canNavigate) { + mobilePrevButtonEl.style.position = "fixed"; + mobileNextButtonEl.style.position = "fixed"; return; } @@ -1673,6 +1728,8 @@ ? toolbarBottom : `${toolbarHeight + floatingPanelHeight + (mobileInfoPanelVisible ? infoPanelHeight + 32 : 24)}px`; + mobilePrevButtonEl.style.position = "fixed"; + mobileNextButtonEl.style.position = "fixed"; mobilePrevButtonEl.style.top = "auto"; mobileNextButtonEl.style.top = "auto"; mobilePrevButtonEl.style.bottom = isCompact ? bottomOffset : bottomOffset; @@ -2073,7 +2130,6 @@ syncDeckComparePicker(); syncComparePanels(); syncMobileInfoControls(); - syncMobileNavigationControls(); if (lightboxState.deckCompareMode) { overlayEl.style.pointerEvents = "none"; @@ -2187,6 +2243,7 @@ secondaryInfoEl.style.display = "none"; applyZoomTransform(); setOverlayOpacity(lightboxState.overlayOpacity); + syncMobileNavigationControls(); return; } @@ -2238,6 +2295,7 @@ overlayImageEl.style.display = "none"; secondaryInfoEl.style.display = "none"; applyZoomTransform(); + syncMobileNavigationControls(); return; } @@ -2333,6 +2391,7 @@ applyZoomTransform(); setOverlayOpacity(lightboxState.overlayOpacity); + syncMobileNavigationControls(); } function resetZoom() { diff --git a/index.html b/index.html index 810c51e..429e5cc 100644 --- a/index.html +++ b/index.html @@ -1331,7 +1331,7 @@ - +