menu modes presque ok

background.js

@@ -28,12 +28,14 @@ grained('#grain-bg', {
 
 let pageAmount = 0;
 let currentPage = 1, prevPage;
+let currentProfondeur = "atlas";
 
 document.querySelectorAll('.mode').forEach(function(node, index) {
     pageAmount++;
     node.addEventListener('click', function() {
         document.querySelectorAll('.active').forEach(function(el) {
-            el.classList.remove('active'); 
+            el.classList.remove('active');
+            if (currentProfondeur == "carte") { el.classList.add('collapsed'); }
         });
         node.classList.toggle('active');
         prevPage = currentPage;
@@ -123,4 +125,56 @@ radial-gradient(circle at 93% 95%,
 radial-gradient(circle at 73% 10%,
     hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
     rgba(255, 255, 255, 0) 100%)
-`;
+`;
+
+// menu
+function toggleProfondeur(el) {
+    if (el.classList.contains("selected")) {
+        return;
+    } else {
+        for (let sibling of el.parentNode.children) {
+            sibling.classList.remove('selected');
+        }
+    }
+    el.classList.add("selected");
+    if(el.innerHTML == "L'atlas") {
+        currentProfondeur = "atlas";
+        document.querySelectorAll('.mode').forEach(function(node) {
+            if(node.classList.contains("collapsed")) {
+                node.classList.remove("collapsed");
+            }
+        });
+    } else {
+        currentProfondeur = "carte";
+        document.querySelectorAll('.mode').forEach(function(node) {
+            if(!node.classList.contains("active")) {
+                node.classList.add("collapsed");
+            }
+        });
+    }
+}
+
+
+// toggle changement de couleur de fond (faire une fonction propr)
+// et variable globale du mode dans lequel on est
+// loop avec les flèches
+
+function toggleMode(direction) {
+    let modes = [];
+    let currentIndex;
+    document.querySelectorAll('.mode').forEach(function(node, index) {
+        modes.push(node);
+        if (node.classList.contains("active")) {
+            currentIndex = index;
+            node.classList.remove("active");
+            if (currentProfondeur == "carte") {
+                node.classList.add("collapsed");
+            }
+        }
+    });
+    if (direction == "next") {
+        modes[currentIndex + 1].classList.add('active');
+    } else if (direction == "prev") {
+        modes[currentIndex - 1].classList.add('active');
+    }
+}

index.html

@@ -32,38 +32,50 @@
 
         <div id="buttons_container">
             <div class="niveau_profondeur">
-                <p class="selected">L'atlas</p>
-                <p>Les cartes</p>
+                <p class="selected" onclick="toggleProfondeur(this)">L'atlas</p>
+                <p onclick="toggleProfondeur(this)">Les cartes</p>
             </div>
-            <div class="arrow">
+            <div class="arrow" onclick="toggleMode('prev')">
                 <svg data-src="assets/pictos/arrow_back.svg" data-cache="disabled"></svg>
             </div>
             <!-- svg pictos loadés avec svgloader  pour pouvoir les manipuler avec css -->
             <div class="mode active">
                 <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
-                <p>Terrain de vie</p>
+                <div class="mode_container">
+                    <p>Terrain de vie</p>
+                </div>
             </div>
             <div class="mode">
                 <svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
-                <p>Proximité</p>
+                <div class="mode_container">
+                    <p>Proximité</p>
+                </div>
             </div>
             <div class="mode">
                 <svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
-                <p>Superposition</p>
+                <div class="mode_container">
+                    <p>Superposition</p>
+                </div>
             </div>
             <div class="mode">
                 <svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
-                <p>Puissance d'agir</p>
+                <div class="mode_container">
+                    <p>Puissance d'agir</p>
+                </div>
             </div>
             <div class="mode">
                 <svg data-src="assets/pictos/action-2.svg" data-cache="disabled"></svg>
-                <p>Action</p>
+                <div class="mode_container">
+                    <p>Action</p>
+                </div>
             </div>
             <div class="mode">
                 <svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
-                <p>Doléancer</p>
+                <div class="mode_container">
+                    <p>Doléancer</p>
+                </div>
             </div>
-            <div class="arrow">
+            <div class="arrow" onclick="toggleMode('next')">
                 <svg data-src="assets/pictos/arrow_forward.svg" data-cache="disabled"></svg>
             </div>
 

styles.css

@@ -148,24 +148,21 @@ body {
 #buttons_container .mode {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-around;
   background-color: white;
   margin: 0;
   margin-right: 14px;
-  padding: 7px 15px;
-  padding-left: 10px;
+  padding: 10px 12px;
   border-radius: 50px;
   cursor: pointer;
   border: solid 0.8px rgb(110, 110, 110);
   color: rgba(0, 0, 0, 0.5);
-  transition: border 0.1s ease-out, color 0.1s ease-out;
+  transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
   font-weight: 300;
   font-size: 1rem;
 }
 #buttons_container .mode svg {
-  width: 28px;
-  height: auto;
-  margin-right: 10px;
+  height: 28px;
 }
 #buttons_container .mode svg .thick {
   transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
@@ -180,11 +177,22 @@ body {
 #buttons_container .mode svg .circle-fill {
   fill: rgb(110, 110, 110);
 }
-#buttons_container .mode p {
+#buttons_container .mode .mode_container {
+  overflow: hidden;
+  width: auto;
+  transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
+  max-width: 0px;
+  margin-left: 10px;
+  margin-right: 5px;
+  max-width: 200px;
+}
+#buttons_container .mode .mode_container p {
+  white-space: nowrap;
   height: fit-content;
   margin-bottom: 3px;
 }
 #buttons_container .mode.active {
+  padding: 10px 12px !important;
   font-weight: 400;
   border: solid 1.2px rgb(0, 0, 0);
   color: rgb(0, 0, 0);
@@ -200,7 +208,13 @@ body {
 #buttons_container .mode.active svg .circle-fill {
   fill: rgb(0, 0, 0);
 }
+#buttons_container .mode.active .mode_container {
+  max-width: 200px !important;
+  margin-left: 10px !important;
+  margin-right: 5px !important;
+}
 #buttons_container .mode:hover {
+  padding: 10px 12px !important;
   color: rgb(50, 50, 50);
   border-color: rgb(50, 50, 50);
 }
@@ -210,6 +224,19 @@ body {
 #buttons_container .mode:hover svg .circle-fill {
   fill: rgb(50, 50, 50);
 }
+#buttons_container .mode:hover .mode_container {
+  max-width: 200px !important;
+  margin-left: 10px !important;
+  margin-right: 5px !important;
+}
+#buttons_container .mode.collapsed {
+  padding: 10px 7px;
+}
+#buttons_container .mode.collapsed .mode_container {
+  max-width: 0px;
+  margin-left: 0px;
+  margin-right: 0px;
+}
 
 #global_nav {
   position: fixed;
@@ -221,7 +248,7 @@ body {
 #global_nav h1 {
   font-family: "Ortica";
   font-size: 1.7em;
-  margin-bottom: 10px;
+  margin-bottom: 17px;
   margin-left: 5px;
 }
 #global_nav #menu {

styles.scss

@@ -172,23 +172,20 @@ body {
     .mode {
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: space-around;
         background-color: white;
         margin: 0;
         margin-right: 14px;
-        padding: 7px 15px;
-        padding-left: 10px;
+        padding: 10px 12px;
         border-radius: 50px;
         cursor: pointer;
         border: solid 0.8px $grey_inactive;
         color: rgba(0, 0, 0, 0.5);
-        transition: border 0.1s ease-out, color 0.1s ease-out;
+        transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
         font-weight: 300;
         font-size: 1rem;
         svg {
-            width: 28px;
-            height: auto;
-            margin-right: 10px;
+            height: 28px;
             .thick {
                 transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
                 stroke-width: 0.8;
@@ -203,12 +200,23 @@ body {
               fill: $grey_inactive;
             }
         }
-        p {
-            height: fit-content;
-            margin-bottom: 3px;
+        .mode_container {
+            overflow: hidden;
+            width: auto;
+            transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
+            max-width: 0px;
+            margin-left: 10px;
+            margin-right: 5px;
+            max-width: 200px;
+            p {
+                white-space: nowrap;
+                height: fit-content;
+                margin-bottom: 3px;
+            }
         }
     }
     .mode.active {
+        padding: 10px 12px !important;
         font-weight: 400;
         border: solid $buttons_border_width rgba(0, 0, 0, 1);
         color: rgba(0, 0, 0, 1);
@@ -223,8 +231,14 @@ body {
         svg .circle-fill {
           fill: rgba(0, 0, 0, 1);
         }
+        .mode_container {
+            max-width: 200px !important;
+            margin-left: 10px !important;
+            margin-right: 5px !important;
+        }
     }
     .mode:hover {
+        padding: 10px 12px !important;
         color: $grey_hover;
         border-color: $grey_hover;
         svg .thick, svg .thin {
@@ -233,6 +247,19 @@ body {
         svg .circle-fill {
             fill: $grey_hover;
         }
+        .mode_container {
+            max-width: 200px !important;
+            margin-left: 10px !important;
+            margin-right: 5px !important;
+        }
+    }
+    .mode.collapsed {
+        padding: 10px 7px;
+        .mode_container {
+            max-width: 0px;
+            margin-left: 0px;
+            margin-right: 0px;
+        }
     }
 }
 
@@ -245,7 +272,7 @@ body {
     h1 {
         font-family: 'Ortica';
         font-size: 1.7em;
-        margin-bottom: 10px;
+        margin-bottom: 17px;
         margin-left: 5px;
     }
     #menu {