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 {
display: grid;
grid-template-columns: 10% 20% 30% 30%;
gap: 3.33%;
grid-template-columns: auto auto 1fr auto;
gap: 16px;
background-color: white;
border-radius: 15px;
width: 80%;
height: 50px;
padding: 4px 16px;
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;
flex-wrap: wrap;
display: grid;
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;
}

View File

@ -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";
}

View File

@ -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>