fix pagination tableaux

app/static/css/scodoc9_mobile.css

@@ -0,0 +1,15 @@
+/* ==  Gestion des styles pour les mobiles == */
+
+@media screen and (max-width: 768px) {
+
+    /*  <== Module Assiduité ==> */
+    #ajout-assiduite-etud .description>textarea,
+    #ajout-justificatif-etud .raison>textarea {
+        width: 90%;
+    }
+
+    #modimpl,
+    #moduleimpl_select {
+        max-width: 200px;
+    }
+}

app/templates/assiduites/pages/ajout_assiduite_etud.j2

@@ -95,8 +95,8 @@ div.submit > input {
             {{ render_field_errors(form, 'est_just') }}
         </div>
         {# Description #}
-        <div>
-            <div>{{ form.description.label }}</div>
+        <div class="description">
+            {{ form.description.label }}
             {{ form.description() }}
             {{ render_field_errors(form, 'description') }}
         </div>

app/templates/assiduites/pages/ajout_justificatif_etud.j2

@@ -106,7 +106,7 @@ div.submit > input {
             {{ render_field_errors(form, 'etat') }}
         </div>
         {# Raison #}
-        <div>
+        <div class="raison">
             {% if (not justif) or can_view_justif_detail %}
                 <div>{{ form.raison.label }}</div>
                 {{ form.raison() }}

app/templates/assiduites/pages/bilan_etud.j2

@@ -76,6 +76,7 @@ Bilan assiduité de {{sco.etud.nomprenom}}
                     id="stats_date_debut" value="{{date_debut}}"></label>
             <label class="stats-label"> Date de fin <input type="text" class="datepicker" name="stats_date_fin"
                     id="stats_date_fin" value="{{date_fin}}"></label>
+            <br mobile="true">
             <button onclick="stats()">Actualiser</button>
         </div>
 

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%;

app/templates/assiduites/widgets/tableau.j2

@@ -58,7 +58,7 @@
         <!-- Mettre les flèches -->
         {% if total_pages > 1 %}
             <ul class="pagination">
-                <li class="">
+                <li class="{{'disabled' if options.page == 1 else ''}}">
                     <a onclick="navigateToPage({{options.page - 1}})">&lt;</a>
                 </li>
                 <!-- Toujours afficher la première page -->
@@ -91,7 +91,7 @@
                 <li class="{% if options.page == total_pages %}active{% endif %}">
                     <a onclick="navigateToPage({{total_pages}})">{{ total_pages }}</a>
                 </li>
-                <li class="">
+                <li class="{{'disabled' if options.page == total_pages else ''}}">
                     <a onclick="navigateToPage({{options.page + 1}})">&gt;</a>
                 </li>
             </ul>
@@ -235,7 +235,30 @@
         max-width: fit-content;
     }
 
-    .pagination li{
+    .pagination li>*{
         cursor: pointer;
+
+        /*Style pour les boutons de pagination*/
+        border: 1px solid #ccc;
+        background-color: #f1f1f1;
+        padding: 8px 16px;
+        font-size: 16px;
+        border-radius: 4px;        
+        margin: 8px 1px;
+
+    }
+    .pagination li:hover >a, .pagination li.active>*{
+        /*Style pour les boutons actifs*/
+        background-color: var(--sco-color-ues);
+        color: white !important;
+
+    }
+
+    .pagination li.disabled>*{
+        /*Style pour les boutons désactivés*/
+        opacity: 0.5;
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
     }
 </style>

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 {

app/templates/choix_date.j2

@@ -15,8 +15,8 @@
             margin-top: 10px;
         }
         .content{
-            width: 90%;
             max-width: 1600px;
+            padding: 12px;
         }
     </style>
 {% endblock %}

app/templates/sco_page.j2

@@ -5,6 +5,7 @@
 {{super()}}
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc.css">
 <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc97.css">
+<link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/scodoc9_mobile.css">
 <link href="{{scu.STATIC_DIR}}/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="{{scu.STATIC_DIR}}/css/gt_table.css" rel="stylesheet" type="text/css" />
 <link type="text/css" rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/qtip/jquery.qtip-3.0.3.min.css" />