On utilise un dropdown pour les paramètres
This commit is contained in:
parent
80ff6c130c
commit
0dc43c0cbd
2 changed files with 93 additions and 56 deletions
|
@ -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="button is-light is-outlined is-primary" href="{% url 'election.upload-voters' election.pk %}">
|
||||
<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>
|
||||
</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="button is-light is-outlined is-primary" href="{% url 'election.tally' election.pk %}">
|
||||
<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>
|
||||
</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 #}
|
||||
<div class="level-item">
|
||||
<a class="button is-light is-outlined is-primary" href="{% url 'election.archive' election.pk %}">
|
||||
{# Archivage #}
|
||||
<a class="dropdown-item" 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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue