code_public/pointeuse-optimisator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Astreintes : interventions dans un menu dépliant fermé, cadre élargi

Browse Source 
Les heures d'intervention (début, fin, description) passent en trois
colonnes alignées, cachées par défaut derrière un bouton « N
interventions » ; l'heure de retour et le total restent visibles.
L'état déplié survit aux rafraîchissements HTMX. Le conteneur passe
de 1100 à 1400 px pour que les lignes ne dépassent plus du cadre.

💘 Generated with Crush

Assisted-by: Crush:glm-5.2
This commit is contained in:
Jacquin Antoine
2026-09-08 22:40:06 +02:00
parent c208a17eec
commit 83f5512cb6
5 changed files with 147 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/templates/base.html
View File

@ -143,7 +143,7 @@
/* ── Layout ── */
.container {
max-width: 1100px;
max-width: 1400px;
margin: 0 auto;
padding: 2rem 1.5rem;
display: flex;
@ -431,35 +431,62 @@
.btn-cg.btn-as { border-radius: 4px; }
.btn-cg.as-on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Astreinte : opération hors horaires + heure de retour après 11h de repos */
/* Astreinte : heures d'intervention (début/fin/description) repliées dans un
menu dépliant fermé par défaut ; retour 11h et total restent visibles. */
.as-block {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
flex-direction: column;
gap: .3rem;
padding: .3rem .65rem .45rem;
border-top: 1px dashed var(--rule);
}
.as-label {
.as-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.as-toggle {
display: inline-flex;
align-items: center;
gap: .35rem;
border: 1px solid var(--rule);
background: transparent;
padding: .15rem .5rem;
cursor: pointer;
font-family: var(--mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--accent-2);
white-space: nowrap;
transition: border-color .15s;
}
.as-toggle:hover { border-color: var(--accent-2); }
.as-caret { display: inline-block; transition: transform .15s; }
.as-block.open .as-caret { transform: rotate(90deg); }
.as-body { display: none; flex-direction: column; gap: .35rem; }
.as-block.open .as-body { display: flex; }
.as-grid {
display: grid;
grid-template-columns: 84px 84px minmax(110px, 1fr);
gap: 3px 6px;
align-items: center;
}
.as-grid .as-th {
font-family: var(--mono);
font-size: 9px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent-2);
white-space: nowrap;
color: var(--muted);
}
.as-block .time-input { width: 68px; }
.as-grid .time-input { width: 100%; }
.as-event { display: contents; }
.as-desc-cell { display: flex; align-items: center; gap: 4px; min-width: 0; }
.as-hint {
font-family: var(--mono);
font-size: 10px;
color: var(--accent);
white-space: nowrap;
}
.as-events { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.as-event { display: flex; align-items: center; gap: 4px; }
.as-desc {
flex: 1;
min-width: 60px;
min-width: 0;
border: 1px solid var(--rule);
border-radius: 0;
padding: .25rem .3rem;
@ -487,6 +514,7 @@
}
.as-del:hover { border-color: var(--neg); color: var(--neg); }
.as-add {
align-self: flex-start;
border: none;
background: none;
padding: 0;
@ -600,8 +628,8 @@
.pointage-table .btn-valider { width: 40px; height: 40px; font-size: 16px; }
.pointage-table .btn-cg { width: 34px; height: 34px; font-size: 11px; }
.pointage-table .btn-cg.btn-jour { width: 32px; height: 32px; }
.as-block { padding: .4rem .75rem .55rem; }
.as-block .time-input { width: 92px; }
.pointage-table .as-block { padding: .4rem .75rem .55rem; align-items: stretch; }
.as-grid { grid-template-columns: 82px 82px minmax(90px, 1fr); }
.as-desc { font-size: 13px; padding: .4rem .4rem; }
}