v0.5: Mobile-Toggle-Pattern statt Bottom-Panel
Drei Probleme mit v0.4 Mobile-Layout: 1. 140px Bottom-Panel frisst vertikalen Platz auf Phone 2. User muss zur 3D-Graph scrollen, die nicht interaktiv nutzbar ist 3. Resize zwischen Mobile/Tablet/Desktop an fixen Breakpoints ist holprig Fix v0.5: Graph wird als Full-Screen-Modal über Toggle-Button gezeigt. Neues Layout-System: - Desktop >=1025px: obv default 3-panel, keine Toggles sichtbar - Compact 601-1024px: 2-panel (Tree + Content), Graph als Toggle-Modal, Toggle-Buttons für Tree UND Graph sichtbar im Header - Mobile <=600px: 1-panel (nur Content), Tree als Hamburger (auto-hide nach File-Selection), Graph als Toggle-Modal Plus Mobile-Overflow-Fix: - word-wrap + overflow-wrap auf Markdown-Content - pre/code: white-space: pre-wrap + word-break: break-word - table: display:block + overflow-x: auto - img: max-width: 100% Graph-Modal: - Full-Screen overlay mit Backdrop - Title-Bar + Close-Button (×) - Three.js re-rendered in modal-canvas (für isolierte Performance) - Click-to-Navigate vom Modal zurück in die Page - ESC-Taste schließt Modal 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
+155
-79
@@ -1,25 +1,24 @@
|
||||
/* HermesCustom CSS — Lukas' responsive-layout additions for obsidian-web-viewer.
|
||||
/* HermesCustom CSS — Lukas' responsive-layout + Mobile-Toggle-Pattern.
|
||||
*
|
||||
* Loaded via <link rel="stylesheet"> in vault.html (one-line patch)
|
||||
* BEFORE obv's main <style>, so that our rules apply at first paint
|
||||
* (no FOUC, no layout shift).
|
||||
* Loaded via <link rel="stylesheet"> in vault.html.
|
||||
* Applied at first paint (no FOUC).
|
||||
*
|
||||
* Layout classes (toggled by vault-custom.js):
|
||||
* .hermes-rc — base marker (added once)
|
||||
* .hermes-mobile — <768px viewport (tree=hamburger, graph=bottom-panel)
|
||||
* .hermes-tablet — 768-1023px (tree=visible, graph=bottom-panel)
|
||||
* .hermes-desktop — >=1024px (3-panel layout, no overrides)
|
||||
* LAYOUT PHILOSOPHY (v0.5):
|
||||
* - Desktop ≥1025px: 3-panel layout, tree visible, graph visible
|
||||
* - Tablet 600-1024px: 2-panel compact, tree visible OR graph visible
|
||||
* via "Show Graph" button toggle (starts hidden)
|
||||
* - Mobile <600px: single column, tree as hamburger, graph as FAB → modal
|
||||
*
|
||||
* Sidebar state:
|
||||
* .hermes-sidebar-open — hamburger toggled (mobile only)
|
||||
*
|
||||
* Strategy: every selector starts with `.vault-app.hermes-rc` to win
|
||||
* specificity against obv's `.vault-app` only.
|
||||
* The key UX change vs v0.4: Graph is NEVER in bottom panel on Mobile
|
||||
* (waste of vertical space). It's a toggle button → full-screen modal.
|
||||
*/
|
||||
|
||||
/* === Always-on (no media query) === */
|
||||
.vault-app.hermes-rc {
|
||||
/* === Always-on === */
|
||||
.vault-app.hermes-rc,
|
||||
.vault-app.hermes-rc * {
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.vault-app.hermes-rc {
|
||||
width: 100% !important;
|
||||
max-width: 100vw !important;
|
||||
overflow-x: hidden !important;
|
||||
@@ -31,6 +30,23 @@
|
||||
word-wrap: break-word !important;
|
||||
overflow-wrap: break-word !important;
|
||||
hyphens: auto !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
/* Critical: prevent pre/code blocks from overflowing horizontally */
|
||||
.vault-app.hermes-rc .vault-content pre,
|
||||
.vault-app.hermes-rc .vault-content code {
|
||||
white-space: pre-wrap !important;
|
||||
word-break: break-word !important;
|
||||
max-width: 100% !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
.vault-app.hermes-rc .vault-content table {
|
||||
display: block !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
.vault-app.hermes-rc .vault-content img {
|
||||
max-width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
.vault-app.hermes-rc .vault-sidebar {
|
||||
overflow-x: hidden !important;
|
||||
@@ -41,38 +57,143 @@
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Hamburger button (hidden by default, shown only in mobile) */
|
||||
.hermes-mobile-toggle {
|
||||
display: none;
|
||||
/* === HermescCustom UI Elements === */
|
||||
.hermes-ui-btn {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
margin: 0 4px;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.hermes-mobile-toggle:hover {
|
||||
.hermes-ui-btn:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
/* === Mobile (<768px) — tree hamburger + graph bottom-panel === */
|
||||
@media (max-width: 767px) {
|
||||
/* Hamburger button (hidden by default, shown when tree hidden) */
|
||||
.hermes-tree-toggle,
|
||||
.hermes-graph-toggle {
|
||||
display: none;
|
||||
}
|
||||
.hermes-tree-toggle svg,
|
||||
.hermes-graph-toggle svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Graph Modal (mobile graph fullscreen overlay) */
|
||||
.hermes-graph-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--bg-primary);
|
||||
z-index: 2000;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hermes-graph-modal.hermes-modal-open {
|
||||
display: flex;
|
||||
}
|
||||
.hermes-graph-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
height: 44px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hermes-graph-modal-title {
|
||||
color: var(--accent);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.hermes-graph-modal-close {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.hermes-graph-modal-close:hover {
|
||||
color: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.hermes-graph-modal-canvas {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hermes-graph-modal-canvas canvas {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* Sidebar backdrop (click-outside-to-close) */
|
||||
.hermes-sidebar-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 900;
|
||||
}
|
||||
.hermes-backdrop-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* === Compact Mode (≤1024px) — used for Tablet + Mobile === */
|
||||
@media (max-width: 1024px) {
|
||||
.vault-app.hermes-rc.hermes-compact {
|
||||
grid-template-columns: 220px 1fr !important;
|
||||
grid-template-rows: 48px 1fr !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-compact .vault-sidebar {
|
||||
width: 220px !important;
|
||||
max-width: 220px !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-compact .vault-graph {
|
||||
display: none !important; /* Hidden by default on compact */
|
||||
}
|
||||
/* Show tree-toggle in compact (tree is shown by default; toggle if user wants to hide) */
|
||||
.vault-app.hermes-rc.hermes-compact .hermes-tree-toggle {
|
||||
display: inline-block !important;
|
||||
}
|
||||
/* Show graph-toggle in compact */
|
||||
.vault-app.hermes-rc.hermes-compact .hermes-graph-toggle {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Mobile Mode (≤600px) — Full mobile UX === */
|
||||
@media (max-width: 600px) {
|
||||
.vault-app.hermes-rc.hermes-mobile {
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: 48px 1fr 140px !important;
|
||||
height: 100vh !important;
|
||||
grid-template-rows: 48px 1fr !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-mobile .vault-sidebar {
|
||||
position: fixed !important;
|
||||
top: 48px !important;
|
||||
left: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 280px !important;
|
||||
max-width: 85vw !important;
|
||||
width: 85vw !important;
|
||||
max-width: 320px !important;
|
||||
transform: translateX(-100%) !important;
|
||||
transition: transform 0.25s ease-in-out !important;
|
||||
z-index: 1000 !important;
|
||||
@@ -84,63 +205,18 @@
|
||||
.vault-app.hermes-rc.hermes-mobile .vault-sidebar.hermes-sidebar-open {
|
||||
transform: translateX(0) !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-mobile .vault-graph {
|
||||
grid-column: 1 / -1 !important;
|
||||
grid-row: 3 !important;
|
||||
height: 140px !important;
|
||||
border-left: none !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
display: block !important; /* keep visible, just at bottom */
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-mobile .vault-content {
|
||||
grid-column: 1 !important;
|
||||
grid-row: 2 !important;
|
||||
padding: 16px 20px !important;
|
||||
padding: 14px 16px !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-mobile .hermes-mobile-toggle {
|
||||
display: inline-block !important;
|
||||
}
|
||||
/* Backdrop for open hamburger */
|
||||
.hermes-sidebar-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-mobile .hermes-sidebar-backdrop.hermes-backdrop-visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Tablet (768px-1023px) — tree visible, graph bottom-panel === */
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.vault-app.hermes-rc.hermes-tablet {
|
||||
grid-template-columns: 200px 1fr !important;
|
||||
grid-template-rows: 48px 1fr 200px !important;
|
||||
height: 100vh !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-tablet .vault-sidebar {
|
||||
width: 200px !important;
|
||||
max-width: 200px !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-tablet .vault-graph {
|
||||
grid-column: 1 / -1 !important;
|
||||
grid-row: 3 !important;
|
||||
height: 200px !important;
|
||||
border-left: none !important;
|
||||
border-top: 1px solid var(--border) !important;
|
||||
}
|
||||
.vault-app.hermes-rc.hermes-tablet .vault-content {
|
||||
grid-column: 2 !important;
|
||||
grid-row: 2 !important;
|
||||
padding: 20px 28px !important;
|
||||
/* === Desktop (>=1025px) — default obv layout, no overrides === */
|
||||
@media (min-width: 1025px) {
|
||||
.vault-app.hermes-rc.hermes-desktop .hermes-tree-toggle,
|
||||
.vault-app.hermes-rc.hermes-desktop .hermes-graph-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Desktop (≥1024px) — leave obv default layout === */
|
||||
/* No overrides needed; we just mark .hermes-desktop class so JS knows */
|
||||
|
||||
Reference in New Issue
Block a user