Version 2026.5.37 — Refonte vue horizontale (sidebar complète)
- Topbar supprimée, user-badge + titre déplacés en sidebar - Bouton Aujourd'hui pleine largeur, stats empilées - Banderole pompier masquée en vue horizontale
This commit is contained in:
+281
-12
@@ -3741,25 +3741,294 @@ html.view-horizontal .horizontal-sidebar #stats .global-stat {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
html.view-horizontal .stats .global-stat-main b {
|
||||
font-size: 18px !important;
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat b {
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
/* Masquer les séparateurs "·" en vue verticale */
|
||||
html.view-horizontal .stats .global-stat-sep {
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat-main b {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat-sep {
|
||||
display: none !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat-sub {
|
||||
display: block !important;
|
||||
font-size: 10px;
|
||||
color: var(--text-faint);
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
/* Boutons d'action dans la sidebar : pleine largeur, empilés */
|
||||
html.view-horizontal .horizontal-sidebar button.btn {
|
||||
width: 100%;
|
||||
justify-content: flex-start !important;
|
||||
padding: 6px 10px !important;
|
||||
font-size: 12px !important;
|
||||
gap: 6px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .btn-action-label,
|
||||
html.view-horizontal .horizontal-sidebar .btn-refresh-label {
|
||||
display: inline !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .btn-action-icon,
|
||||
html.view-horizontal .horizontal-sidebar .btn-refresh-icon {
|
||||
flex: 0 0 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Grille cards prend le reste de la largeur */
|
||||
html.view-horizontal .cards {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* v2026.5.36 : zone nom tech encore plus petite (140 → 120px) */
|
||||
html.view-horizontal .card-header {
|
||||
min-width: 120px !important;
|
||||
max-width: 120px !important;
|
||||
}
|
||||
|
||||
/* Annuler les règles plus anciennes v2026.5.35 qui mettaient les stats à gauche
|
||||
de manière inline (elles sont désormais dans la sidebar unifiée) */
|
||||
html.view-horizontal main .stats {
|
||||
/* Les stats sont maintenant DANS la sidebar, pas dans main. Si pour une
|
||||
raison quelconque elles y restent, on les cache. */
|
||||
}
|
||||
|
||||
/* Breakpoint étroit : sidebar plus fine */
|
||||
@media (max-width: 1400px) {
|
||||
.horizontal-sidebar {
|
||||
width: 170px;
|
||||
min-width: 170px;
|
||||
max-width: 170px;
|
||||
padding: 8px 10px;
|
||||
font-size: 11px;
|
||||
}
|
||||
html.view-horizontal .card-header {
|
||||
min-width: 110px !important;
|
||||
max-width: 110px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.36 : layout global du body en vue horizontale
|
||||
La topbar reste en haut (pleine largeur), puis body devient flex-row :
|
||||
[sidebar] + [main]
|
||||
========================================================================== */
|
||||
html.view-horizontal body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
html.view-horizontal body > header.topbar {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
html.view-horizontal body {
|
||||
/* Le body doit permettre à sidebar + main de se placer côte à côte.
|
||||
On met un wrapper flex via un pseudo-selecteur impossible à hacker
|
||||
proprement sans JS, donc on utilise display:flex sur body et
|
||||
flex-direction: row pour tout sauf la topbar et quelques éléments
|
||||
absolument positionnés (toasts, modals...). Plus simple :
|
||||
on rend .horizontal-sidebar et main voisins via flex sur un wrapper
|
||||
JS-créé (plus bas). À défaut, positioning absolute fallback. */
|
||||
}
|
||||
|
||||
/* Fallback : si pas de wrapper, on positionne .horizontal-sidebar en sticky
|
||||
dans le flux normal. <main> n'est pas juste à côté mais en dessous —
|
||||
ce n'est pas l'idéal, d'où le wrapper JS. */
|
||||
|
||||
/* v2026.5.36 : wrapper flex-row pour sidebar + main en vue horizontale */
|
||||
.horizontal-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
html.view-horizontal .cards {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0; /* autorise le shrink si grand nombre de techs */
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Breakpoint étroit : stats plus compactes */
|
||||
/* 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 .stats {
|
||||
width: 160px;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 11px !important;
|
||||
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