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 @@
-
+