tabs on overview page

la_chariotte/order/templates/order/grouped_order_overview.html

@@ -39,7 +39,30 @@
     </div>
   </div>
 
-  <div class="box">
+  <div class="tabs is-toggle is-centered">
+    <ul>
+      <li>
+        <a id="resume-opener" class="is-active tablinks" onclick="openTab('resume')">
+          <span class="is-hidden-desktop">Résumé</span>
+          <span class="is-hidden-touch">Résumé de la commande</span>
+        </a>
+      </li>
+      <li>
+        <a id="commandes-opener" class="tablinks" onclick="openTab('commandes')">
+          <span class="is-hidden-desktop">Commandes</span>
+          <span class="is-hidden-touch">Liste des commandes</span>
+        </a>
+      </li>
+      <li>
+        <a id="partager-opener" class="tablinks" onclick="openTab('partager')">
+          <span class="is-hidden-desktop">Partager</span>
+          <span class="is-hidden-touch">Partager et imprimer</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <div id="partager" class="box tabcontent">
     <p class="title">Partager et imprimer</p>
     <div class="columns">
       <div class="column">
@@ -69,10 +92,8 @@
     </div>
   </div>
 
-  <div class="box">
+  <div id="resume" class="box tabcontent">
-    <a class="button is-primary is-pulled-right" href="{% url 'order:manage_items' grouped_order.pk %}">
+    <a class="button is-primary is-pulled-right" href="{% url 'order:manage_items' grouped_order.pk %}">Gérer les produits</a>
-      <i class="fa fa-list-ul mr-3" aria-hidden="true"></i>Gérer les produits
-    </a>
     <p class="title">Produits commandés</p>
     {% if grouped_order.item_set.all %}
     <table class="table">
@@ -106,7 +127,7 @@
     {% endif %}
   </div>
 
-  <div class="box">
+  <div id="commandes" class="box tabcontent">
     <p class="title">Liste des commandes</p>
     {% if grouped_order.order_set.all %}
     <table class="table">
@@ -140,6 +161,7 @@
 
 <script>
   {% block extra_js %}
+  // Copy grouped order link
   function copyLink() {
     // Get the text field
     var copyText = document.getElementById("shareLink");
@@ -151,5 +173,30 @@
     // Copy the text inside the text field
     navigator.clipboard.writeText(copyText.value);
   }
+
+  // Tabs
+  function openTab(idToOpen) {
+    // Declare all variables
+    var i, tabcontent, tablinks;
+
+    // Get all elements with class="tabcontent" and hide them
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+      tabcontent[i].style.display = "none";
+    }
+
+    // Get all elements with class="tablinks" and remove the class "active"
+    tablinks = document.getElementsByClassName("tablinks");
+    for (i = 0; i < tablinks.length; i++) {
+      tablinks[i].parentNode.classList.remove("is-active");
+    }
+
+    // Show the current tab, and add an "is-active" class to the button that opened the tab
+    document.getElementById(idToOpen).style.display = "block";
+    document.getElementById(idToOpen+"-opener").parentNode.classList.add("is-active");
+  }
+
+  // Open by default the "resume" tab at first
+  openTab("resume");
   {% endblock %}
 </script>

la_chariotte/static/css/app.css

@@ -10414,3 +10414,12 @@ p.mobile-content-title {
   font-size: 0.8rem;
   margin-bottom: 0px !important;
 }
+
+.tabcontent {
+  display: none;
+}
+
+.tabs.is-toggle li.is-active a {
+  background-color: #A52951;
+  border-color: #A52951;
+}

la_chariotte/static/sass/base/_tabs.sass

@@ -0,0 +1,6 @@
+.tabcontent
+    display: none
+
+.tabs.is-toggle li.is-active a
+    background-color: $primary
+    border-color: $primary

la_chariotte/static/sass/style.sass

@@ -15,3 +15,4 @@
 @import "./base/form"
 @import "./base/table"
 @import "./base/titles"
+@import "./base/tabs"