forked from ScoDoc/ScoDoc
signal_assiduites_group : rendu mobile
This commit is contained in:
parent
4f40713787
commit
07f09ddead
@ -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;
|
||||
}
|
||||
|
||||
}
|
@ -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 : {{grp|safe}}</div>
|
||||
<div>
|
||||
<button class="btn_date btn btn-secondary" onclick="jourSuivant(true)">
|
||||
⇤
|
||||
</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)">
|
||||
⇤
|
||||
</button>
|
||||
<div>
|
||||
<input type="text" name="date" id="date" class="datepicker" value="{{date}}">
|
||||
</div>
|
||||
<button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
|
||||
⇥
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn_date btn btn-secondary" onclick="jourSuivant(false)">
|
||||
⇥
|
||||
</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>
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user