goyimnose/TaroTime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix phone display with either/or detail/panel view

Browse Source
This commit is contained in:
Nose
2026-03-12 04:11:50 -07:00
parent c6b21095d9
commit 8bb73361f8
3 changed files with 56 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/styles.css
View File

@@ -591,13 +591,6 @@
}
.tarot-detail-heading {
position: relative;
padding-right: 108px;
}
.tarot-detail-heading .detail-toggle-inline {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
}
.tarot-detail-heading h2 {
margin: 0;
@@ -1284,13 +1277,6 @@
.planet-detail-heading {
position: relative;
z-index: 1;
padding-right: 108px;
}
.planet-detail-heading .detail-toggle-inline {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
}
.planet-detail-heading h2 {
margin: 0;
@@ -2170,32 +2156,21 @@
display: none;
}
.planet-layout.layout-sidebar-collapsed {
grid-template-columns: 0 minmax(0, 1fr);
}
.tarot-layout.layout-sidebar-collapsed {
grid-template-columns: 0 minmax(0, 1fr);
}
.kab-layout.layout-sidebar-collapsed {
grid-template-rows: 0 minmax(0, 1fr);
}
.planet-layout.layout-detail-collapsed {
grid-template-columns: minmax(0, 1fr) 0;
}
.planet-layout.layout-sidebar-collapsed,
.planet-layout.layout-detail-collapsed,
.tarot-layout.layout-sidebar-collapsed,
.tarot-layout.layout-detail-collapsed {
grid-template-columns: minmax(0, 1fr) 0;
grid-template-columns: minmax(0, 1fr);
}
.kab-layout.layout-sidebar-collapsed,
.kab-layout.layout-detail-collapsed {
grid-template-rows: minmax(0, 1fr) 0;
grid-template-rows: minmax(0, 1fr);
}
.layout-sidebar-collapsed > .planet-list-panel,
.layout-sidebar-collapsed > .tarot-list-panel {
display: none;
width: 0;
max-width: 0;
min-width: 0;
@@ -2206,6 +2181,7 @@
}
.layout-sidebar-collapsed > .kab-tree-panel {
display: none;
height: 0;
max-height: 0;
min-height: 0;
@@ -2218,6 +2194,7 @@
.layout-detail-collapsed > .planet-detail-panel,
.layout-detail-collapsed > .tarot-detail-panel {
display: none;
width: 0;
max-width: 0;
min-width: 0;
@@ -2229,6 +2206,7 @@
}
.layout-detail-collapsed > .kab-detail-panel {
display: none;
height: 0;
max-height: 0;
min-height: 0;
@@ -3342,7 +3320,6 @@
.alpha-text-detail-heading {
display: grid;
gap: 14px;
padding-right: 108px;
}
.alpha-text-heading-main {
@@ -3413,13 +3390,6 @@
box-sizing: border-box;
}
.alpha-text-detail-heading .detail-toggle-inline {
position: absolute;
top: 0;
right: 0;
margin-left: 0;
}
.alpha-text-control {
display: grid;
gap: 4px;
@@ -3519,13 +3489,6 @@
grid-template-columns: 1fr;
}
.planet-detail-heading .detail-toggle-inline,
.tarot-detail-heading .detail-toggle-inline,
.alpha-text-detail-heading .detail-toggle-inline {
position: static;
justify-self: start;
}
.tarot-detail-top {
grid-template-columns: minmax(0, 1fr);
}
@@ -5405,6 +5368,13 @@
.planet-layout,
.tarot-layout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
}
.planet-layout.layout-sidebar-collapsed,
.planet-layout.layout-detail-collapsed,
.tarot-layout.layout-sidebar-collapsed,
.tarot-layout.layout-detail-collapsed {
grid-template-rows: minmax(0, 1fr);
}
.kab-layout {
grid-template-rows: minmax(220px, 42svh) minmax(0, 1fr);
@@ -5415,6 +5385,17 @@
border-bottom: 1px solid #27272a;
max-height: min(42svh, 420px);
}
.layout-detail-collapsed > .planet-list-panel,
.layout-detail-collapsed > .tarot-list-panel,
.layout-detail-collapsed > .kab-tree-panel,
.layout-sidebar-collapsed > .planet-detail-panel,
.layout-sidebar-collapsed > .tarot-detail-panel,
.layout-sidebar-collapsed > .kab-detail-panel {
height: 100%;
max-height: none;
min-height: 0;
border-bottom: none;
}
.planet-list-item,
.tarot-list-item {
min-height: 48px;

83
app/ui-chrome.js
View File

@@ -1,10 +1,10 @@
(function () {
"use strict";
const SIDEBAR_COLLAPSE_STORAGE_PREFIX = "tarot-sidebar-collapsed:";
const DETAIL_COLLAPSE_STORAGE_PREFIX = "tarot-detail-collapsed:";
const DEFAULT_DATASET_ENTRY_COLLAPSED = true;
const DEFAULT_DATASET_DETAIL_COLLAPSED = false;
const SIDEBAR_COLLAPSE_STORAGE_PREFIX = "tarot-sidebar-collapsed:v2:";
const DETAIL_COLLAPSE_STORAGE_PREFIX = "tarot-detail-collapsed:v2:";
const DEFAULT_DATASET_ENTRY_COLLAPSED = false;
const DEFAULT_DATASET_DETAIL_COLLAPSED = true;
const MOBILE_TOPBAR_MEDIA_QUERY = "(max-width: 900px)";
const sidebarControllers = new WeakMap();
const detailControllers = new WeakMap();
@@ -26,8 +26,6 @@
const AUTO_COLLAPSE_IGNORE_SELECTOR = [
".sidebar-toggle-inline",
".sidebar-popout-open",
".detail-toggle-inline",
".detail-popout-open",
"input",
"select",
"textarea",
@@ -120,6 +118,17 @@
return detailChanged || sidebarChanged;
}
function showSidebarOnly(target, persist = true) {
const layout = resolveLayoutTarget(target);
if (!layout) {
return false;
}
const detailChanged = setDetailCollapsed(layout, true, persist);
const sidebarChanged = setSidebarCollapsed(layout, false, persist);
return detailChanged || sidebarChanged;
}
function shouldAutoCollapseFromEvent(panel, target) {
if (!(panel instanceof HTMLElement) || !(target instanceof Element) || !panel.contains(target)) {
return false;
@@ -252,11 +261,11 @@
});
collapseBtn.addEventListener("click", () => {
applyCollapsedState(true);
showDetailOnly(layout);
});
openBtn.addEventListener("click", () => {
applyCollapsedState(false);
showSidebarOnly(layout);
});
const storedCollapsed = loadSidebarCollapsedState(storageKey);
@@ -281,11 +290,6 @@
return;
}
const heading = detailPanel.querySelector(".planet-detail-heading, .tarot-detail-heading");
if (!(heading instanceof HTMLElement)) {
return;
}
detailPanel.dataset.detailPopoutReady = "1";
const sectionId = layout.closest("section")?.id || `layout-${index + 1}`;
@@ -295,42 +299,19 @@
const detailStorageKey = `${DETAIL_COLLAPSE_STORAGE_PREFIX}${sectionId}`;
const sidebarStorageKey = `${SIDEBAR_COLLAPSE_STORAGE_PREFIX}${sectionId}`;
const collapseBtn = document.createElement("button");
collapseBtn.type = "button";
collapseBtn.className = "detail-toggle-inline";
collapseBtn.textContent = "Hide Detail";
collapseBtn.setAttribute("aria-label", "Hide detail panel");
collapseBtn.setAttribute("aria-controls", panelId);
heading.appendChild(collapseBtn);
const openBtn = document.createElement("button");
openBtn.type = "button";
openBtn.className = "detail-popout-open";
openBtn.textContent = "Show Detail";
openBtn.setAttribute("aria-label", "Show detail panel");
openBtn.setAttribute("aria-controls", panelId);
openBtn.hidden = true;
layout.appendChild(openBtn);
const applyCollapsedState = (collapsed, persist = true) => {
if (collapsed && layout.classList.contains("layout-sidebar-collapsed")) {
layout.classList.remove("layout-sidebar-collapsed");
const sidebarOpenBtn = layout.querySelector(".sidebar-popout-open");
if (sidebarOpenBtn instanceof HTMLButtonElement) {
sidebarOpenBtn.hidden = true;
sidebarOpenBtn.setAttribute("aria-expanded", "true");
const sidebarController = sidebarControllers.get(layout);
if (sidebarController) {
sidebarController.applyCollapsedState(false, persist);
} else {
layout.classList.remove("layout-sidebar-collapsed");
saveSidebarCollapsedState(sidebarStorageKey, false);
}
const sidebarCollapseBtn = layout.querySelector(".sidebar-toggle-inline");
if (sidebarCollapseBtn instanceof HTMLButtonElement) {
sidebarCollapseBtn.setAttribute("aria-expanded", "true");
}
saveSidebarCollapsedState(sidebarStorageKey, false);
}
layout.classList.toggle("layout-detail-collapsed", collapsed);
collapseBtn.setAttribute("aria-expanded", collapsed ? "false" : "true");
openBtn.setAttribute("aria-expanded", collapsed ? "false" : "true");
openBtn.hidden = !collapsed;
detailPanel.setAttribute("aria-hidden", collapsed ? "true" : "false");
if (persist) {
saveSidebarCollapsedState(detailStorageKey, collapsed);
@@ -340,24 +321,11 @@
detailControllers.set(layout, {
applyCollapsedState,
detailPanel,
collapseBtn,
openBtn,
detailStorageKey
});
collapseBtn.addEventListener("click", () => {
applyCollapsedState(true);
});
openBtn.addEventListener("click", () => {
applyCollapsedState(false);
});
const storedCollapsed = loadSidebarCollapsedState(detailStorageKey);
const shouldForceOpenForTarot = sectionId === "tarot-section";
const initialCollapsed = shouldForceOpenForTarot
? false
: (storedCollapsed == null ? DEFAULT_DATASET_DETAIL_COLLAPSED : storedCollapsed);
const initialCollapsed = storedCollapsed == null ? DEFAULT_DATASET_DETAIL_COLLAPSED : storedCollapsed;
applyCollapsedState(initialCollapsed, false);
});
}
@@ -565,6 +533,7 @@
setSidebarCollapsed,
setDetailCollapsed,
showDetailOnly,
showSidebarOnly,
setTopbarMenuOpen,
setTopbarDropdownOpen,
closeTopbarDropdowns,