Assiduites : modification styles (proposition Sébastien Lehmann)

app/static/css/assiduites.css

@@ -87,19 +87,16 @@
 
 .etud_row {
     display: grid;
-    grid-template-columns: 10% 20% 30% 30%;
+    grid-template-columns: auto auto 1fr auto;
-    gap: 3.33%;
+    gap: 16px;
-
     background-color: white;
     border-radius: 15px;
-    width: 80%;
+    padding: 4px 16px;
-    height: 50px;
-
     margin: 0.5% 0;
-
     box-shadow: -1px 12px 5px -8px rgba(68, 68, 68, 0.61);
     -webkit-box-shadow: -1px 12px 5px -8px rgba(68, 68, 68, 0.61);
     -moz-box-shadow: -1px 12px 5px -8px rgba(68, 68, 68, 0.61);
+    max-width: 800px;
 }
 
 .etud_row * {
@@ -142,10 +139,15 @@
     font-size: x-small;
 }
 
+.etud_row .pdp {
+    border-radius: 15px;
+}
+
 /* --- Barre assiduités --- */
 .etud_row .assiduites_bar {
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: 7px 1fr;
+    gap: 13px;
     grid-column: 3;
     position: relative;
 }
@@ -179,15 +181,15 @@
 }
 
 .etud_row .assiduites_bar .absent {
-    background-color: #ec5c49 !important;
+    background-color: #F1A69C !important;
 }
 
 .etud_row .assiduites_bar .present {
-    background-color: #37f05f !important;
+    background-color: #9CF1AF !important;
 }
 
 .etud_row .assiduites_bar .retard {
-    background-color: #ecb52a !important;
+    background-color: #F1D99C !important;
 }
 
 

app/static/js/assiduites.js

@@ -1039,6 +1039,7 @@ function insertEtudRow(etud, index, output = false) {
  * @returns {HTMLElement} l'élément correspondant à la mini timeline
  */
 function createMiniTimeline(assiduitesArray) {
+  const array = [...assiduitesArray];
   const dateiso = document.getElementById("tl_date").value;
   const timeline = document.createElement("div");
   timeline.className = "mini-timeline";
@@ -1050,7 +1051,17 @@ function createMiniTimeline(assiduitesArray) {
   const dayEnd = timelineDate.clone().add(18, "hours");
   const dayDuration = moment.duration(dayEnd.diff(dayStart)).asMinutes();
 
-  assiduitesArray.forEach((assiduité) => {
+  const tlTimes = getTimeLineTimes();
+
+  const period_assi = {
+    date_debut: tlTimes.deb.format(),
+    date_fin: tlTimes.fin.format(),
+    etat: "CRENEAU",
+  };
+
+  array.push(period_assi);
+
+  array.forEach((assiduité) => {
     const startDate = moment(assiduité.date_debut);
     const endDate = moment(assiduité.date_fin);
 
@@ -1073,6 +1084,7 @@ function createMiniTimeline(assiduitesArray) {
     block.style.left = `${leftPercentage}%`;
     block.style.width = `${widthPercentage}%`;
 
+    if (assiduité.etat != "CRENEAU") {
       if (isSingleEtud()) {
         block.addEventListener("click", () => {
           let deb = startDate.hours() + startDate.minutes() / 60;
@@ -1084,9 +1096,9 @@ function createMiniTimeline(assiduitesArray) {
           updateSelectedSelect(getCurrentAssiduiteModuleImplId());
         });
       }
-
       //ajouter affichage assiduites on over
       setupAssiduiteBuble(block, assiduité);
+    }
 
     switch (assiduité.etat) {
       case "PRESENT":
@@ -1098,6 +1110,9 @@ function createMiniTimeline(assiduitesArray) {
       case "ABSENT":
         block.classList.add("absent");
         break;
+      case "CRENEAU":
+        block.classList.add("creneau");
+        break;
       default:
         block.style.backgroundColor = "white";
     }
@@ -1391,11 +1406,11 @@ function getTopPosition(container, start, end) {
 function getColor(state) {
   switch (state) {
     case "PRESENT":
-      return "#37f05f";
+      return "#9CF1AF";
     case "ABSENT":
-      return "#ec5c49";
+      return "#F1A69C";
     case "RETARD":
-      return "#ecb52a";
+      return "#F1D99C";
     default:
       return "gray";
   }

app/templates/assiduites/minitimeline.j2

@@ -53,24 +53,22 @@
     }
 
     .assiduite-bubble.absent {
-        border-color: #ec5c49 !important;
+        border-color: #F1A69C !important;
     }
 
     .assiduite-bubble.present {
-        border-color: #37f05f !important;
+        border-color: #9CF1AF !important;
     }
 
     .assiduite-bubble.retard {
-        border-color: #ecb52a !important;
+        border-color: #F1D99C !important;
     }
 
     .mini-timeline {
         height: 7px;
-        width: 90%;
         border: 1px solid black;
         position: relative;
         background-color: white;
-        overflow: hidden;
     }
 
     .mini-timeline.single {
@@ -102,4 +100,9 @@
         bottom: -2px;
         z-index: 2;
     }
+
+    .mini-timeline-block.creneau {
+        outline: 3px solid #7059FF;
+        pointer-events: none;
+    }
 </style>