Assiduites : modification styles (proposition Sébastien Lehmann)

This commit is contained in:
iziram 2023-04-19 17:35:48 +02:00
parent 19328cbe70
commit 5c6f0b3d6b
3 changed files with 53 additions and 33 deletions

View File

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

View File

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

View File

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