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

View File

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