From db2d69bc5f4c93fc1e7d6cb54b92d34743343be0 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Sun, 22 Aug 2021 03:52:57 +0200
Subject: [PATCH] Better mobile menu

---
 .../templates/elections/election_admin.html   | 241 +++++++++---------
 shared/templates/base.html                    | 189 ++++++++++----
 2 files changed, 256 insertions(+), 174 deletions(-)

diff --git a/elections/templates/elections/election_admin.html b/elections/templates/elections/election_admin.html
index 59a0065..be173a3 100644
--- a/elections/templates/elections/election_admin.html
+++ b/elections/templates/elections/election_admin.html
@@ -85,142 +85,145 @@
   <div class="level-right">
     {# Visibilité de l'élection #}
     <div class="level-item">
-      {% if not election.visible %}
-      <span class="tag is-medium is-outlined is-warning is-light">
-        <span class="icon">
-          <i class="fas fa-eye-slash"></i>
-        </span>
-        <span>{% trans "Élection invisible" %}</span>
-      </span>
-      {% else %}
-      <span class="tag is-medium is-outlined is-primary is-light">
-        <span class="icon">
-          <i class="fas fa-eye"></i>
-        </span>
-        <span>{% trans "Élection visible" %}</span>
-      </span>
-      {% endif %}
-    </div>
-
-    {# Menu d'actions #}
-    <div class="level-item">
-      <div class="dropdown is-right">
-        <div class="dropdown-trigger">
-          <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
-            <span class="icon-text">
-              <span class="icon">
-                <i class="fas fa-cog" aria-hidden="true"></i>
-              </span>
-              <span>{% trans "Actions" %}</span>
+      <div class="level is-mobile">
+        <div class="level-item">
+          {% if not election.visible %}
+          <span class="tag is-medium is-outlined is-warning is-light">
+            <span class="icon">
+              <i class="fas fa-eye-slash"></i>
             </span>
-          </button>
+            <span>{% trans "Élection invisible" %}</span>
+          </span>
+          {% else %}
+          <span class="tag is-medium is-outlined is-primary is-light">
+            <span class="icon">
+              <i class="fas fa-eye"></i>
+            </span>
+            <span>{% trans "Élection visible" %}</span>
+          </span>
+          {% endif %}
         </div>
 
-        <div class="dropdown-menu" id="dropdown-menu" role="menu">
-          <div class="dropdown-content">
-            {# Vue classique #}
-            <a class="dropdown-item" href="{% url 'election.view' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-exchange-alt"></i>
-              </span>
-              <span>{% trans "Vue classique" %}
-            </a>
+        {# Menu d'actions #}
+        <div class="level-item">
+          <div class="dropdown is-right">
+            <div class="dropdown-trigger">
+              <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+                <span class="icon-text">
+                  <span class="icon">
+                    <i class="fas fa-cog" aria-hidden="true"></i>
+                  </span>
+                  <span>{% trans "Actions" %}</span>
+                </span>
+              </button>
+            </div>
 
-            <hr class="dropdown-divider">
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+              <div class="dropdown-content">
+                {# Vue classique #}
+                <a class="dropdown-item" href="{% url 'election.view' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-exchange-alt"></i>
+                  </span>
+                  <span>{% trans "Vue classique" %}
+                </a>
 
-            {% if not election.visible %}
-            {# Rend l'élection visible par tout le monde #}
-            <a class="dropdown-item" href="{% url 'election.set-visible' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-eye"></i>
-              </span>
-              <span>{% trans "Rendre l'élection visible" %}
-            </a>
-            {% endif %}
+                <hr class="dropdown-divider">
 
-            {# Téléchargement de la liste des votant·e·s #}
-            <a class="dropdown-item" href="{% url 'election.export-voters' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-file-download"></i>
-              </span>
-              <span>{% trans "Exporter les votant·e·s" %}
-            </a>
+                {% if not election.visible %}
+                {# Rend l'élection visible par tout le monde #}
+                <a class="dropdown-item" href="{% url 'election.set-visible' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-eye"></i>
+                  </span>
+                  <span>{% trans "Rendre l'élection visible" %}
+                </a>
+                {% endif %}
 
-            {% if election.start_date > current_time %}
-            {# Modification de l'élection #}
-            <a class="dropdown-item" href="{% url 'election.update' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-edit"></i>
-              </span>
-              <span>{% trans "Modifier" %}</span>
-            </a>
+                {# Téléchargement de la liste des votant·e·s #}
+                <a class="dropdown-item" href="{% url 'election.export-voters' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-file-download"></i>
+                  </span>
+                  <span>{% trans "Exporter les votant·e·s" %}
+                </a>
 
-            {# Gestion des votant·e·s #}
-            {% if election.restricted %}
-            <a class="dropdown-item" href="{% url 'election.upload-voters' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-file-import"></i>
-              </span>
-              <span>{% trans "Gestion de la liste de votant·e·s" %}</span>
-            </a>
-            {% endif %}
+                {% if election.start_date > current_time %}
+                {# Modification de l'élection #}
+                <a class="dropdown-item" href="{% url 'election.update' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-edit"></i>
+                  </span>
+                  <span>{% trans "Modifier" %}</span>
+                </a>
 
-            {% elif election.end_date < current_time %}
+                {# Gestion des votant·e·s #}
+                {% if election.restricted %}
+                <a class="dropdown-item" href="{% url 'election.upload-voters' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-file-import"></i>
+                  </span>
+                  <span>{% trans "Gestion de la liste de votant·e·s" %}</span>
+                </a>
+                {% endif %}
 
-            {% if not election.tallied %}
-            {# Liste des votants #}
-            <a class="dropdown-item" href="{% url 'election.voters' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-list"></i>
-              </span>
-              <span>{% trans "Liste des votant·e·s" %}</span>
-            </a>
+                {% elif election.end_date < current_time %}
 
-            {# Dépouillement #}
-            <a class="dropdown-item" href="{% url 'election.tally' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-poll-h"></i>
-              </span>
-              <span>{% trans "Dépouiller" %}</span>
-            </a>
+                {% if not election.tallied %}
+                {# Liste des votants #}
+                <a class="dropdown-item" href="{% url 'election.voters' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-list"></i>
+                  </span>
+                  <span>{% trans "Liste des votant·e·s" %}</span>
+                </a>
 
-            {% else %}
+                {# Dépouillement #}
+                <a class="dropdown-item" href="{% url 'election.tally' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-poll-h"></i>
+                  </span>
+                  <span>{% trans "Dépouiller" %}</span>
+                </a>
 
-            {# Publication des résultats #}
-            {% if not election.archived %}
-            <a class="dropdown-item" href="{% url 'election.publish' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-edit"></i>
-              </span>
-              {% if not election.results_public %}
-              <span>{% trans "Publier" %}</span>
-              {% else %}
-              <span>{% trans "Dépublier" %}</span>
-              {% endif %}
-            </a>
-            {% endif %}
+                {% else %}
 
-            {# Export des résultats #}
-            <a class="dropdown-item" href="{% url 'election.download-results' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-save"></i>
-              </span>
-              <span>{% trans "Télécharger les résultats" %}</span>
-            </a>
+                {# Publication des résultats #}
+                {% if not election.archived %}
+                <a class="dropdown-item" href="{% url 'election.publish' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-edit"></i>
+                  </span>
+                  {% if not election.results_public %}
+                  <span>{% trans "Publier" %}</span>
+                  {% else %}
+                  <span>{% trans "Dépublier" %}</span>
+                  {% endif %}
+                </a>
+                {% endif %}
 
-            {# Archivage #}
-            {% if not election.archived %}
-            <a class="dropdown-item" href="{% url 'election.archive' election.pk %}">
-              <span class="icon">
-                <i class="fas fa-archive"></i>
-              </span>
-              <span>{% trans "Archiver" %}</span>
-            </a>
-            {% endif %}
-            {% endif %}
+                {# Export des résultats #}
+                <a class="dropdown-item" href="{% url 'election.download-results' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-save"></i>
+                  </span>
+                  <span>{% trans "Télécharger les résultats" %}</span>
+                </a>
 
-            {% endif %}
+                {# Archivage #}
+                {% if not election.archived %}
+                <a class="dropdown-item" href="{% url 'election.archive' election.pk %}">
+                  <span class="icon">
+                    <i class="fas fa-archive"></i>
+                  </span>
+                  <span>{% trans "Archiver" %}</span>
+                </a>
+                {% endif %}
+                {% endif %}
 
+                {% endif %}
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/shared/templates/base.html b/shared/templates/base.html
index 16381c4..d159be7 100644
--- a/shared/templates/base.html
+++ b/shared/templates/base.html
@@ -1,5 +1,9 @@
 {% load static bulma i18n %}
 
+{% get_current_language as LANGUAGE_CODE %}
+{% get_available_languages as LANGUAGES %}
+{% get_language_info_list for LANGUAGES as langs %}
+
 <!DOCTYPE html>
 <html>
 
@@ -24,28 +28,36 @@
 </head>
 
 <body>
+  {# Scrool to top #}
   <button id="scroll-button" class="button is-rounded is-large is-hidden has-tooltip" data-tooltip="{% trans "Revenir en haut de la page" %}">
     <span class="icon is-large has-text-primary">
       <i class="fas fa-2x fa-chevron-circle-up"></i>
     </span>
   </button>
 
-  <nav class="level has-background-primary">
-    <div class="level-left px-4">
-      <div class="level-item">
+  {# Sélection de la langue #}
+  <form action="{% url "set_language" %}" method="POST" id="lang-form" class="is-hidden">
+    {% csrf_token %}
+    <input type="hidden" name="language" id="lang-input">
+  </form>
+
+  {# Navbar #}
+  <nav class="level has-background-primary is-mobile">
+    <div class="level-left">
+      <div class="level-item pl-4">
         <a href="{% url 'kadenios' %}">
           <h1 class="has-text-primary-light is-size-1 is-family-secondary">Kadenios</h1>
         </a>
       </div>
 
-      <div class="level-item pl-4">
+      <div class="level-item pl-4 is-hidden-touch">
         <a href="{% url 'election.list' %}">
           <h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "Élections" %}</h3>
         </a>
       </div>
 
       {% comment %}
-      <div class="level-item pl-4">
+      <div class="level-item pl-4 is-hidden-touch">
         <a href="{% url 'faq.list' %}">
           <h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "FAQ" %}</h3>
         </a>
@@ -53,61 +65,48 @@
       {% endcomment %}
     </div>
 
-    <div class="level-right px-5">
+    <div class="level-right">
       {% block auth %}
-      <div class="level-item">
-        {% if user.is_authenticated %}
-        <div class="level is-mobile">
-          {# Paramètres de Kadenios #}
-          {% if user.is_staff %}
-          <div class="level-item has-tooltip-light has-tooltip-bottom" data-tooltip="Administration">
-            <a class="button is-primary" href="{% url 'auth.admin' %}">
-              <span class="icon is-size-3">
-                <i class="fas fa-cog"></i>
-              </span>
-            </a>
-          </div>
-          {% endif %}
-
-          <div class="level-item">
-            <div class="tag">
-              {% blocktrans with name=user.base_username connection=user.connection_method %}Connecté·e en tant que {{ name }} par {{ connection }}{% endblocktrans %}
-            </div>
-          </div>
-
-          <div class="level-item">
-            <a class="button is-primary" href="{% url 'authens:logout' %}?next={% if view.get_next_url %}{{ view.get_next_url }}{% else %}/{% endif %}">
-              <span class="icon is-size-1">
-                <i class="fas fa-sign-out-alt"></i>
-              </span>
-            </a>
-          </div>
-        </div>
-        {% else %}
-
-        <div class="level-item py-2">
-          <a class="button" href="{% url 'authens:login' %}?next={{ request.path }}">
-            <span class="is-size-5">{% trans "Se connecter" %}</span>
-            <span class="icon is-size-4">
-              <i class="fas fa-sign-in-alt"></i>
-            </span>
-          </a>
-        </div>
-        {% endif %}
+      {% if user.is_authenticated %}
+      {# Paramètres de Kadenios #}
+      {% if user.is_staff %}
+      <div class="level-item has-tooltip-light has-tooltip-bottom is-hidden-touch" data-tooltip="Administration">
+        <a class="button is-primary" href="{% url 'auth.admin' %}">
+          <span class="icon is-size-3">
+            <i class="fas fa-cog"></i>
+          </span>
+        </a>
       </div>
+      {% endif %}
+
+      <div class="level-item is-hidden-mobile">
+        <div class="tag">
+          {% blocktrans with name=user.base_username connection=user.connection_method %}Connecté·e en tant que {{ name }} par {{ connection }}{% endblocktrans %}
+        </div>
+      </div>
+
+      <div class="level-item is-hidden-touch">
+        <a class="button is-primary" href="{% url 'authens:logout' %}?next={% if view.get_next_url %}{{ view.get_next_url }}{% else %}/{% endif %}">
+          <span class="icon is-size-1">
+            <i class="fas fa-sign-out-alt"></i>
+          </span>
+        </a>
+      </div>
+      {% else %}
+
+      <div class="level-item py-2 is-hidden-touch">
+        <a class="button" href="{% url 'authens:login' %}?next={{ request.path }}">
+          <span class="is-size-5">{% trans "Se connecter" %}</span>
+          <span class="icon is-size-4">
+            <i class="fas fa-sign-in-alt"></i>
+          </span>
+        </a>
+      </div>
+      {% endif %}
       {% endblock %}
 
       {# Choix de la langue #}
-      <div class="level-item">
-        {% get_current_language as LANGUAGE_CODE %}
-        {% get_available_languages as LANGUAGES %}
-        {% get_language_info_list for LANGUAGES as langs %}
-
-        <form action="{% url "set_language" %}" method="POST" id="lang-form">
-          {% csrf_token %}
-          <input type="hidden" name="language" id="lang-input">
-        </form>
-
+      <div class="level-item is-hidden-touch">
         <div class="dropdown is-hoverable is-right">
           <div class="dropdown-trigger">
             <a class="button is-primary is-large" aria-haspopup="true" aria-controls="dropdown-menu">
@@ -138,6 +137,85 @@
           </div>
         </div>
       </div>
+
+      {# Menu pour mobile et tablette #}
+      <div class="level-item is-hidden-desktop">
+        <div class="dropdown is-right">
+          <div class="dropdown-trigger">
+            <a class="button is-primary is-large" aria-haspopup="true" aria-controls="dropdown-menu">
+              <span class="icon is-size-2">
+                <i class="fas fa-bars"></i>
+              </span>
+            </a>
+          </div>
+
+          <div class="dropdown-menu pr-1">
+            <div class="dropdown-content">
+              <a class="dropdown-item" href="{% url 'election.list' %}">
+                <span class="icon is-size-5 mr-3">
+                  <i class="fas fa-vote-yea"></i>
+                </span>
+                <span class="is-size-5">{% trans "Élections" %}</span>
+              </a>
+
+              {% comment %}
+              <hr class="dropdown-divider">
+
+              <a class="dropdown-item" href="{% url 'faq.list' %}">
+                <span class="icon is-size-5 mr-3">
+                  <i class="fas fa-question"></i>
+                </span>
+                <span class="has-text-weight-semibol is-size-5">{% trans "FAQs" %}</span>
+              </a>
+              {% endcomment %}
+
+              {% if user.is_staff %}
+              <hr class="dropdown-divider">
+              <a class="dropdown-item" href="{% url 'auth.admin' %}">
+                <span class="icon is-size-5 mr-3">
+                  <i class="fas fa-cog"></i>
+                </span>
+                <span class="is-size-5">{% trans "Administration" %}</span>
+              </a>
+              {% endif %}
+
+              <hr class="dropdown-divider">
+
+              {% if user.is_authenticated %}
+              <a class="dropdown-item" href="{% url 'authens:logout' %}?next={% if view.get_next_url %}{{ view.get_next_url }}{% else %}/{% endif %}">
+                <span class="icon is-size-5 mr-3">
+                  <i class="fas fa-sign-out-alt"></i>
+                </span>
+                <span class="is-size-5">{% trans "Déconnexion" %}</span>
+              </a>
+              {% else %}
+              <a class="dropdown-item" href="{% url 'authens:login' %}?next={{ request.path }}">
+                <span class="icon is-size-5 mr-3">
+                  <i class="fas fa-sign-in-alt"></i>
+                </span>
+                <span class="is-size-5">{% trans "Se connecter" %}</span>
+              </a>
+              {% endif %}
+
+
+              {% for lang in langs %}
+              {% with lang_svg="images/"|add:lang.code|add:".svg" %}
+              <hr class="dropdown-divider">
+
+              <a class="dropdown-item lang-selector" data-lang="{{ lang.code }}">
+                <span class="icon-text">
+                  <span class="icon mr-4" style="border-radius:3px">
+                    <img style="border-radius:3px" src="{% static lang_svg %}">
+                  </span>
+                  <span class="is-size-5">{{ lang.name_translated }}</span>
+                </span>
+                {% endwith %}
+              </a>
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </nav>
 
@@ -167,6 +245,7 @@
     </div>
   </div>
   {% endblock layout %}
+
   <footer class="footer">
     <p class="has-text-centered">
       {% blocktrans %}Développé par <a class="tag is-light is-danger" href="https://www.eleves.ens.fr/kde">KDEns</a>. En cas de pépin, contacter <span class="tag is-info is-light">klub-dev [at] ens [dot] fr</span>.{% endblocktrans %}