From 4c4b8be215bb9c6671bdf1cf204886a8fb44090b Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Tue, 31 Mar 2026 13:15:25 -0400 Subject: [PATCH] feat: redesign help modal with enhanced hero section, improved navigation styling, and card-based layout - Increase help container max-width from 960px to 1320px for wider layout - Add overflow-y auto and scroll-behavior smooth to help-body - Redesign help navigation with wider sidebar (260px), softer background colors, and rounded pill-style links - Add emoji icons to all navigation menu items for better visual hierarchy - Transform navigation links with rounded borders, gradient backgrounds on --- frontend/app.js | 5 ++- frontend/index.html | 53 ++++++++++++++++--------- frontend/style.css | 94 ++++++++++++++++++++++++++++++--------------- 3 files changed, 100 insertions(+), 52 deletions(-) diff --git a/frontend/app.js b/frontend/app.js index 93109af..40f5d8d 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -3615,9 +3615,10 @@ function initHelpNavigation() { const helpContent = document.querySelector(".help-content"); + const helpBody = document.getElementById("help-body"); const navLinks = document.querySelectorAll(".help-nav-link"); - if (!helpContent || !navLinks.length) return; + if (!helpContent || !helpBody || !navLinks.length) return; // Handle nav link clicks navLinks.forEach((link) => { @@ -3647,7 +3648,7 @@ }); }, { - root: helpContent, + root: helpBody, rootMargin: "-20% 0px -70% 0px", threshold: 0, }, diff --git a/frontend/index.html b/frontend/index.html index ff63737..a0d935f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -640,27 +640,44 @@
-
-

📘 Bienvenue dans ObsiGate

-

ObsiGate est votre porte d'entrée web vers vos vaults Obsidian. Accédez, naviguez et recherchez dans toutes vos notes depuis n'importe quel appareil via une interface moderne et responsive.

-
- ⚡ Navigation rapide - 🗂️ Multi-vault - 🏷️ Tags intelligents - 📝 Lecture et édition - 🔍 Recherche TF-IDF +
+
+
Guide officiel
+

📘 Bienvenue dans ObsiGate

+

ObsiGate est votre porte d'entrée web vers vos vaults Obsidian. Accédez, naviguez et recherchez dans toutes vos notes depuis n'importe quel appareil via une interface moderne et responsive.

+
+ ⚡ Navigation rapide + 🗂️ Multi-vault + 🏷️ Tags intelligents + 📝 Lecture et édition + 🔍 Recherche TF-IDF +
+
+
diff --git a/frontend/style.css b/frontend/style.css index ded2b8e..000dfa8 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -1978,7 +1978,7 @@ select { display: flex; } .help-container { - max-width: 960px; + max-width: 1320px; } .editor-container { background: var(--bg-secondary); @@ -2057,20 +2057,25 @@ select { background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%), var(--bg-primary); display: flex; gap: 0; + overflow-y: auto; + overflow-x: hidden; + scroll-behavior: smooth; } /* Help Navigation Menu */ .help-nav { - width: 220px; - min-width: 220px; - background: var(--bg-secondary); - border-right: 1px solid var(--border); - padding: 20px 0; - overflow-y: auto; + width: 260px; + min-width: 260px; + background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-primary)); + border-right: 1px solid color-mix(in srgb, var(--border) 85%, transparent); + padding: 24px 0; + overflow: visible; position: sticky; top: 0; - height: calc(90vh - 60px); + align-self: flex-start; + max-height: none; flex-shrink: 0; + backdrop-filter: blur(12px); } .help-nav-title { font-family: "JetBrains Mono", monospace; @@ -2079,52 +2084,56 @@ select { text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); - padding: 0 20px 12px; - border-bottom: 1px solid var(--border); - margin-bottom: 8px; + padding: 0 22px 14px; + border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent); + margin-bottom: 12px; } .help-nav-list { list-style: none; margin: 0; - padding: 0; + padding: 0 12px; } .help-nav-list li { - margin: 0; + margin: 0 0 6px; } .help-nav-link { display: block; - padding: 8px 20px; - font-size: 0.85rem; + padding: 10px 12px; + font-size: 0.88rem; color: var(--text-secondary); text-decoration: none; transition: all 150ms ease; - border-left: 3px solid transparent; + border: 1px solid transparent; + border-radius: 12px; } .help-nav-link:hover { color: var(--accent); - background: var(--bg-hover); + background: color-mix(in srgb, var(--bg-hover) 80%, transparent); + border-color: color-mix(in srgb, var(--accent) 16%, transparent); text-decoration: none; + transform: translateX(2px); } .help-nav-link.active { color: var(--accent); - background: color-mix(in srgb, var(--accent) 10%, transparent); - border-left-color: var(--accent); + background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 7%, transparent)); + border-color: color-mix(in srgb, var(--accent) 22%, transparent); font-weight: 600; + box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); } .help-content { flex: 1; - max-width: 920px; + max-width: 980px; margin: 0 auto; - padding: 28px 32px 40px; - overflow-y: auto; + padding: 32px 40px 56px; + overflow: visible; min-width: 0; } .help-lead { - font-size: 1.05rem; - line-height: 1.6; + font-size: 1.08rem; + line-height: 1.75; color: var(--text-primary); - margin-bottom: 16px; + margin-bottom: 18px; } .help-footer { margin-top: 48px; @@ -2148,25 +2157,27 @@ select { color: var(--text-primary); } .help-content h1 { - font-size: 1.6rem; + font-size: 2rem; margin-bottom: 16px; + letter-spacing: -0.02em; } .help-content h2 { - font-size: 1.05rem; - margin: 24px 0 10px; + font-size: 1.18rem; + margin: 0 0 14px; } .help-content h3 { - font-size: 0.9rem; - margin: 16px 0 6px; + font-size: 0.95rem; + margin: 20px 0 8px; color: var(--text-secondary); } .help-content p { - margin: 0 0 12px; + margin: 0 0 14px; color: var(--text-secondary); + line-height: 1.7; } .help-content ul, .help-content ol { - margin: 8px 0 16px; + margin: 10px 0 18px; padding-left: 24px; color: var(--text-secondary); } @@ -2189,6 +2200,25 @@ select { font-weight: 600; } +.help-section { + position: relative; + margin-bottom: 22px; + padding: 24px 26px; + border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); + border-radius: 18px; + background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-primary)), color-mix(in srgb, var(--bg-secondary) 86%, var(--bg-primary))); + box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); +} + +.help-section::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 35%); +} + .help-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);