diff --git a/app/styles.css b/app/styles.css index d5df602..84dca07 100644 --- a/app/styles.css +++ b/app/styles.css @@ -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; diff --git a/app/ui-chrome.js b/app/ui-chrome.js index 991f865..25b6376 100644 --- a/app/ui-chrome.js +++ b/app/ui-chrome.js @@ -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, diff --git a/index.html b/index.html index af0ac37..3dbe91a 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - +