feat(mobile): editeur mobile natif - interface tactile optimisee (#69)
CI / lint (push) Successful in 1m3s
CI / security (push) Successful in 46s
CI / test (push) Successful in 2m43s
CI / build (push) Successful in 38s
CI / e2e (push) Successful in 11m12s
Desktop Build / build-windows (push) Canceled after 0s
Desktop Build / build-linux (push) Canceled after 0s
CI / lint (push) Successful in 1m3s
CI / security (push) Successful in 46s
CI / test (push) Successful in 2m43s
CI / build (push) Successful in 38s
CI / e2e (push) Successful in 11m12s
Desktop Build / build-windows (push) Canceled after 0s
Desktop Build / build-linux (push) Canceled after 0s
Barre d'outils Markdown flottante (gras/italique/code/liste/lien) sur la selection CodeMirror, bouton Coller persistant (contournement iOS), zoom par pincement + hauteur ajustable persistes, raccourcis swipe (gauche -> liens entrants, droite -> table des matieres), mode lecture plein ecran avec navigation entre fichiers du dossier. 22 tests JSDOM + spec E2E mobile. Docs: fiche feature, CHANGELOG, ROADMAP, guide i18n FR/EN, README.
This commit is contained in:
@@ -9346,3 +9346,261 @@ body.popup-mode .content-area {
|
||||
.ai-fab[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* ══════════════════════════════════════════
|
||||
Mobile editor UX (ROADMAP #69)
|
||||
Floating Markdown toolbar, paste helper,
|
||||
pinch-zoom, adjustable height, swipe
|
||||
shortcuts and distraction-free reading mode.
|
||||
══════════════════════════════════════════ */
|
||||
|
||||
/* ── Floating formatting toolbar (inside editor modal) ── */
|
||||
.me-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.me-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 120ms ease, transform 120ms ease;
|
||||
}
|
||||
.me-btn:active {
|
||||
transform: scale(0.94);
|
||||
background: var(--bg-hover, rgba(128, 128, 128, 0.18));
|
||||
}
|
||||
.me-btn-format {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.me-btn-paste {
|
||||
margin-left: auto;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.me-sep {
|
||||
width: 1px;
|
||||
height: 26px;
|
||||
background: var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.editor-modal.active .me-toolbar {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 30;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
|
||||
background: var(--bg-primary);
|
||||
border-top: 1px solid var(--border);
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Adjustable editor height handle ── */
|
||||
.me-resize-handle {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.me-resize-handle {
|
||||
display: block;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border);
|
||||
cursor: ns-resize;
|
||||
touch-action: none;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.me-resize-handle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--border);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Reading mode enter / exit buttons ── */
|
||||
.me-reading-btn,
|
||||
.me-reading-exit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.me-reading-btn {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
bottom: calc(80px + env(safe-area-inset-bottom, 0));
|
||||
z-index: 890;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
body.reading-mode .me-reading-btn {
|
||||
display: none;
|
||||
}
|
||||
body.reading-mode .me-reading-exit {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: calc(12px + env(safe-area-inset-top, 0));
|
||||
right: 12px;
|
||||
z-index: 1100;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 50%;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Distraction-free reading mode ── */
|
||||
body.reading-mode .header,
|
||||
body.reading-mode .sidebar,
|
||||
body.reading-mode .sidebar-overlay,
|
||||
body.reading-mode .right-sidebar,
|
||||
body.reading-mode .right-sidebar-resize-handle,
|
||||
body.reading-mode .mobile-toolbar,
|
||||
body.reading-mode .vault-context-bar,
|
||||
body.reading-mode .tab-bar {
|
||||
display: none !important;
|
||||
}
|
||||
body.reading-mode .content-area {
|
||||
max-width: 820px;
|
||||
margin: 0 auto;
|
||||
padding: clamp(20px, 6vw, 48px) clamp(18px, 6vw, 40px) 96px;
|
||||
}
|
||||
body.reading-mode .breadcrumb,
|
||||
body.reading-mode .file-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ── Bottom sheet (backlinks / table of contents) ── */
|
||||
.me-sheet {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1200;
|
||||
max-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(110%);
|
||||
transition: transform 220ms ease;
|
||||
}
|
||||
.me-sheet.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.me-sheet-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1190;
|
||||
background: var(--overlay-bg, rgba(0, 0, 0, 0.5));
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 220ms ease;
|
||||
}
|
||||
.me-sheet-overlay.visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.me-sheet-handle {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--border);
|
||||
margin: 8px auto 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.me-sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 16px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.me-sheet-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.me-sheet-close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.me-sheet-list {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 6px 8px calc(12px + env(safe-area-inset-bottom, 0));
|
||||
}
|
||||
.me-sheet-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.me-sheet-item:active {
|
||||
background: var(--bg-hover, rgba(128, 128, 128, 0.18));
|
||||
}
|
||||
.me-sheet-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user