Chantier responsive : responsive.js (police proportionnelle, colonnes selon largeur minimale de bouton), appliqué aux 5 pages (home + 4 détails) - sélecteurs de domaine/famille/variable adaptatifs, hauteurs tactiles garanties, polices du résumé Max/Moyen/Min/Delta et des boutons de période corrigées

2026-08-27 11:55:10 +02:00
parent 5ff19d5f0f
commit 2810a53c90
7 changed files with 170 additions and 94 deletions
@@ -0,0 +1,47 @@
+.pragma library
+
+// ============================================================================
+// responsive.js - fonctions utilitaires pour un affichage adaptatif (PC,
+// tablette, téléphone). Même principe que fonctions.js/fonctions_date_heure.js
+// côté natif (bibliothèque JS partagée, importée par les pages qui en ont
+// besoin) - cf synthèse, chantier "responsive".
+// ============================================================================
+
+// Seuil en dessous duquel l'écran est considéré "étroit" (bascule en mise en
+// page compacte - typiquement un téléphone en portrait) :
+var SEUIL_ECRAN_ETROIT = 700;
+
+function estEtroit(largeur) {
+    return largeur < SEUIL_ECRAN_ETROIT;
+}
+
+// Taille de police proportionnelle à la largeur d'écran disponible, avec un
+// plancher et un plafond pour rester lisible sur petit écran et raisonnable
+// sur grand écran PC. 'base' est la taille pensée pour un écran de référence
+// (~950px de large, l'ordre de grandeur habituel de test de ce projet).
+function police(base, largeur) {
+    var largeurReference = 950;
+    var taille = base * (largeur / largeurReference);
+    var plancher = base * 0.6;
+    var plafond = base * 1.3;
+    if (taille < plancher) taille = plancher;
+    if (taille > plafond) taille = plafond;
+    return Math.round(taille);
+}
+
+// Nombre de colonnes adapté à la largeur RÉELLEMENT disponible et au nombre
+// d'éléments à afficher, plutôt qu'un simple seuil binaire "écran étroit/
+// large" - chaque bouton reste au moins 'largeurMinBouton' de large, quel que
+// soit le nombre d'éléments (qui peut varier dynamiquement - ex: familles
+// créées/supprimées par l'utilisateur, différent d'un domaine à l'autre) :
+var LARGEUR_MIN_BOUTON = 130;
+
+function colonnesSelonLargeur(largeurDisponible, nombreElements, largeurMinBouton) {
+    if (largeurMinBouton === undefined) largeurMinBouton = LARGEUR_MIN_BOUTON;
+    var colonnesPossibles = Math.max(1, Math.floor(largeurDisponible / largeurMinBouton));
+    return Math.max(1, Math.min(nombreElements, colonnesPossibles));
+}
+
+// Hauteur minimale garantie pour une cible tactile (bouton), quelle que soit
+// l'échelle par ailleurs - recommandation usuelle d'accessibilité (~44px) :
+var HAUTEUR_MIN_TACTILE = 44;