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