From a198f5252d3013b0469bc4480d7e3a3254a8958d Mon Sep 17 00:00:00 2001
From: Julien Constant <49886317+Juknum@users.noreply.github.com>
Date: Wed, 5 Apr 2023 18:03:43 +0200
Subject: [PATCH] =?UTF-8?q?Fixes=20&=20am=C3=A9liorations=20du=20nouveau?=
 =?UTF-8?q?=20CSS=20(#616)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/static/core/header.scss   |  71 +++++++-----
 core/static/core/navbar.scss   | 194 +++++++++++++++++++--------------
 core/templates/core/base.jinja | 102 +++++++++--------
 3 files changed, 211 insertions(+), 156 deletions(-)

diff --git a/core/static/core/header.scss b/core/static/core/header.scss
index dea1aab4..5c90e319 100644
--- a/core/static/core/header.scss
+++ b/core/static/core/header.scss
@@ -1,6 +1,15 @@
+$hovered-text-color: #c2c2c2;
+$text-color: white;
+
+$background-color: #354a5f;
+$background-color-hovered: #283747;
+
+$red-text-color: #eb2f06;
+$hovered-red-text-color: #ff4d4d;
+
 .header {
   box-sizing: border-box;
-  background-color: #354a5f;
+  background-color: $background-color;
   box-shadow: 3px 3px 3px 0 #dfdfdf;
   border-radius: 0;
   width: 100%;
@@ -24,11 +33,11 @@
     gap: 10px;
 
     >a {
-      color: #fff;
+      color: $text-color;
     }
 
     &:hover>a {
-      color: #1a78b3;
+      color: $hovered-text-color;;
     }
 
     @media (max-width: 607px) {
@@ -51,7 +60,7 @@
     }
 
     &-text {
-      color: white;
+      color: $text-color;
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -89,16 +98,16 @@
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
-        background-color: #354a5f;
+        background-color: $background-color;
         width: 45px;
         height: 25px;
         padding: 0;
-        color: white;
+        color: $text-color;
         font-weight: normal;
         line-height: 1.3em;
 
         &:hover {
-          background-color: #283747;
+          background-color: $background-color-hovered;
         }
       }
     }
@@ -126,13 +135,13 @@
       align-items: center;
       text-transform: uppercase;
       text-decoration: none;
-      color: white;
+      color: $text-color;
       margin: 0;
       font-size: .9em;
       width: 120px;
 
       &:hover {
-        background-color: #283747;
+        background-color: $background-color-hovered;
       }
     }
   }
@@ -198,30 +207,34 @@
 
         > a {
           display: block;
-          width: 40px;
+          min-width: 40px;
           height: 40px;
           border-radius: 50%;
           background-position: center center;
           background-size: cover;
           background-repeat: no-repeat;
-          background-color: #354a5f;
+          background-color: $background-color;
         }
 
         >.options {
           display: flex;
           flex-direction: column;
-          gap: 2px;
+          gap: 5px;
 
           >.username {
             display: flex;
             justify-content: flex-end;
             gap: 5px;
 
+            @media (max-width: 500px) {
+              justify-content: flex-start;
+            }
+
             >a {
-              color: white;
+              color: $text-color;
 
               &:hover {
-                color: #1a78b3;
+                color: $hovered-text-color;
               }
             }
           }
@@ -230,7 +243,7 @@
             width: 100%;
             display: flex;
             justify-content: flex-end;
-            gap: 5px;
+            gap: 15px;
 
             @media (max-width: 1200px) {
               justify-content: flex-start;
@@ -238,17 +251,17 @@
 
             >a {
               text-align: right;
-              color: white;
+              color: $text-color;
 
               &:hover {
-                color: #1a78b3;
+                color: $hovered-text-color;
               }
 
               &:last-child {
-                color: #eb2f06;
+                color: $red-text-color;
 
                 &:hover {
-                  color: #cc2804;
+                  color: $hovered-red-text-color;
                 }
               }
             }
@@ -265,16 +278,16 @@
         position: relative;
 
         >a {
-          color: white;
+          color: $text-color;
           position: relative;
           font-size: 25px;
 
           &:hover {
-            color: #1a78b3;
+            color: $hovered-text-color;
           }
 
           >span {
-            color: white;
+            color: $text-color;
             font-size: 14px;
             display: flex;
             justify-content: center;
@@ -282,7 +295,7 @@
             width: 10px;
             height: 10px;
             padding: 5px;
-            background-color: #eb2f06;
+            background-color: $red-text-color;
             border-radius: 50%;
             position: absolute;
             top: -50%;
@@ -388,9 +401,13 @@
           border-radius: 5px;
           font-size: .9em;
           margin: 0;
-          background-color: #283747;
+          background-color: $background-color-hovered;
           padding: 0 10px;
-          color: white;
+          color: $text-color;
+
+          &::placeholder {
+            color: $hovered-text-color;
+          }
         }
       }
     }
@@ -418,10 +435,10 @@
 
   >li>a {
     display: flex;
-    color: white;
+    color: $text-color;
 
     &:hover {
-      color: #1a78b3;
+      color: $hovered-text-color;
     }
 
     >span {
diff --git a/core/static/core/navbar.scss b/core/static/core/navbar.scss
index 2eede6c0..6566c9e5 100644
--- a/core/static/core/navbar.scss
+++ b/core/static/core/navbar.scss
@@ -1,13 +1,9 @@
 nav.navbar {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
   background-color: hsl(203, 75%, 40%);
   margin: 1em;
   color: white;
   border-radius: 0.6em;
+  min-height: 40px;
 
   @media (max-width: 500px) {
     position: relative;
@@ -17,94 +13,126 @@ nav.navbar {
     margin: .2em;
   }
 
-  > .menu,
-  > .link {
-    box-sizing: border-box;
-    width: 130px;
-    height: 52px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    @media (max-width: 500px) {
-      width: 100%;
-      height: auto;
-      justify-content: flex-start;
-
-      &:first-child {
-        border-radius: .6em .6em 0 0;
-      }
-
-      &:last-child {
-        border-radius: 0 0 .6em .6em;
-
-        > .content {
-          box-shadow: 3px 3px 3px 0 #dfdfdf;
-        }
-      }
-    }
-  }
-
-  > .menu > .head,
-  > .link {
-    color: white;
-    padding: 10px 20px;
-    box-sizing: border-box;
-
-    @media (max-width: 500px) {
-      padding: 10px;
-    }
-  }
-
-  .link:hover,
-  .menu:hover {
-    background-color: rgba(0, 0, 0, .2);
-  }
-
-  > .menu:hover > .content,
-  > .menu > .head:hover + .content,
-  > .menu > .content:hover {
-    display: flex;
-  }
-
-  > .menu {
-    display: flex;
+  > .expand-button {
+    background-color: transparent;
+    display: none;
     position: relative;
+    padding: 10px;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
 
-    > .content {
-      z-index: 10;
-      display: none;
-      position: absolute;
-      top: 100%;
-      background-color: white;
-      margin: 0;
-      list-style-type: none;
+    > i {
+      font-size: 1.5em;
+      color: white;
+    }
+
+    @media (max-width: 500px) {
+      display: flex;
+    }
+  }
+
+  > .content {
+    @media (min-width: 500px) {display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      display: flex !important;
+    }
+
+    > .menu,
+    > .link {
+      box-sizing: border-box;
       width: 130px;
-      box-shadow: 3px 3px 3px 0 #dfdfdf;
-      flex-direction: column;
+      height: 52px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
 
       @media (max-width: 500px) {
-        position: absolute;
-        flex-direction: row;
-        flex-wrap: wrap;
         width: 100%;
-        box-shadow: inset 3px 3px 3px 0 #dfdfdf;
-      }
+        height: auto;
+        justify-content: flex-start;
 
-      > li > a {
-        display: flex;
-        padding: 15px 20px;
-
-        @media (max-width: 500px) {
-          padding: 10px;
+        &:first-child {
+          border-radius: .6em .6em 0 0;
         }
 
-        &:hover {
-          color: hsl(203, 75%, 40%);
-          background-color: rgba(0, 0, 0, .05);
+        &:last-child {
+          border-radius: 0 0 .6em .6em;
+
+          > .content {
+            box-shadow: 3px 3px 3px 0 #dfdfdf;
+          }
         }
       }
     }
-  }
+
+    > .menu > .head,
+    > .link {
+      color: white;
+      padding: 10px 20px;
+      box-sizing: border-box;
+
+      @media (max-width: 500px) {
+        padding: 10px;
+      }
+    }
+
+    .link:hover,
+    .menu:hover {
+      background-color: rgba(0, 0, 0, .2);
+    }
+
+    > .menu:hover > .content,
+    > .menu > .head:hover + .content,
+    > .menu > .content:hover {
+      display: flex;
+    }
+
+    > .menu {
+      display: flex;
+      position: relative;
+
+      > .content {
+        z-index: 10;
+        display: none;
+        position: absolute;
+        top: 100%;
+        background-color: white;
+        margin: 0;
+        list-style-type: none;
+        width: 130px;
+        box-shadow: 3px 3px 3px 0 #dfdfdf;
+        flex-direction: column;
+
+        @media (max-width: 500px) {
+          position: absolute;
+          flex-direction: row;
+          flex-wrap: wrap;
+          width: 100%;
+          box-shadow: inset 3px 3px 3px 0 #dfdfdf;
+        }
+
+        > li > a {
+          display: flex;
+          padding: 15px 20px;
+
+          @media (max-width: 500px) {
+            padding: 10px;
+          }
+
+          &:hover {
+            color: hsl(203, 75%, 40%);
+            background-color: rgba(0, 0, 0, .05);
+          }
+        }
+      }
+    }
+  }  
 }
\ No newline at end of file
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 79e15d8b..bc93d967 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -196,52 +196,55 @@
         {% block nav %}
             {% if not popup %}
                 <nav class="navbar">
-                    <a class="link" href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
-                    <div class="menu">
-                        <span class="head">{% trans %}Associations & Clubs{% endtrans %}</span>
-                        <ul class="content">
-                            <li><a href="{{ url('core:page', page_name='ae') }}">{% trans %}AE{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='clubs') }}">{% trans %}AE's clubs{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='bdf') }}">{% trans %}BdF{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='bds') }}">{% trans %}BDS{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='cetu') }}">{% trans %}CETU{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='clubs/doceo') }}">{% trans %}Doceo{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='positions') }}">{% trans %}Positions{% endtrans %}</a></li>
-                        </ul>
-                    </div>
-                    <div class="menu">
-                        <span class="head">{% trans %}Events{% endtrans %}</span>
-                        <ul class="content">
-                            <li><a href="{{ url('election:list') }}">{% trans %}Elections{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='ga') }}">{% trans %}Big event{% endtrans %}</a></li>
-                        </ul>
-                    </div>
-                    <a class="link" href="{{ url('forum:main') }}">{% trans %}Forum{% endtrans %}</a>
-                    <a class="link" href="{{ url('sas:main') }}">{% trans %}Gallery{% endtrans %}</a>
-                    <a class="link" href="{{ url('eboutic:main') }}">{% trans %}Eboutic{% endtrans %}</a>
-                    <div class="menu">
-                        <span class="head">{% trans %}Services{% endtrans %}</span>
-                        <ul class="content">
-                            <li><a href="{{ url('matmat:search_clear') }}">{% trans %}Matmatronch{% endtrans %}</a></li>
-                            <li><a href="/launderette">{% trans %}Launderette{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a></li>
-                            <li><a href="{{ url('pedagogy:guide') }}">{% trans %}Pedagogy{% endtrans %}</a></li>
-                        </ul>
-                    </div>
-                    <div class="menu">
-                        <span class="head">{% trans %}My Benefits{% endtrans %}</span>
-                        <ul class="content">
-                            <li><a href="{{ url('core:page', page_name='partenaires')}}">{% trans %}Sponsors{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='avantages') }}">{% trans %}Subscriber benefits{% endtrans %}</a></li>
-                        </ul>
-                    </div>
-                    <div class="menu">
-                        <span class="head">{% trans %}Help{% endtrans %}</span>
-                        <ul class="content">
-                            <li><a href="{{ url('core:page', page_name='FAQ') }}">{% trans %}FAQ{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a></li>
-                            <li><a href="{{ url('core:page', page_name='Index') }}">{% trans %}Wiki{% endtrans %}</a></li>
-                        </ul>
+                    <button class="expand-button" onclick="showMenu()"><i class="fa fa-bars"></i></button>
+                    <div id="navbar-content" class="content" style="display: none;">
+                        <a class="link" href="{{ url('core:index') }}">{% trans %}Main{% endtrans %}</a>
+                        <div class="menu">
+                            <span class="head">{% trans %}Associations & Clubs{% endtrans %}</span>
+                            <ul class="content">
+                                <li><a href="{{ url('core:page', page_name='ae') }}">{% trans %}AE{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='clubs') }}">{% trans %}AE's clubs{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='bdf') }}">{% trans %}BdF{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='bds') }}">{% trans %}BDS{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='cetu') }}">{% trans %}CETU{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='clubs/doceo') }}">{% trans %}Doceo{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='positions') }}">{% trans %}Positions{% endtrans %}</a></li>
+                            </ul>
+                        </div>
+                        <div class="menu">
+                            <span class="head">{% trans %}Events{% endtrans %}</span>
+                            <ul class="content">
+                                <li><a href="{{ url('election:list') }}">{% trans %}Elections{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='ga') }}">{% trans %}Big event{% endtrans %}</a></li>
+                            </ul>
+                        </div>
+                        <a class="link" href="{{ url('forum:main') }}">{% trans %}Forum{% endtrans %}</a>
+                        <a class="link" href="{{ url('sas:main') }}">{% trans %}Gallery{% endtrans %}</a>
+                        <a class="link" href="{{ url('eboutic:main') }}">{% trans %}Eboutic{% endtrans %}</a>
+                        <div class="menu">
+                            <span class="head">{% trans %}Services{% endtrans %}</span>
+                            <ul class="content">
+                                <li><a href="{{ url('matmat:search_clear') }}">{% trans %}Matmatronch{% endtrans %}</a></li>
+                                <li><a href="/launderette">{% trans %}Launderette{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:file_list') }}">{% trans %}Files{% endtrans %}</a></li>
+                                <li><a href="{{ url('pedagogy:guide') }}">{% trans %}Pedagogy{% endtrans %}</a></li>
+                            </ul>
+                        </div>
+                        <div class="menu">
+                            <span class="head">{% trans %}My Benefits{% endtrans %}</span>
+                            <ul class="content">
+                                <li><a href="{{ url('core:page', page_name='partenaires')}}">{% trans %}Sponsors{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='avantages') }}">{% trans %}Subscriber benefits{% endtrans %}</a></li>
+                            </ul>
+                        </div>
+                        <div class="menu">
+                            <span class="head">{% trans %}Help{% endtrans %}</span>
+                            <ul class="content">
+                                <li><a href="{{ url('core:page', page_name='FAQ') }}">{% trans %}FAQ{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a></li>
+                                <li><a href="{{ url('core:page', page_name='Index') }}">{% trans %}Wiki{% endtrans %}</a></li>
+                            </ul>
+                        </div>
                     </div>
                 </nav>
             {% endif %}
@@ -308,6 +311,13 @@
         <script src="{{ static('ajax_select/js/ajax_select.js') }}"></script>
         <script src="{{ url('javascript-catalog') }}"></script>
         <script>
+            function showMenu() {
+                let navbar = document.getElementById("navbar-content");
+                const current = navbar.style.getPropertyValue("display");
+                navbar.style.setProperty("display", current == "none" ? "block" : "none");
+            }
+        </script>
+        <script>
 $('.select_date').datepicker({
     changeMonth: true,
     changeYear: true,