v2026.5.36 — Sidebar verticale en vue horizontale (#horizontal-wrapper [sidebar 200px] + [main]) [code interpolé entre v2026.5.35 et v2026.5.37]
This commit is contained in:
Quentin Rouiller
+248
-30
@@ -3586,55 +3586,273 @@ html.view-classic .tech-row-stats {
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.35 : en vue horizontale, stats globales sur le CÔTÉ GAUCHE
|
||||
(colonne verticale fixe) au lieu d'être au-dessus des cartes.
|
||||
Libère de la hauteur verticale pour les 8 techs.
|
||||
v2026.5.36 : REFONTE — les stats (et tout le reste) sont maintenant déplacés
|
||||
physiquement dans .horizontal-sidebar (via JS _moveElementsToSidebar).
|
||||
Le CSS ci-dessous est conservé au cas où une ancienne instance
|
||||
ait encore .stats dans <main>, mais il ne devrait plus s'appliquer.
|
||||
========================================================================== */
|
||||
html.view-horizontal main {
|
||||
html.view-horizontal main#main.legacy-stats-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
html.view-horizontal .stats {
|
||||
/* ==========================================================================
|
||||
v2026.5.36 : Vue horizontale — sidebar verticale à gauche
|
||||
Contient (haut → bas) : nav date, horloge, stats, boutons actions.
|
||||
Seuls restent en haut : user-badge, titre "Planification", bouton thème.
|
||||
========================================================================== */
|
||||
|
||||
/* Topbar en vue horizontale : minimaliste */
|
||||
html.view-horizontal .topbar {
|
||||
padding: 6px 12px !important;
|
||||
gap: 8px;
|
||||
}
|
||||
/* Cacher la zone centrale (déplacée vers sidebar) */
|
||||
html.view-horizontal .topbar .app-clock,
|
||||
html.view-horizontal .topbar .capture-info,
|
||||
html.view-horizontal .topbar .app-session {
|
||||
display: none !important;
|
||||
}
|
||||
/* topbar-left ne contient plus que user-badge + titre */
|
||||
html.view-horizontal .topbar-left {
|
||||
gap: 10px;
|
||||
}
|
||||
/* topbar-right ne contient plus que le theme-toggle */
|
||||
html.view-horizontal .topbar-right {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Sidebar verticale à gauche */
|
||||
.horizontal-sidebar {
|
||||
flex: 0 0 auto;
|
||||
width: 200px;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
gap: 8px !important;
|
||||
padding: 12px 16px !important;
|
||||
border-right: 1px solid var(--border);
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
background: var(--bg-muted);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
overflow-y: auto;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
min-height: calc(100vh - 80px);
|
||||
font-size: 12px !important;
|
||||
max-height: calc(100vh - 48px); /* topbar ~48px */
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html.view-horizontal .stats .global-stat {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
html.view-horizontal .stats .global-stat-main b {
|
||||
font-size: 18px !important;
|
||||
color: var(--text);
|
||||
}
|
||||
/* Masquer les séparateurs "·" en vue verticale */
|
||||
html.view-horizontal .stats .global-stat-sep {
|
||||
/* Cacher la sidebar en vue classique (au cas où elle existe encore) */
|
||||
html.view-classic .horizontal-sidebar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.view-horizontal .cards {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0; /* autorise le shrink si grand nombre de techs */
|
||||
/* Layout main avec sidebar */
|
||||
html.view-horizontal main#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Breakpoint étroit : stats plus compactes */
|
||||
/* Groupe navigation date dans la sidebar */
|
||||
html.view-horizontal .horizontal-sidebar .date-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .btn-nav {
|
||||
flex: 0 0 auto;
|
||||
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%;
|
||||
justify-content: flex-start;
|
||||
padding: 6px 8px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .date-nav .btn-today {
|
||||
flex: 0 0 auto;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
/* Horloge dans la sidebar */
|
||||
html.view-horizontal .horizontal-sidebar .app-clock {
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
left: auto !important;
|
||||
top: auto !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-date {
|
||||
font-size: 11px !important;
|
||||
color: var(--text-muted) !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-date::after {
|
||||
content: "" !important; /* supprimer le gros point · */
|
||||
display: none !important;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar .app-clock-time {
|
||||
font-size: 20px !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--text) !important;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Info capture (Synchronisé à...) */
|
||||
html.view-horizontal .horizontal-sidebar .capture-info {
|
||||
display: block !important;
|
||||
font-size: 11px !important;
|
||||
color: var(--text-muted);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* Stats globales dans la sidebar (séparateurs cachés) */
|
||||
html.view-horizontal .horizontal-sidebar #stats {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 4px !important;
|
||||
padding: 6px 4px !important;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin: 2px 0;
|
||||
background: transparent !important;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
html.view-horizontal .horizontal-sidebar #stats .global-stat b {
|
||||
color: var(--text);
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
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) {
|
||||
html.view-horizontal .stats {
|
||||
width: 160px;
|
||||
padding: 8px 12px !important;
|
||||
font-size: 11px !important;
|
||||
.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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user