From e1a5ea31cd2b23597a25c47bddf1c05bff1b0b5f Mon Sep 17 00:00:00 2001
From: Iziram <matthias.hartmann@iziram.fr>
Date: Tue, 20 Aug 2024 14:50:36 +0200
Subject: [PATCH] fix responsive calendriers

---
 .../assiduites/pages/calendrier_assi_etud.j2  | 24 +++++++------------
 app/templates/calendrier.j2                   |  3 ++-
 app/templates/choix_date.j2                   |  2 +-
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/app/templates/assiduites/pages/calendrier_assi_etud.j2 b/app/templates/assiduites/pages/calendrier_assi_etud.j2
index 33275ba16..f5610ad76 100644
--- a/app/templates/assiduites/pages/calendrier_assi_etud.j2
+++ b/app/templates/assiduites/pages/calendrier_assi_etud.j2
@@ -15,12 +15,15 @@ Calendrier de l'assiduité
     <h2>Assiduité de {{sco.etud.html_link_fiche()|safe}}</h2>
 
     <div class="options">
-        <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else '' }}><label
-            for="show_pres">afficher les présences</label>
-        <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else '' }}><label
-            for="show_reta">afficher les retards</label>
-        <input type="checkbox" name="mode_demi" id="mode_demi" class="memo" {{'checked' if mode_demi else '' }}><label
-            for="mode_demi">mode demi journée</label>
+        <label for="show_pres">afficher les présences
+            <input type="checkbox" id="show_pres" name="show_pres" class="memo" {{'checked' if show_pres else '' }}>
+        </label>
+        <label for="show_reta">afficher les retards
+            <input type="checkbox" name="show_reta" id="show_reta" class="memo" {{'checked' if show_reta else '' }}>
+        </label>
+        <label for="mode_demi">mode demi journée
+            <input type="checkbox" name="mode_demi" id="mode_demi" class="memo"{{'checked' if mode_demi else '' }}>
+        </label>
     </div>
 
     <div class="cal">
@@ -86,15 +89,6 @@ Calendrier de l'assiduité
             max-width: var(--sco-content-max-width);
         }
 
-        .calendrier {
-            display: flex;
-            justify-content: center;
-            overflow-x: scroll;
-            border: 1px solid #444;
-            border-radius: 12px;
-            margin-bottom: 12px;
-        }
-
         .assi_case {
             display: flex;
             width: 100%;
diff --git a/app/templates/calendrier.j2 b/app/templates/calendrier.j2
index 7bfc803fc..d457b504e 100644
--- a/app/templates/calendrier.j2
+++ b/app/templates/calendrier.j2
@@ -21,11 +21,12 @@
 <style>
     .calendrier {
         display: flex;
-        justify-content: center;
+        justify-content: flex-start;
         overflow-x: scroll;
         border: 1px solid #444;
         border-radius: 12px;
         margin-bottom: 12px;
+        padding: 4px;
     }
 
     .mois {
diff --git a/app/templates/choix_date.j2 b/app/templates/choix_date.j2
index a8c4d0a46..96c951f97 100644
--- a/app/templates/choix_date.j2
+++ b/app/templates/choix_date.j2
@@ -15,8 +15,8 @@
             margin-top: 10px;
         }
         .content{
-            width: 90%;
             max-width: 1600px;
+            padding: 12px;
         }
     </style>
 {% endblock %}