signal_assiduites_group : rendu mobile

app/static/css/scodoc9_mobile.css

@@ -12,4 +12,87 @@
     #moduleimpl_select {
         max-width: 200px;
     }
+
+    #timeline {
+        flex-wrap: wrap-reverse;
+    }
+
+    .time-buttons {
+        display: flex;
+        justify-content: space-evenly;
+    }
+
+    #timeline .inputs {
+        flex-direction: row;
+        justify-content: space-evenly;
+        width: 100%;
+        padding: 8px;
+    }
+
+    #timeline .inputs>input {
+        width: 100%;
+        text-align: center;
+    }
+
+    .timeline-container .period-handle::before {
+        width: 40px !important;
+        height: 100% !important;
+        content: "";
+        display: block;
+        background-color: red;
+        border-radius: 12px;
+        opacity: 0.5;
+        position: absolute;
+        top: 0;
+
+        mix-blend-mode: color-dodge;
+
+    }
+
+    .timeline-container .period-handle.left::before {
+        transform: translateX(-50%);
+        left: 0;
+    }
+
+    .timeline-container .period-handle.right::before {
+        transform: translateX(50%);
+        right: 0;
+    }
+
+    .selectors .infos {
+        flex-direction: column;
+    }
+
+    .selectors .infos .date-input {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+    }
+
+    .mass-selection {
+        flex-wrap: wrap;
+    }
+
+    .etud_row {
+        grid-template-columns: 2% 20% auto 25% !important;
+        max-width: 350px;
+        gap: 8px;
+    }
+
+    .etud_row .assiduites_bar {
+        grid-column: 4 !important;
+        grid-row: 1;
+    }
+
+    .etud_row .btns_field.single {
+        grid-column: 3 !important;
+        grid-row: 1;
+    }
+
+    .rbtn::before {
+        --size: 35px;
+        width: var(--size) !important;
+        height: var(--size) !important;
+    }
+
 }

app/templates/assiduites/pages/signal_assiduites_group.j2

@@ -115,6 +115,7 @@
         padding: 5px;
         border-radius: 5px;
         text-decoration: none;
+        z-index: 100;
     }
 
     html{
@@ -152,20 +153,22 @@
     <fieldset class="selectors">
         <div class="infos">
             <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
-            <div>
-            <button class="btn_date btn btn-secondary" onclick="jourSuivant(true)">
-            &LeftArrowBar;
-            </button>
-            <input type="text" name="date" id="date" class="datepicker" value="{{date}}">
+            <div class="date-input">
+                <button class="btn_date btn btn-secondary" onclick="jourSuivant(true)">
+                &LeftArrowBar;
+                </button>
+                <div>
+                    <input type="text" name="date" id="date" class="datepicker" value="{{date}}">
+                </div>
+                <button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
+                &RightArrowBar;
+                </button>
             </div>
-            <button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
-            &RightArrowBar;
-            </button>
         </div>
     </fieldset>
     <div style="display: {{'none' if readonly == 'true' else 'block'}};">
     {{timeline|safe}}
-        <div>
+        <div class="time-buttons">
             <button class=" btn btn-secondary" onclick="setPeriodValues(t_start, t_mid)">Matin</button>
             <button class=" btn btn-secondary" onclick="setPeriodValues(t_mid, t_end)">Après-Midi</button>
         </div>

app/templates/assiduites/widgets/timeline.j2

@@ -3,7 +3,7 @@
         <input type="text" name="deb" id="deb" class="timepicker">
         <input type="text" name="fin" id="fin" class="timepicker">
     </div>
-    <div class="timeline-container">
+    <div class="timeline-container" desktop="true">
         <div class="period" style="left: 0%; width: 20%">
             <div class="period-handle left"></div>
             <div class="period-handle right"></div>
@@ -12,8 +12,6 @@
     </div>
 </div>
 <script>
-
-
     const timelineContainer = document.querySelector(".timeline-container");
     const periodTimeLine = document.querySelector(".period");
     const t_start = {{ t_start }};
@@ -27,6 +25,8 @@
 
     let handleMoving = false;
 
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+
     // Création des graduations de la timeline
     // On créé des grandes graduations pour les heures
     // On créé des petites graduations pour les "tick"
@@ -44,6 +44,11 @@
             tickLabel.classList.add("tick-label");
             tickLabel.style.left = `${((i - t_start) / (t_end - t_start)) * 100}%`;
             tickLabel.textContent = numberToTime(i);
+            // on retire ce qu'il y a après les : sur mobile
+            if (isMobile) {
+                tickLabel.textContent = tickLabel.textContent.split(":")[0];
+            }
+
             timelineContainer.appendChild(tickLabel);
             // Si on est pas à la fin, on ajoute les graduations intermédiaires
             if (i < t_end) {