DGNum/kadenios
17
0
Fork 0
Code Issues 12 Pull requests Projects Wiki Activity

Better mobile menu

Browse source
This commit is contained in:
Tom Hubrecht 2021-08-22 03:52:57 +02:00
parent f2b4e9bcfe
commit db2d69bc5f
2 changed files with 256 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

241
elections/templates/elections/election_admin.html
View file

@ -85,142 +85,145 @@
<div class="level-right"> <div class="level-right">
{# Visibilité de l'élection #} {# Visibilité de l'élection #}
<div class="level-item"> <div class="level-item">
{% if not election.visible %} <div class="level is-mobile">
<span class="tag is-medium is-outlined is-warning is-light"> <div class="level-item">
<span class="icon"> {% if not election.visible %}
<i class="fas fa-eye-slash"></i> <span class="tag is-medium is-outlined is-warning is-light">
</span> <span class="icon">
<span>{% trans "Élection invisible" %}</span> <i class="fas fa-eye-slash"></i>
</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>
</span> </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>
<div class="dropdown-menu" id="dropdown-menu" role="menu"> {# Menu d'actions #}
<div class="dropdown-content"> <div class="level-item">
{# Vue classique #} <div class="dropdown is-right">
<a class="dropdown-item" href="{% url 'election.view' election.pk %}"> <div class="dropdown-trigger">
<span class="icon"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<i class="fas fa-exchange-alt"></i> <span class="icon-text">
</span> <span class="icon">
<span>{% trans "Vue classique" %} <i class="fas fa-cog" aria-hidden="true"></i>
</a> </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 %} <hr class="dropdown-divider">
{# 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 %}
{# Téléchargement de la liste des votant·e·s #} {% if not election.visible %}
<a class="dropdown-item" href="{% url 'election.export-voters' election.pk %}"> {# Rend l'élection visible par tout le monde #}
<span class="icon"> <a class="dropdown-item" href="{% url 'election.set-visible' election.pk %}">
<i class="fas fa-file-download"></i> <span class="icon">
</span> <i class="fas fa-eye"></i>
<span>{% trans "Exporter les votant·e·s" %} </span>
</a> <span>{% trans "Rendre l'élection visible" %}
</a>
{% endif %}
{% if election.start_date > current_time %} {# Téléchargement de la liste des votant·e·s #}
{# Modification de l'élection #} <a class="dropdown-item" href="{% url 'election.export-voters' election.pk %}">
<a class="dropdown-item" href="{% url 'election.update' election.pk %}"> <span class="icon">
<span class="icon"> <i class="fas fa-file-download"></i>
<i class="fas fa-edit"></i> </span>
</span> <span>{% trans "Exporter les votant·e·s" %}
<span>{% trans "Modifier" %}</span> </a>
</a>
{# Gestion des votant·e·s #} {% if election.start_date > current_time %}
{% if election.restricted %} {# Modification de l'élection #}
<a class="dropdown-item" href="{% url 'election.upload-voters' election.pk %}"> <a class="dropdown-item" href="{% url 'election.update' election.pk %}">
<span class="icon"> <span class="icon">
<i class="fas fa-file-import"></i> <i class="fas fa-edit"></i>
</span> </span>
<span>{% trans "Gestion de la liste de votant·e·s" %}</span> <span>{% trans "Modifier" %}</span>
</a> </a>
{% endif %}
{% 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 %} {% elif election.end_date < current_time %}
{# 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>
{# Dépouillement #} {% if not election.tallied %}
<a class="dropdown-item" href="{% url 'election.tally' election.pk %}"> {# Liste des votants #}
<span class="icon"> <a class="dropdown-item" href="{% url 'election.voters' election.pk %}">
<i class="fas fa-poll-h"></i> <span class="icon">
</span> <i class="fas fa-list"></i>
<span>{% trans "Dépouiller" %}</span> </span>
</a> <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 #} {% else %}
{% 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 %}
{# Export des résultats #} {# Publication des résultats #}
<a class="dropdown-item" href="{% url 'election.download-results' election.pk %}"> {% if not election.archived %}
<span class="icon"> <a class="dropdown-item" href="{% url 'election.publish' election.pk %}">
<i class="fas fa-save"></i> <span class="icon">
</span> <i class="fas fa-edit"></i>
<span>{% trans "Télécharger les résultats" %}</span> </span>
</a> {% if not election.results_public %}
<span>{% trans "Publier" %}</span>
{% else %}
<span>{% trans "Dépublier" %}</span>
{% endif %}
</a>
{% endif %}
{# Archivage #} {# Export des résultats #}
{% if not election.archived %} <a class="dropdown-item" href="{% url 'election.download-results' election.pk %}">
<a class="dropdown-item" href="{% url 'election.archive' election.pk %}"> <span class="icon">
<span class="icon"> <i class="fas fa-save"></i>
<i class="fas fa-archive"></i> </span>
</span> <span>{% trans "Télécharger les résultats" %}</span>
<span>{% trans "Archiver" %}</span> </a>
</a>
{% endif %}
{% endif %}
{% 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> </div>
</div> </div>

189
shared/templates/base.html
View file

@ -1,5 +1,9 @@
{% load static bulma i18n %} {% 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> <!DOCTYPE html>
<html> <html>
@ -24,28 +28,36 @@
</head> </head>
<body> <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" %}"> <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"> <span class="icon is-large has-text-primary">
<i class="fas fa-2x fa-chevron-circle-up"></i> <i class="fas fa-2x fa-chevron-circle-up"></i>
</span> </span>
</button> </button>
<nav class="level has-background-primary"> {# Sélection de la langue #}
<div class="level-left px-4"> <form action="{% url "set_language" %}" method="POST" id="lang-form" class="is-hidden">
<div class="level-item"> {% 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' %}"> <a href="{% url 'kadenios' %}">
<h1 class="has-text-primary-light is-size-1 is-family-secondary">Kadenios</h1> <h1 class="has-text-primary-light is-size-1 is-family-secondary">Kadenios</h1>
</a> </a>
</div> </div>
<div class="level-item pl-4"> <div class="level-item pl-4 is-hidden-touch">
<a href="{% url 'election.list' %}"> <a href="{% url 'election.list' %}">
<h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "Élections" %}</h3> <h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "Élections" %}</h3>
</a> </a>
</div> </div>
{% comment %} {% comment %}
<div class="level-item pl-4"> <div class="level-item pl-4 is-hidden-touch">
<a href="{% url 'faq.list' %}"> <a href="{% url 'faq.list' %}">
<h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "FAQ" %}</h3> <h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "FAQ" %}</h3>
</a> </a>
@ -53,61 +65,48 @@
{% endcomment %} {% endcomment %}
</div> </div>
<div class="level-right px-5"> <div class="level-right">
{% block auth %} {% block auth %}
<div class="level-item"> {% if user.is_authenticated %}
{% if user.is_authenticated %} {# Paramètres de Kadenios #}
<div class="level is-mobile"> {% if user.is_staff %}
{# Paramètres de Kadenios #} <div class="level-item has-tooltip-light has-tooltip-bottom is-hidden-touch" data-tooltip="Administration">
{% if user.is_staff %} <a class="button is-primary" href="{% url 'auth.admin' %}">
<div class="level-item has-tooltip-light has-tooltip-bottom" data-tooltip="Administration"> <span class="icon is-size-3">
<a class="button is-primary" href="{% url 'auth.admin' %}"> <i class="fas fa-cog"></i>
<span class="icon is-size-3"> </span>
<i class="fas fa-cog"></i> </a>
</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 %}
</div> </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 %} {% endblock %}
{# Choix de la langue #} {# Choix de la langue #}
<div class="level-item"> <div class="level-item is-hidden-touch">
{% 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="dropdown is-hoverable is-right"> <div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<a class="button is-primary is-large" aria-haspopup="true" aria-controls="dropdown-menu"> <a class="button is-primary is-large" aria-haspopup="true" aria-controls="dropdown-menu">
@ -138,6 +137,85 @@
</div> </div>
</div> </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> </div>
</nav> </nav>
@ -167,6 +245,7 @@
</div> </div>
</div> </div>
{% endblock layout %} {% endblock layout %}
<footer class="footer"> <footer class="footer">
<p class="has-text-centered"> <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 %} {% 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 %}