Rend l'interface utilisable sur téléphone

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

View File

@ -44,7 +44,7 @@
<!-- Tableau -->
<div class="table-section">
<table>
<table class="pointage-table">
<thead>
<tr class="th-group">
<th class="g-jour" rowspan="2">Jour</th>
@ -198,7 +198,26 @@
const open = popup.hidden;
popup.hidden = !open;
btn.setAttribute('aria-expanded', String(open));
if (open) renderCal();
if (open) {
renderCal();
// Sous ~700px, le popup est positionné en fixed pour ne jamais déborder
// du viewport (son ancrage absolu normal suit la position du trigger,
// qui n'est pas centré horizontalement sur mobile).
if (window.innerWidth <= 700) {
const rect = btn.getBoundingClientRect();
popup.style.position = 'fixed';
popup.style.top = (rect.bottom + 8) + 'px';
popup.style.left = '.75rem';
popup.style.right = '.75rem';
popup.style.width = 'auto';
} else {
popup.style.position = '';
popup.style.top = '';
popup.style.left = '';
popup.style.right = '';
popup.style.width = '';
}
}
};
// Close on outside click