update mobile ui

This commit is contained in:
2026-06-08 17:40:59 -07:00
parent 7d8874ef72
commit bf608ac730
+25 -6
View File
@@ -1612,6 +1612,7 @@
&& !lightboxState.deckComparePickerOpen
&& hasSequenceNavigation()
);
const isCompact = isCompactLightboxLayout();
const previousLabel = lightboxState.compareMode
? "Previous overlay card"
: (lightboxState.deckCompareMode ? "Previous compared card" : "Previous card");
@@ -1623,6 +1624,12 @@
mobileNextButtonEl.style.display = canNavigate ? "inline-flex" : "none";
mobilePrevButtonEl.setAttribute("aria-label", previousLabel);
mobileNextButtonEl.setAttribute("aria-label", nextLabel);
mobilePrevButtonEl.style.width = isCompact ? "56px" : "44px";
mobileNextButtonEl.style.width = isCompact ? "56px" : "44px";
mobilePrevButtonEl.style.height = isCompact ? "56px" : "44px";
mobileNextButtonEl.style.height = isCompact ? "56px" : "44px";
mobilePrevButtonEl.style.font = isCompact ? "800 24px/1 sans-serif" : "700 20px/1 sans-serif";
mobileNextButtonEl.style.font = isCompact ? "800 24px/1 sans-serif" : "700 20px/1 sans-serif";
if (!canNavigate) {
return;
@@ -1659,12 +1666,23 @@
helpPanelVisible && helpPanelEl instanceof HTMLElement ? helpPanelEl.offsetHeight + 12 : 0,
deckPickerVisible && deckComparePanelEl instanceof HTMLElement ? deckComparePanelEl.offsetHeight + 12 : 0
);
const bottomOffset = toolbarHeight + floatingPanelHeight + (mobileInfoPanelVisible ? infoPanelHeight + 32 : 24);
const buttonBottomOffset = Math.max(
16,
mobileInfoPanelVisible ? infoPanelHeight + 16 : 16,
floatingPanelHeight ? floatingPanelHeight + 12 : 16
);
const bottomOffset = isCompact
? buttonBottomOffset
: toolbarHeight + floatingPanelHeight + (mobileInfoPanelVisible ? infoPanelHeight + 32 : 24);
mobilePrevButtonEl.style.top = "auto";
mobileNextButtonEl.style.top = "auto";
mobilePrevButtonEl.style.bottom = `${bottomOffset}px`;
mobileNextButtonEl.style.bottom = `${bottomOffset}px`;
mobilePrevButtonEl.style.bottom = isCompact
? `calc(${bottomOffset}px + env(safe-area-inset-bottom, 0px))`
: `${bottomOffset}px`;
mobileNextButtonEl.style.bottom = isCompact
? `calc(${bottomOffset}px + env(safe-area-inset-bottom, 0px))`
: `${bottomOffset}px`;
mobilePrevButtonEl.style.transform = "none";
mobileNextButtonEl.style.transform = "none";
}
@@ -3161,16 +3179,17 @@
buttonEl.style.display = "none";
buttonEl.style.alignItems = "center";
buttonEl.style.justifyContent = "center";
buttonEl.style.width = "44px";
buttonEl.style.height = "44px";
buttonEl.style.width = "56px";
buttonEl.style.height = "56px";
buttonEl.style.border = "1px solid rgba(255, 255, 255, 0.2)";
buttonEl.style.borderRadius = "999px";
buttonEl.style.background = "rgba(15, 23, 42, 0.84)";
buttonEl.style.color = "#f8fafc";
buttonEl.style.font = "700 20px/1 sans-serif";
buttonEl.style.font = "800 24px/1 sans-serif";
buttonEl.style.cursor = "pointer";
buttonEl.style.backdropFilter = "blur(12px)";
buttonEl.style.transform = "none";
buttonEl.style.touchAction = "manipulation";
buttonEl.style.pointerEvents = "auto";
buttonEl.style.zIndex = "6";
return buttonEl;