signal_assiduites_group : rendu mobile

This commit is contained in:
Iziram 2024-08-20 17:56:59 +02:00
parent 4f40713787
commit 07f09ddead
3 changed files with 103 additions and 12 deletions

View File

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

View File

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

View File

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