Commit 601455ba by Damien Moulard

calendar legend

parent ed4c4c1a
......@@ -3,6 +3,7 @@
margin: 3rem auto;
display: flex;
flex-direction: column;
position: relative;
}
/* -- Suspended screen */
......@@ -16,6 +17,21 @@
margin: 1.5rem 0;
}
/* -- Calendar screen, area on top of the calendar */
#calendar_top_info {
display: flex;
justify-content: space-between;
}
@media screen and (max-width:768px) {
#calendar_top_info {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
/* -- Calendar screen, shifts list */
#shifts_list {
......@@ -119,4 +135,35 @@
.date_old_shift, .time_old_shift, .date_new_shift, .time_new_shift {
font-weight: bold;
}
/* -- Explainations */
#calendar_explaination_area {
max-width: 33%;
border: 2px solid #585858;
border-radius: 15px;
padding: 1rem;
}
.example-event {
max-width: 200px;
margin: 2rem 0 0.5rem 0;
font-size: 1.4rem !important;
padding: 0 !important;
}
@media screen and (max-width:768px) {
.example-event {
margin: 2rem auto 0.5rem auto;
}
}
.arrow_explanation_numbers {
margin: 0 3px;
}
#calendar_explaination_button {
max-width: 60%;
margin: 2rem auto -1rem auto;
}
\ No newline at end of file
......@@ -176,8 +176,22 @@ function init_shifts_list() {
* Inits the page when the calendar is displayed
*/
function init_calendar_page() {
let template_explanations = $("#calendar_explaination_template");
if (vw <= 768) {
$(".loading-calendar").show();
$("#calendar_explaination_area").hide();
$("#calendar_explaination_button").on("click", () => {
openModal(
template_explanations.html(),
closeModal,
"J'ai compris"
)
})
} else {
$("#calendar_explaination_button").hide();
$("#calendar_explaination_area").html(template_explanations.html());
}
if (incoming_shifts !== null) {
......
......@@ -49,9 +49,20 @@
<div>par celui du : </div>
<div><span class="date_new_shift"></span> à <span class="time_new_shift"></span></div>
</div>
<div id="modal_add_shift_template">
<div>Je suis sur le point de m'inscrire au service du : <span class="date_new_shift"></span> à <span class="time_new_shift"></span></div>
</div>
<div id="calendar_explaination_template">
<h4>Légende du calendrier</h4>
<a class="example-event fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-start fc-event-end fc-event-future shift_booked"><div class="fc-event-main"><div class="fc-event-main-frame"><div class="fc-event-time">06:00</div><div class="fc-event-title-container"><div class="fc-event-title fc-sticky"> Clemenceau -- 9/12</div></div></div></div></a>
<p>Un service colorié en noir : je suis déjà inscrit à ce service.</p>
<a class="example-event fc-daygrid-event fc-daygrid-block-event fc-h-event fc-event fc-event-start fc-event-end fc-event-future shift_less_alf"><div class="fc-event-main"><div class="fc-event-main-frame"><div class="fc-event-time">10:45</div><div class="fc-event-title-container"><div class="fc-event-title fc-sticky"> Clemenceau -- 3/12</div></div></div></div></a>
<p>Un service colorié en bleu : je peux m'inscrire à ce service.</p>
<p>3/12 <i class="arrow_explanation_numbers fas fa-arrow-right"></i> il y a déjà 3 places réservées à ce service sur 12 disponibles.
<b>Plus le chiffre de gauche est petit, plus on a besoin de coopérateurs.rices à ce service !</b></p>
</div>
</div>
</div>
......
......@@ -19,12 +19,16 @@
<span class="select_makeups_message_block">Je dois les sélectionner dans le calendrier. </span>
<span class="select_makeups_message_block">Je ne peux pas échanger de service tant que je n'ai pas choisi mes rattrapages. </span>
</div>
<div id="partner_shifts_list">
<h4>Liste de mes services :</h4>
<div class="loading-incoming-shifts">
<i class="fas fa-spinner fa-spin fa-lg"></i>
<div id="calendar_top_info">
<div id="partner_shifts_list">
<h4>Liste de mes services :</h4>
<div class="loading-incoming-shifts">
<i class="fas fa-spinner fa-spin fa-lg"></i>
</div>
<div id="shifts_list"></div>
</div>
<div id="shifts_list"></div>
<div id="calendar_explaination_area"></div>
<button id="calendar_explaination_button" class="btn--success">Légende du calendrier</button>
</div>
<div class="loading-calendar">
<i class="fas fa-spinner fa-spin fa-2x"></i>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment