On utilise un dropdown pour les paramètres

elections/templates/elections/election_admin.html

@@ -21,47 +21,55 @@
     </div>
   </div>
 
+  {% if election.start_date > current_time or election.end_date < current_time %}
   <div class="level-right">
-
-    {# Lien pour la modification et l'upload des votant·e·s #}
-    {% if election.start_date > current_time %}
     <div class="level-item">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.update' election.pk %}">
+      <div class="dropdown is-right">
+        <div class="dropdown-trigger">
+          <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+            <span class="icon is-small">
+              <i class="fas fa-cog" aria-hidden="true"></i>
+            </span>
+            <span>{% trans "Paramètres" %}</span>
+          </button>
+        </div>
+
+        <div class="dropdown-menu" id="dropdown-menu" role="menu">
+          <div class="dropdown-content">
+            {% 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>
-    </div>
 
+            {# Gestion des votant·e·s #}
             {% if election.restricted %}
-    <div class="level-item">
+            <a class="dropdown-item" href="{% url 'election.upload-voters' election.pk %}">
-      <a class="button is-light is-outlined is-primary" 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>
-    </div>
             {% endif %}
 
             {% elif election.end_date < current_time %}
 
-    {# Lien pour le dépouillement #}
+            {# Dépouillement #}
             {% if not election.tallied %}
-    <div class="level-item">
+            <a class="dropdown-item" href="{% url 'election.tally' election.pk %}">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.tally' election.pk %}">
               <span class="icon">
                 <i class="fas fa-poll-h"></i>
               </span>
               <span>{% trans "Dépouiller" %}</span>
             </a>
-    </div>
 
-    {# Lien pour la publication des résultats #}
             {% else %}
-    <div class="level-item">
+
-      <a class="button is-outlined is-primary" href="{% url 'election.publish' election.pk %}">
+            {# Publication des résultats #}
+            <a class="dropdown-item" href="{% url 'election.publish' election.pk %}">
               <span class="icon">
                 <i class="fas fa-edit"></i>
               </span>
@@ -71,20 +79,24 @@
               <span>{% trans "Dépublier" %}</span>
               {% endif %}
             </a>
-    </div>
 
-    {# Lien pour l'archivage #}
+            {# Archivage #}
-    <div class="level-item">
+            <a class="dropdown-item" href="{% url 'election.archive' election.pk %}">
-      <a class="button is-light is-outlined is-primary" href="{% url 'election.archive' election.pk %}">
               <span class="icon">
                 <i class="fas fa-edit"></i>
               </span>
               <span>{% trans "Archiver" %}</span>
             </a>
+            {% endif %}
+
+            {% endif %}
+
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   {% endif %}
-    {% endif %}
-  </div>
 </div>
 <hr>
 

shared/templates/base.html

@@ -18,9 +18,9 @@
   <script src="{% static 'vendor/jquery/jquery-3.5.1.min.js' %}"></script>
   {# <script src="{% static 'elections/js/main.js' %}"></script> #}
 
-  <!-- Delete notification -->
   <script>
     document.addEventListener('DOMContentLoaded', () => {
+      // Delete notifications
       (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
         var $notification = $delete.parentNode;
 
@@ -28,6 +28,31 @@
           $notification.parentNode.removeChild($notification);
         });
       });
+
+      // Interact with dropdowns
+      var $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)') || [];
+
+      $dropdowns.forEach(($dropdown) => {
+        $dropdown.addEventListener('click', (event) => {
+          event.stopPropagation();
+          $dropdown.classList.toggle('is-active');
+        });
+      });
+
+      document.addEventListener('click', () => {
+        $dropdowns.forEach(($dropdown) => {
+          $dropdown.classList.remove('is-active');
+        });
+      });
+
+      document.addEventListener('keydown', (event) => {
+        var e = event || window.event;
+        if (e.keyCode === 27) {
+          $dropdowns.forEach(($dropdown) => {
+            $dropdown.classList.remove('is-active');
+          });
+        }
+      });
     });
 
   </script>