v2026.5.37 — Refonte vue horizontale (sidebar complète) : topbar supprimée, user-badge + titre + bouton Aujourd'hui + date/heure + stats en sidebar
This commit is contained in:
Quentin Rouiller
+190
-14
@@ -3656,23 +3656,19 @@ html.view-horizontal main#main {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Groupe navigation date dans la sidebar */
|
||||
/* Groupe navigation date dans la sidebar — v2026.5.36 (OBSOLÈTE v2026.5.37)
|
||||
v2026.5.37 : date-nav devient display: contents pour que ses enfants
|
||||
soient directement positionnables dans la sidebar (btn-today
|
||||
en haut, app-clock intercalé, flèches groupées dans wrapper).
|
||||
Les anciennes règles ci-dessous sont conservées pour compat
|
||||
mais neutralisées par les overrides v5.37 plus bas. */
|
||||
html.view-horizontal .horizontal-sidebar .date-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
/* v5.37 override via display: contents ci-dessous */
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .btn-nav {
|
||||
flex: 0 0 auto;
|
||||
/* v5.37 : ces règles sont conservées au cas où flèches restent dans date-nav
|
||||
(pas censé arriver puisque JS les sort dans #sidebar-arrows). */
|
||||
padding: 4px 8px;
|
||||
min-width: 28px;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .date-custom-wrapper {
|
||||
flex: 1 1 100%;
|
||||
order: -1; /* date au-dessus des flèches */
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .date-custom {
|
||||
width: 100%;
|
||||
@@ -3681,7 +3677,6 @@ html.view-horizontal .horizontal-sidebar .date-nav .date-custom {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .btn-today {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
@@ -3856,3 +3851,184 @@ html.view-horizontal .horizontal-wrapper > main#main {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.37 : refonte layout vue horizontale
|
||||
- Topbar en haut : masquée complètement (user-badge + titre descendent
|
||||
dans la sidebar)
|
||||
- Sidebar : user-badge + titre en haut, date/heure sous le bouton Auj.,
|
||||
stats puis espace libre puis boutons en bas (direction colonne-inverse)
|
||||
- Progress-bar : overlay par-dessus user-badge + titre
|
||||
- Banderole "En pompier du..." : masquée en vue horizontale
|
||||
========================================================================== */
|
||||
|
||||
/* 1. Topbar masquée complètement en vue horizontale */
|
||||
html.view-horizontal body > header.topbar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 2. Sidebar : structure verticale avec section fixe en haut (user+titre+date)
|
||||
et section "boutons" en bas poussée via margin-top: auto. */
|
||||
html.view-horizontal .horizontal-sidebar {
|
||||
max-height: 100vh !important;
|
||||
padding-top: 12px !important;
|
||||
}
|
||||
|
||||
/* 3. User-badge et titre dans la sidebar, côte à côte en haut */
|
||||
html.view-horizontal .horizontal-sidebar #user-badge {
|
||||
position: relative;
|
||||
margin: 0 auto 2px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #app-title {
|
||||
text-align: center;
|
||||
font-size: 15px !important;
|
||||
font-weight: 700 !important;
|
||||
margin: 0 0 8px 0 !important;
|
||||
padding: 0 !important;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* 4. Bouton "Aujourd'hui" en pleine largeur, avant date/heure */
|
||||
/* v2026.5.37 : on utilise un DOM wrapper #sidebar-arrows créé en JS pour
|
||||
les 2 flèches côte à côte. date-nav est décomposé en : [Auj.] + [clock
|
||||
intercalé] + [date-custom] + [arrows-wrapper]. Le JS s'en occupe. */
|
||||
html.view-horizontal .horizontal-sidebar .date-nav {
|
||||
display: contents;
|
||||
}
|
||||
/* Le bouton Aujourd'hui devient prominent */
|
||||
html.view-horizontal .horizontal-sidebar .btn-today {
|
||||
order: 1; /* tout en haut après titre */
|
||||
width: 100% !important;
|
||||
text-align: center !important;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
background: var(--bg) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 6px !important;
|
||||
color: var(--text) !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .btn-today::before {
|
||||
content: "↺ ";
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 5. App-clock (date + heure) centré sous le bouton "Aujourd'hui" */
|
||||
html.view-horizontal .horizontal-sidebar .app-clock {
|
||||
order: 2;
|
||||
align-items: center !important;
|
||||
text-align: center !important;
|
||||
padding: 6px 4px !important;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-date {
|
||||
text-align: center !important;
|
||||
width: 100%;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-time {
|
||||
text-align: center !important;
|
||||
width: 100%;
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
/* 6. Séparateur visuel après date/heure (avant sélecteur date)
|
||||
v2026.5.37 : on override order:-1 qui venait de v5.36 */
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .date-custom-wrapper {
|
||||
order: 3 !important;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 8px;
|
||||
margin-top: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 7. Flèches ◀ ▶ côte à côte via wrapper JS #sidebar-arrows */
|
||||
html.view-horizontal .horizontal-sidebar #sidebar-arrows {
|
||||
order: 4;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #sidebar-arrows .btn-nav {
|
||||
flex: 1 1 0 !important;
|
||||
min-width: 0 !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* 8. Stats empilées avec order pour venir après les flèches */
|
||||
html.view-horizontal .horizontal-sidebar #stats {
|
||||
order: 5;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 9. Capture-info (Synchronisé à HH:MM) sous les stats */
|
||||
html.view-horizontal .horizontal-sidebar .capture-info {
|
||||
order: 6;
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 10. Boutons poussés en bas via margin-top: auto sur le premier d'entre eux
|
||||
(Absence, qui a order:7) */
|
||||
html.view-horizontal .horizontal-sidebar #absence-btn {
|
||||
order: 7;
|
||||
margin-top: auto !important; /* pousse tout ce qui suit en bas */
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #douchette-btn { order: 8; }
|
||||
html.view-horizontal .horizontal-sidebar #refresh-partial-btn { order: 9; }
|
||||
html.view-horizontal .horizontal-sidebar #refresh-btn { order: 10; }
|
||||
html.view-horizontal .horizontal-sidebar #clear-cache-btn { order: 11; }
|
||||
html.view-horizontal .horizontal-sidebar #theme-toggle {
|
||||
order: 12;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #abort-btn {
|
||||
order: 8; /* avec douchette-btn (qui est aussi 8) — ne devrait pas
|
||||
être visible en même temps (un seul actif à la fois) */
|
||||
}
|
||||
|
||||
/* 11. Theme-toggle en bas : pleine largeur centrée */
|
||||
html.view-horizontal .horizontal-sidebar #theme-toggle {
|
||||
width: 100% !important;
|
||||
padding: 6px !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
/* 12. Sidebar doit être flex column pour que margin-top:auto fonctionne */
|
||||
html.view-horizontal .horizontal-sidebar {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
/* 13. Barre de rafraîchissement en vue horizontale : overlay par-dessus
|
||||
user-badge + titre (zone haut de sidebar). */
|
||||
html.view-horizontal #progress-bar {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 200px !important; /* largeur de la sidebar */
|
||||
z-index: 9999 !important;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Sur breakpoint étroit (sidebar 170px) */
|
||||
@media (max-width: 1400px) {
|
||||
html.view-horizontal #progress-bar {
|
||||
width: 170px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 14. Banderole "En pompier du..." : masquée en vue horizontale uniquement
|
||||
(la barre rouge à gauche et le badge POMPIER restent visibles). */
|
||||
html.view-horizontal .card-status-note.pompier {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user