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

Rend l'interface utilisable sur téléphone

Browse Source 
Le nav et l'en-tête de semaine passent sur plusieurs lignes sous 700px,
le tableau hebdo devient une liste de cartes empilées par jour (au lieu
d'un scroll horizontal forcé), avec des cibles tactiles plus grandes.
Corrige au passage le popup calendrier qui débordait de l'écran sur mobile.
This commit is contained in:
Antoine
2026-08-20 17:26:59 +02:00
parent c1c063da51
commit 7423b68ac9
4 changed files with 112 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
app/templates/base.html
View File

@ -44,11 +44,12 @@
nav {
background: var(--nav-bg);
color: var(--ground);
height: 50px;
padding: 0 2rem;
min-height: 50px;
padding: .5rem 2rem;
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
gap: .6rem 2rem;
border-bottom: 3px solid var(--accent-2);
}
.nav-brand {
@ -87,6 +88,11 @@
}
.nav-logout { opacity: .6; font-size: 11px; }
@media (max-width: 700px) {
nav { padding: .5rem 1rem; gap: .5rem 1rem; }
nav .spacer { flex-basis: 100%; height: 0; }
}
/* ── Layout ── */
.container {
max-width: 1100px;
@ -96,15 +102,23 @@
flex-direction: column;
gap: 1.75rem;
}
@media (max-width: 700px) {
.container { padding: 1rem .75rem; gap: 1.25rem; }
}
/* ── Week header ── */
.week-header {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
gap: .6rem 1rem;
border-bottom: 2px solid var(--text);
padding-bottom: .75rem;
}
@media (max-width: 700px) {
.week-header-spacer { display: none; }
.export-btn { order: 10; flex-basis: 100%; text-align: center; }
}
.week-nav-arrows { display: flex; gap: .4rem; }
.arrow-btn {
width: 28px; height: 28px;
@ -360,6 +374,69 @@
.btn-cg.btn-jour { border-radius: 50%; width: 22px; height: 22px; font-size: 9px; }
.btn-cg.jour-on { background: var(--accent-2); border-color: #955505; color: #fff; }
/* ── Tableau hebdo en cartes empilées sous 700px (évite le scroll horizontal) ── */
@media (max-width: 700px) {
.pointage-table thead { display: none; }
.pointage-table, .pointage-table tbody, .pointage-table tr, .pointage-table td {
display: block;
width: 100%;
}
.pointage-table { border: none; background: none; }
.pointage-table tbody tr {
border: 1.5px solid var(--rule);
background: var(--surface);
margin-bottom: .75rem;
}
.pointage-table tbody tr:not(:last-child) td { border-bottom: none; }
.pointage-table td {
border-bottom: 1px solid var(--rule-l) !important;
padding: .55rem .75rem;
}
.pointage-table td:last-child { border-bottom: none !important; }
.pointage-table td.col-jour {
background: var(--ground);
border-bottom: 2px solid var(--text) !important;
}
.pointage-table .jour-nom, .pointage-table .jour-date { display: inline; }
.pointage-table .jour-date::before { content: ' · '; }
.pointage-table [data-label] {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.pointage-table [data-label]::before {
content: attr(data-label);
font-family: var(--mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
flex-shrink: 0;
}
.pointage-table td.c-matin, .pointage-table td.c-aprem { padding: 0; }
.pointage-table td.c-matin .td-fill, .pointage-table td.c-aprem .td-fill {
padding: .55rem .75rem;
}
.pointage-table .time-input { width: 84px; font-size: 14px; padding: .45rem .4rem; }
.pointage-table td.col-calc,
.pointage-table td.col-cumul,
.pointage-table td.col-cible {
text-align: left;
padding-left: .75rem;
min-width: 0;
}
.pointage-table td.col-save { text-align: right; }
.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; }
}
/* ── Historique ── */
.history {
display: flex;
@ -440,6 +517,7 @@
box-shadow: 0 4px 20px rgba(28,23,18,.12);
padding: .75rem;
min-width: 260px;
max-width: calc(100vw - 2rem);
}
.cal-popup[hidden] { display: none; }