From 87f3515e3c23ac3a7677d221d70518063544fb05 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Fri, 5 Feb 2021 17:36:10 +0100
Subject: [PATCH] =?UTF-8?q?On=20rajoute=20un=20menu=20d=C3=A9roulant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fiches/static/fiches/css/annuaire.css  | 30 +++++++++++++++++++++++-
 fiches/static/fiches/scss/_common.scss | 32 +++++++++++++++++++++++++-
 fiches/static/fiches/scss/_footer.scss |  2 +-
 fiches/static/fiches/scss/_header.scss | 10 ++++++++
 fiches/templates/fiches/base.html      | 24 +++++++++++++++----
 5 files changed, 90 insertions(+), 8 deletions(-)

diff --git a/fiches/static/fiches/css/annuaire.css b/fiches/static/fiches/css/annuaire.css
index b1c4783..13eda0d 100644
--- a/fiches/static/fiches/css/annuaire.css
+++ b/fiches/static/fiches/css/annuaire.css
@@ -51,6 +51,15 @@ a:focus,
   grid-template-rows: auto auto auto auto 120px;
   grid-template-areas: "title" "language" "search" "menu" "account";
 }
+#menu #hamburger {
+  display: none;
+  grid-area: hamburger;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS1VaHOwg4pChOlkoKuKoVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEzc1J0UVK/F9SaBHjwXE/3t173L0DhGaVqWZPHFA1y8gkE2IuvyoGXyEggD6EEZeYqc+l0yl4jq97+Ph6F+NZ3uf+HGGlYDLAJxLPMt2wiDeIpzctnfM+cYSVJYX4nHjcoAsSP3JddvmNc8lhgWdGjGxmnjhCLJa6WO5iVjZU4iniqKJqlC/kXFY4b3FWq3XWvid/YaigrSxzneYIkljEEtIQIaOOCqqwEKNVI8VEhvYTHv5hx58ml0yuChg5FlCDCsnxg//B727N4uSEmxRKAIEX2/4YBYK7QKth29/Htt06AfzPwJXW8deawMwn6Y2OFj0CBraBi+uOJu8BlzvA0JMuGZIj+WkKxSLwfkbflAcGb4H+Nbe39j5OH4AsdZW6AQ4OgbESZa97vLu3u7d/z7T7+wEsq3KLN3ZkxAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAADNJREFUWMPt1EERAEAIA7Ee/h0hjpPBg0RBp49NrnvTmc0Btf2AARVAipVQikGKpdgArvsZZAhH7c55ywAAAABJRU5ErkJggg==");
+  height: 30px;
+  width: 30px;
+  float: right;
+  margin-top: 20px;
+}
 
 #title {
   grid-area: title;
@@ -535,8 +544,9 @@ body {
   z-index: 5;
 }
 
-@media only screen and (max-width: 900px) {
+@media screen and (max-width: 900px), (orientation: portrait) {
   body {
+    grid-template-rows: max-content auto;
     grid-template-areas: "aside" "main";
   }
 
@@ -552,9 +562,27 @@ body {
     width: auto;
   }
 
+  #content-home form input[type=submit] {
+    grid-column: 1/3;
+  }
+
+  #footer,
+.content {
+    max-width: 100%;
+  }
+
   #menu {
     width: auto;
     float: none;
+    grid-template-columns: auto 50px;
+    grid-template-areas: "title hamburger" "language language" "search search" "menu menu" "account account";
+  }
+  #menu #hamburger {
+    display: grid;
+  }
+  #menu #main-menu,
+#menu #account-area {
+    display: none;
   }
 
   #search-area {
diff --git a/fiches/static/fiches/scss/_common.scss b/fiches/static/fiches/scss/_common.scss
index 5471ad0..e011dde 100644
--- a/fiches/static/fiches/scss/_common.scss
+++ b/fiches/static/fiches/scss/_common.scss
@@ -42,8 +42,9 @@ body {
 }
 
 // Pour les vues mobile
-@media only screen and (max-width: 900px) {
+@media screen and (max-width: 900px), (orientation: portrait) {
   body {
+    grid-template-rows: max-content auto;
     grid-template-areas:
         "aside"
         "main";
@@ -61,9 +62,38 @@ body {
     width: auto;
   }
 
+  #content-home {
+    form {
+      input[type="submit"] {
+        grid-column: 1/3;
+      }
+    }
+  }
+
+  #footer,
+  .content {
+    max-width: 100%;
+  }
+
   #menu {
     width: auto;
     float: none;
+    grid-template-columns: auto 50px;
+    grid-template-areas:
+      "title hamburger"
+      "language language"
+      "search search"
+      "menu menu"
+      "account account";
+
+    #hamburger {
+      display: grid;
+    }
+
+    #main-menu,
+    #account-area {
+      display: none;
+    }
   }
 
   #search-area {
diff --git a/fiches/static/fiches/scss/_footer.scss b/fiches/static/fiches/scss/_footer.scss
index 7c6513a..08eaffb 100644
--- a/fiches/static/fiches/scss/_footer.scss
+++ b/fiches/static/fiches/scss/_footer.scss
@@ -5,7 +5,7 @@
     padding: 20px;
     color: colors.$page-text-secondary;
     text-align: center;
-    
+
     .thanks {
         display: block;
         text-align: center;
diff --git a/fiches/static/fiches/scss/_header.scss b/fiches/static/fiches/scss/_header.scss
index d701a21..efc8e01 100644
--- a/fiches/static/fiches/scss/_header.scss
+++ b/fiches/static/fiches/scss/_header.scss
@@ -19,6 +19,16 @@ $account-area-height: 120px;
         "search"
         "menu"
         "account";
+
+    #hamburger {
+      display: none;
+      grid-area: hamburger;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS1VaHOwg4pChOlkoKuKoVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEzc1J0UVK/F9SaBHjwXE/3t173L0DhGaVqWZPHFA1y8gkE2IuvyoGXyEggD6EEZeYqc+l0yl4jq97+Ph6F+NZ3uf+HGGlYDLAJxLPMt2wiDeIpzctnfM+cYSVJYX4nHjcoAsSP3JddvmNc8lhgWdGjGxmnjhCLJa6WO5iVjZU4iniqKJqlC/kXFY4b3FWq3XWvid/YaigrSxzneYIkljEEtIQIaOOCqqwEKNVI8VEhvYTHv5hx58ml0yuChg5FlCDCsnxg//B727N4uSEmxRKAIEX2/4YBYK7QKth29/Htt06AfzPwJXW8deawMwn6Y2OFj0CBraBi+uOJu8BlzvA0JMuGZIj+WkKxSLwfkbflAcGb4H+Nbe39j5OH4AsdZW6AQ4OgbESZa97vLu3u7d/z7T7+wEsq3KLN3ZkxAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAADNJREFUWMPt1EERAEAIA7Ee/h0hjpPBg0RBp49NrnvTmc0Btf2AARVAipVQikGKpdgArvsZZAhH7c55ywAAAABJRU5ErkJggg==');
+      height: 30px;
+      width: 30px;
+      float: right;
+      margin-top: 20px;
+    }
 }
 
 #title {
diff --git a/fiches/templates/fiches/base.html b/fiches/templates/fiches/base.html
index fbb4a95..6bdd893 100644
--- a/fiches/templates/fiches/base.html
+++ b/fiches/templates/fiches/base.html
@@ -17,6 +17,11 @@
 <body>
   <div id="aside">
     <div id="menu">
+      <h1 id="title">
+        {% block title %} <a href='{% url "home" %}'>{% trans "Annuaire des élèves de l'ENS" %}</a>{% endblock %}
+      </h1>
+      <a id="hamburger" href="javascript:void(0);" onclick="toggleMenu()"></a>
+
       <div id="language_switch">
         <form action="{% url 'set_language' %}" method="post">
           {% csrf_token %}
@@ -32,11 +37,6 @@
         <button type="submit">{% trans "Rechercher" %}</button>
       </form>
 
-      <h1 id="title">
-        {% block title %} <a href='{% url "home" %}'>{% trans "Annuaire des élèves de l'ENS" %}</a>{% endblock %}
-      </h1>
-
-
       <div id="main-menu">
         <nav>
           <a href='{% url "home" %}'>{% trans "Accueil" %}</a>
@@ -78,6 +78,20 @@
       {% endblock %}
     </div>
   </div>
+  <script>
+    function toggleMenu() {
+      var menu = document.getElementById("main-menu");
+      var account = document.getElementById("account-area");
+      if (menu.style.display === "none") {
+        menu.style.display = "grid"
+        account.style.display = "grid"
+      } else {
+        menu.style.display = "none"
+        account.style.display = "none"
+      }
+    }
+
+  </script>
   {% block extra_js %}{% endblock %}
 </body>