Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign help modal with enhanced hero section, improved navigation styling, and card-based layout

Browse Source 
- 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
This commit is contained in:
Bruno Charest 2026-03-31 13:15:25 -04:00
parent 7dc7e9932b
commit 4c4b8be215
3 changed files with 100 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app.js
View File

@ -3615,9 +3615,10 @@
function initHelpNavigation() { function initHelpNavigation() {
const helpContent = document.querySelector(".help-content"); const helpContent = document.querySelector(".help-content");
const helpBody = document.getElementById("help-body");
const navLinks = document.querySelectorAll(".help-nav-link"); const navLinks = document.querySelectorAll(".help-nav-link");
if (!helpContent || !navLinks.length) return; if (!helpContent || !helpBody || !navLinks.length) return;
// Handle nav link clicks // Handle nav link clicks
navLinks.forEach((link) => { navLinks.forEach((link) => {
@ -3647,7 +3648,7 @@
}); });
}, },
{ {
root: helpContent, root: helpBody,
rootMargin: "-20% 0px -70% 0px", rootMargin: "-20% 0px -70% 0px",
threshold: 0, threshold: 0,
}, },

53
frontend/index.html
View File

@ -640,27 +640,44 @@
<nav class="help-nav" id="help-nav"> <nav class="help-nav" id="help-nav">
<div class="help-nav-title">Sommaire</div> <div class="help-nav-title">Sommaire</div>
<ul class="help-nav-list"> <ul class="help-nav-list">
<li><a href="#help-intro" class="help-nav-link">Introduction</a></li> <li><a href="#help-intro" class="help-nav-link">📘 Introduction</a></li>
<li><a href="#help-interface" class="help-nav-link">Interface</a></li> <li><a href="#help-interface" class="help-nav-link">🧭 Interface</a></li>
<li><a href="#help-navigation" class="help-nav-link">Navigation</a></li> <li><a href="#help-navigation" class="help-nav-link">🗺️ Navigation</a></li>
<li><a href="#help-recherche" class="help-nav-link">Recherche</a></li> <li><a href="#help-recherche" class="help-nav-link">🔍 Recherche</a></li>
<li><a href="#help-tags" class="help-nav-link">Tags</a></li> <li><a href="#help-tags" class="help-nav-link">🏷️ Tags</a></li>
<li><a href="#help-fichiers" class="help-nav-link">Fichiers</a></li> <li><a href="#help-fichiers" class="help-nav-link">📁 Fichiers</a></li>
<li><a href="#help-personnalisation" class="help-nav-link">Personnalisation</a></li> <li><a href="#help-personnalisation" class="help-nav-link">🎨 Personnalisation</a></li>
<li><a href="#help-raccourcis" class="help-nav-link">Raccourcis</a></li> <li><a href="#help-raccourcis" class="help-nav-link">⌨️ Raccourcis</a></li>
<li><a href="#help-astuces" class="help-nav-link">Astuces</a></li> <li><a href="#help-astuces" class="help-nav-link">💡 Astuces</a></li>
</ul> </ul>
</nav> </nav>
<div class="help-content"> <div class="help-content">
<section class="help-section" id="help-intro"> <section class="help-section help-hero" id="help-intro">
<h1>📘 Bienvenue dans ObsiGate</h1> <div class="help-hero-copy">
<p class="help-lead">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.</p> <div class="help-kicker">Guide officiel</div>
<div class="help-badges"> <h1>📘 Bienvenue dans ObsiGate</h1>
<span class="help-badge">⚡ Navigation rapide</span> <p class="help-lead">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.</p>
<span class="help-badge">🗂️ Multi-vault</span> <div class="help-badges">
<span class="help-badge">🏷️ Tags intelligents</span> <span class="help-badge">⚡ Navigation rapide</span>
<span class="help-badge">📝 Lecture et édition</span> <span class="help-badge">🗂️ Multi-vault</span>
<span class="help-badge">🔍 Recherche TF-IDF</span> <span class="help-badge">🏷️ Tags intelligents</span>
<span class="help-badge">📝 Lecture et édition</span>
<span class="help-badge">🔍 Recherche TF-IDF</span>
</div>
</div>
<div class="help-hero-visual" aria-hidden="true">
<div class="help-stat-card">
<span class="help-stat-label">Expérience</span>
<strong>Simple</strong>
</div>
<div class="help-stat-card">
<span class="help-stat-label">Recherche</span>
<strong>Instantanée</strong>
</div>
<div class="help-stat-card">
<span class="help-stat-label">Accès</span>
<strong>Multi-vault</strong>
</div>
</div> </div>
</section> </section>

94
frontend/style.css
View File

@ -1978,7 +1978,7 @@ select {
display: flex; display: flex;
} }
.help-container { .help-container {
max-width: 960px; max-width: 1320px;
} }
.editor-container { .editor-container {
background: var(--bg-secondary); 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); background: radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 10%, transparent), transparent 30%), var(--bg-primary);
display: flex; display: flex;
gap: 0; gap: 0;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
} }
/* Help Navigation Menu */ /* Help Navigation Menu */
.help-nav { .help-nav {
width: 220px; width: 260px;
min-width: 220px; min-width: 260px;
background: var(--bg-secondary); background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-primary));
border-right: 1px solid var(--border); border-right: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
padding: 20px 0; padding: 24px 0;
overflow-y: auto; overflow: visible;
position: sticky; position: sticky;
top: 0; top: 0;
height: calc(90vh - 60px); align-self: flex-start;
max-height: none;
flex-shrink: 0; flex-shrink: 0;
backdrop-filter: blur(12px);
} }
.help-nav-title { .help-nav-title {
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
@ -2079,52 +2084,56 @@ select {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: var(--text-muted); color: var(--text-muted);
padding: 0 20px 12px; padding: 0 22px 14px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
margin-bottom: 8px; margin-bottom: 12px;
} }
.help-nav-list { .help-nav-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0 12px;
} }
.help-nav-list li { .help-nav-list li {
margin: 0; margin: 0 0 6px;
} }
.help-nav-link { .help-nav-link {
display: block; display: block;
padding: 8px 20px; padding: 10px 12px;
font-size: 0.85rem; font-size: 0.88rem;
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
transition: all 150ms ease; transition: all 150ms ease;
border-left: 3px solid transparent; border: 1px solid transparent;
border-radius: 12px;
} }
.help-nav-link:hover { .help-nav-link:hover {
color: var(--accent); 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; text-decoration: none;
transform: translateX(2px);
} }
.help-nav-link.active { .help-nav-link.active {
color: var(--accent); color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
border-left-color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent);
font-weight: 600; font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
} }
.help-content { .help-content {
flex: 1; flex: 1;
max-width: 920px; max-width: 980px;
margin: 0 auto; margin: 0 auto;
padding: 28px 32px 40px; padding: 32px 40px 56px;
overflow-y: auto; overflow: visible;
min-width: 0; min-width: 0;
} }
.help-lead { .help-lead {
font-size: 1.05rem; font-size: 1.08rem;
line-height: 1.6; line-height: 1.75;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 16px; margin-bottom: 18px;
} }
.help-footer { .help-footer {
margin-top: 48px; margin-top: 48px;
@ -2148,25 +2157,27 @@ select {
color: var(--text-primary); color: var(--text-primary);
} }
.help-content h1 { .help-content h1 {
font-size: 1.6rem; font-size: 2rem;
margin-bottom: 16px; margin-bottom: 16px;
letter-spacing: -0.02em;
} }
.help-content h2 { .help-content h2 {
font-size: 1.05rem; font-size: 1.18rem;
margin: 24px 0 10px; margin: 0 0 14px;
} }
.help-content h3 { .help-content h3 {
font-size: 0.9rem; font-size: 0.95rem;
margin: 16px 0 6px; margin: 20px 0 8px;
color: var(--text-secondary); color: var(--text-secondary);
} }
.help-content p { .help-content p {
margin: 0 0 12px; margin: 0 0 14px;
color: var(--text-secondary); color: var(--text-secondary);
line-height: 1.7;
} }
.help-content ul, .help-content ul,
.help-content ol { .help-content ol {
margin: 8px 0 16px; margin: 10px 0 18px;
padding-left: 24px; padding-left: 24px;
color: var(--text-secondary); color: var(--text-secondary);
} }
@ -2189,6 +2200,25 @@ select {
font-weight: 600; 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 { .help-hero {
display: grid; display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);