update faq styles

members_space/static/css/members-space-faq.css

@@ -2,6 +2,13 @@
     font-size: 1.8rem;
 }
 
+#faqBDM .block {
+    width: 100%;
+}
+
+.info_slots_shifts {
+    margin: 2rem 0;
+}
 
 .grp_text{
     margin-top: 25px;
@@ -73,8 +80,15 @@ button.accordion.active::after {
 }
 
 .faq_link_button {
-   
-    /* margin: 30px auto auto auto; */
     white-space: normal;
     border-radius: 5px;
 }
+
+.faq_link_button:hover {
+    color: #fff;
+    text-decoration: none;
+}
+
+.faq_intro_texts {
+    margin-bottom: 30px;
+}
\ No newline at end of file

members_space/static/js/members-space-faq.js

@@ -33,4 +33,8 @@ $(document).on('click', '.accordion', function() {
     } else {
         panel.style.display = "block";
     }
+
+    $("#shift_exchange_btn").on("click", () => {
+        goto('echange-de-services');
+    })
 });
\ No newline at end of file

members_space/static/js/members-space-header.js

@@ -36,9 +36,9 @@ $(document).ready(function() {
         }
         toggleHeader();
     });
-    $('#faqBDM').on('click', (e) => {
+    $('#nav_faq').on('click', (e) => {
         e.preventDefault();
-        if (current_location !== "faqBDM") {
+        if (current_location !== "faq") {
             goto('faq');
         }
         toggleHeader();

members_space/static/js/members-space.js

@@ -89,9 +89,9 @@ function update_dom() {
         $("#main_content").load("/members_space/my_shifts", update_content);
         $("#nav_my_shifts").addClass("active");
     } else if (window.location.pathname === base_location + "faq") {
-        current_location = "faqBDM";
+        current_location = "faq";
         $("#main_content").load("/members_space/faqBDM", update_content);
-        $("#faqBDM").addClass("active");
+        $("#nav_faq").addClass("active");
     } else if (window.location.pathname === base_location + "echange-de-services") {
         current_location = "shifts_exchange";
         $("#main_content").load("/members_space/shifts_exchange", update_content);

templates/members_space/faq.html

@@ -3,15 +3,16 @@
 
   <div class="page_title txtcenter">
     <h1>
-      Je rencontre un problème ou j'ai une demande concernant mon statut de membre
+      J'ai un problème ou une demande
     </h1>
   </div>
   
   <div class="tiles_container">
     <div class="tile full_width_tile">
-      <div class ="tile_content">
+      <div class="tile_content">
         <div class="block">
-          <h3>
+          <div class="faq_intro_texts">
+              <p>Je rencontre un problème ou j'ai une demande concernant mon statut de membre :</p>
               <ul>
                 <li>
                   Je clique sur l'onglet qui correspond à ma demande puis je remplis le formulaire adéquat.
@@ -21,13 +22,16 @@
                 </li>
               </ul>
               
-            ATTENTION : Créneau/service c'est quoi la différence? <br/>
-            Un créneau, c'est une plage récurrente, par exemple, tous les jeudi de semaine A de 13h30 à 16h30.<br/>
-            Un service, c'est une plage horaire en particulier, par exemple le jeudi 28 novembre de 13h30 à 16h30.<br/>
-          </h3>
+              <div class="info_slots_shifts">
+                <p><i class="fas fa-exclamation-circle"></i> Créneau/service c'est quoi la différence?</p> 
+                <p>Un créneau, c'est une plage récurrente, par exemple, tous les jeudi de semaine A de 13h30 à 16h30.</p> 
+                <p>Un service, c'est une plage horaire en particulier, par exemple le jeudi 28 novembre de 13h30 à 16h30.</p> 
+              </div>
+          </div>
+          
           <div class="param">
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >000 Gestion de mon créneau: réinscription, changement, désinscription temporaire (absence de moyenne ou longue durée)</p >
+              <span class="full_width">000 Gestion de mon créneau: réinscription, changement, désinscription temporaire (absence de moyenne ou longue durée)</span>
             </button>
             <div class="input-container panel">
               
@@ -98,7 +102,7 @@
               </div>
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >001 Gestion de mes services: échanger son service, arrivé.e en retard à son service, demande de congés maladie ou parental</p >
+              <span class="full_width" >001 Gestion de mes services: échanger son service, arrivé.e en retard à son service, demande de congés maladie ou parental</span>
             </button>
             <div class="input-container panel">
               
@@ -119,12 +123,12 @@
                 </p>
                 <div class="faq_link_button_area">
                   <a
-                    href="https://lacagette-coop.fr/?CompteurPoints?usp=sf_link"
-                    target="_blank"
+                    href="javascript:void(0);"
                     type="button" 
                     class="btn--primary faq_link_button" 
+                    id="shift_exchange_btn"
                   >
-                    Mes services et mes points
+                    Échange de services
                   </a>
                 </div>
               </div>
@@ -183,7 +187,7 @@
               </div>
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width">002 Mon statut: Je suis suspendu.e ou désinscrit.e et je ne peux pas faire mes courses</p >
+              <span class="full_width">002 Mon statut: Je suis suspendu.e ou désinscrit.e et je ne peux pas faire mes courses</span>
             </button>
             <div class="input-container panel">
               
@@ -246,7 +250,7 @@
               
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >003 Mon binôme: créer un binôme, se désolidariser de son binôme, changer de binôme</p >
+              <span class="full_width" >003 Mon binôme: créer un binôme, se désolidariser de son binôme, changer de binôme</span>
             </button>
             <div class="input-container panel">
               
@@ -299,7 +303,7 @@
               </div>              
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >004 Spécial Covid: Tu as la Covid ou tu es cas contact, fin d'exemption Covid</p >
+              <span class="full_width" >004 Spécial Covid: Tu as la Covid ou tu es cas contact, fin d'exemption Covid</span>
             </button>
             <div class="input-container panel">
               
@@ -353,7 +357,7 @@
                         
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >005 Je veux que mes enfants puissent faire les courses à ma place</p >
+              <span class="full_width" >005 Je veux que mes enfants puissent faire les courses à ma place</span>
             </button>
             <div class="input-container panel">
               
@@ -379,7 +383,7 @@
               </div> 
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >006 Je veux changer d'adresse mail</p >
+              <span class="full_width" >006 Je veux changer d'adresse mail</span>
             </button>
             <div class="input-container panel">
               
@@ -407,7 +411,7 @@
               </div> 
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >007 Je veux quitter la coopérative</p >
+              <span class="full_width" >007 Je veux quitter la coopérative</span>
             </button>
             <div class="input-container panel">
               
@@ -447,7 +451,7 @@
               </div> 
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >008 Brigade Solidaire: s'inscrire ou se désinscrire de la brigade </p >
+              <span class="full_width" >008 Brigade Solidaire: s'inscrire ou se désinscrire de la brigade </span>
             </button>
             <div class="input-container panel">
               
@@ -487,7 +491,7 @@
               </div> 
             </div>
             <button type="button" class="accordion btn_faq">
-              <p class="full_width" >009 Faire un autre demande au BDM: seulement si les autres formulaires ne correspondent pas à ma demande </p >
+              <span class="full_width" >009 Faire une autre demande au BDM: seulement si les autres formulaires ne correspondent pas à ma demande </span>
             </button>
             <div class="input-container panel">
               

templates/members_space/header.html

@@ -6,10 +6,11 @@
     
 {% block content %}
     <div class="topnav" id="topnav">
-        <a href="#" class="nav_item active" id="nav_home">Espace Membre</a>
-        <a href="#" class="nav_item" id="nav_my_info">Mes Infos</a>
-        <a href="#" class="nav_item" id="nav_my_shifts">Mes Services</a>
-        <a href="#" class="nav_item" id="nav_shifts_exchange">Échange de services</a>
+        <a href="javascript:void(0);" class="nav_item active" id="nav_home">Espace Membre</a>
+        <a href="javascript:void(0);" class="nav_item" id="nav_my_info">Mes Infos</a>
+        <a href="javascript:void(0);" class="nav_item" id="nav_my_shifts">Mes Services</a>
+        <a href="javascript:void(0);" class="nav_item" id="nav_shifts_exchange">Échange de services</a>
+        <a href="javascript:void(0);" class="nav_item" id="nav_faq">Problèmes & Demandes</a>
 
         <a 
             href="javascript:void(0);"
@@ -19,7 +20,6 @@
         >
             Calendrier ABCD
         </a>
-        <a href="#" class="nav_item" id="faqBDM">FAQ</a>
 
         {# Disconnection button must have this id (logic in all_common.js) #}
         <a href="javascript:void(0);" id="deconnect">Déconnexion</a>