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

83
app/ui-chrome.js
View File

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

4
index.html
View File

@@ -16,7 +16,7 @@
<link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-400.css"> <link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-400.css">
<link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-700.css"> <link rel="stylesheet" href="node_modules/@fontsource/amiri/arabic-700.css">
<link rel="stylesheet" href="node_modules/@fontsource/noto-naskh-arabic/arabic-400.css"> <link rel="stylesheet" href="node_modules/@fontsource/noto-naskh-arabic/arabic-400.css">
<link rel="stylesheet" href="app/styles.css?v=20260312-mobile-nav-01"> <link rel="stylesheet" href="app/styles.css?v=20260312-panel-toggle-03">
</head> </head>
<body> <body>
<div class="topbar"> <div class="topbar">
@@ -1014,7 +1014,7 @@
<script src="app/ui-numbers.js"></script> <script src="app/ui-numbers.js"></script>
<script src="app/ui-tarot-spread.js"></script> <script src="app/ui-tarot-spread.js"></script>
<script src="app/ui-settings.js?v=20260309-gate"></script> <script src="app/ui-settings.js?v=20260309-gate"></script>
<script src="app/ui-chrome.js?v=20260312-mobile-nav-01"></script> <script src="app/ui-chrome.js?v=20260312-panel-toggle-02"></script>
<script src="app/ui-navigation.js?v=20260309-alphabet-text-01"></script> <script src="app/ui-navigation.js?v=20260309-alphabet-text-01"></script>
<script src="app/ui-calendar-formatting.js?v=20260307b"></script> <script src="app/ui-calendar-formatting.js?v=20260307b"></script>
<script src="app/ui-calendar-visuals.js?v=20260307b"></script> <script src="app/ui-calendar-visuals.js?v=20260307b"></script>