From 75a7c5e44e587ea07fde11f3d3310e748faf02cb Mon Sep 17 00:00:00 2001
From: Laetitia Getti <laetitia@hashbang.fr>
Date: Wed, 5 Jul 2023 17:17:06 +0200
Subject: [PATCH] tabs in fullwidth

---
 .../order/grouped_order_overview.html         | 10 ++-------
 la_chariotte/static/css/app.css               | 21 +++++++++++++++++--
 la_chariotte/static/sass/base/_tabs.sass      | 18 ++++++++++++++--
 la_chariotte/static/sass/base/_variables.sass |  1 -
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/la_chariotte/order/templates/order/grouped_order_overview.html b/la_chariotte/order/templates/order/grouped_order_overview.html
index 1d16f53..e55c0d0 100644
--- a/la_chariotte/order/templates/order/grouped_order_overview.html
+++ b/la_chariotte/order/templates/order/grouped_order_overview.html
@@ -42,7 +42,7 @@
     </div>
   </div>
 
-  <div class="tabs is-toggle is-centered">
+  <div class="tabs is-toggle is-centered is-fullwidth">
     <ul>
       <li>
         <a id="resume-opener" class="is-active tablinks" onclick="openTab('resume')">
@@ -162,7 +162,7 @@
           <div class="modal-card ">
             <header class="modal-card-head has-background-info">
               <div class="modal-card-title-container">
-                <p class="modal-card-title">Commande de {{ order.author }} : n°{{ order.id }}</p>
+                <p class="modal-card-title">Commande de {{ order.author }}</p>
               </div>
               <button class="delete" aria-label="close"></button>
             </header>
@@ -198,20 +198,14 @@
   {% block extra_js %}
   // Copy grouped order link
   function copyLink() {
-    // Get the text field
     var copyText = document.getElementById("shareLink");
-  
-    // Select the text field
     copyText.select();
     copyText.setSelectionRange(0, 99999); // For mobile devices
-  
-    // 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
diff --git a/la_chariotte/static/css/app.css b/la_chariotte/static/css/app.css
index 4154d50..d3e6913 100644
--- a/la_chariotte/static/css/app.css
+++ b/la_chariotte/static/css/app.css
@@ -10449,7 +10449,24 @@ p.mobile-content-title {
   display: none;
 }
 
-.tabs.is-toggle li.is-active a {
-  background-color: #A52951;
+.tabs.is-toggle li a {
   border-color: #A52951;
+  background-color: #A52951;
+  color: hsl(0, 0%, 100%);
+}
+
+.tabs.is-toggle li a:hover {
+  background-color: #A52951;
+  color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 100%);
+}
+
+.tabs.is-toggle li.is-active a {
+  border-color: #A52951 !important;
+  background-color: hsl(0, 0%, 100%);
+  color: #A52951;
+}
+
+.tabs > ul {
+  margin-left: 0;
 }
diff --git a/la_chariotte/static/sass/base/_tabs.sass b/la_chariotte/static/sass/base/_tabs.sass
index bc3f9ca..0762e72 100644
--- a/la_chariotte/static/sass/base/_tabs.sass
+++ b/la_chariotte/static/sass/base/_tabs.sass
@@ -1,6 +1,20 @@
 .tabcontent
     display: none
 
-.tabs.is-toggle li.is-active a
-    background-color: $primary
+.tabs.is-toggle li a
     border-color: $primary
+    background-color: $primary
+    color: $white
+
+.tabs.is-toggle li a:hover
+    background-color: $primary
+    color: $white
+    border-color: $white
+
+.tabs.is-toggle li.is-active a
+    border-color: $primary !important
+    background-color: $white
+    color: $primary
+    
+.tabs > ul
+    margin-left: 0
\ No newline at end of file
diff --git a/la_chariotte/static/sass/base/_variables.sass b/la_chariotte/static/sass/base/_variables.sass
index 903df73..755ff1e 100644
--- a/la_chariotte/static/sass/base/_variables.sass
+++ b/la_chariotte/static/sass/base/_variables.sass
@@ -7,7 +7,6 @@ $grey-text: #7a7a7a
 $primary: $betterave
 $info: $beige
 $text: $bright-black
-$grey-text: #7a7a7a
 
 // Navbar
 $side-nav-width: 220px