Better mobile menu
This commit is contained in:
parent
f2b4e9bcfe
commit
db2d69bc5f
2 changed files with 256 additions and 174 deletions
|
|
@ -84,6 +84,8 @@
|
|||
|
||||
<div class="level-right">
|
||||
{# Visibilité de l'élection #}
|
||||
<div class="level-item">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-item">
|
||||
{% if not election.visible %}
|
||||
<span class="tag is-medium is-outlined is-warning is-light">
|
||||
|
|
@ -220,7 +222,8 @@
|
|||
{% 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,14 +65,12 @@
|
|||
{% 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">
|
||||
<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>
|
||||
|
|
@ -69,23 +79,22 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="level-item">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<div class="level-item py-2">
|
||||
<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">
|
||||
|
|
@ -94,20 +103,10 @@
|
|||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% 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