Better mobile menu
This commit is contained in:
parent
f2b4e9bcfe
commit
db2d69bc5f
2 changed files with 256 additions and 174 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue