calendar legend

members_space/static/css/members-space-shifts-exchange.css

@@ -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 {
@@ -120,3 +136,34 @@
 .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

members_space/static/js/members-space-shifts-exchange.js

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

templates/members_space/index.html

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

templates/members_space/shifts_exchange.html

@@ -19,6 +19,7 @@
             <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="calendar_top_info">
             <div id="partner_shifts_list">
                 <h4>Liste de mes services :</h4>
                 <div class="loading-incoming-shifts">
@@ -26,6 +27,9 @@
                 </div>
                 <div id="shifts_list"></div>
             </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>
         </div>