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:
@ -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
|
||||
|
||||
Reference in New Issue
Block a user