305 lines
9.2 KiB
HTML
305 lines
9.2 KiB
HTML
{% load static bulma i18n %}
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Kadenios</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
{# Favicon #}
|
|
<link rel="shortcut icon" type="image/png" href="{% static 'images/kadenios.png' %}">
|
|
|
|
{# CSS #}
|
|
<link rel="stylesheet" href="{% static 'css/main.css' %}">
|
|
<link rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
|
|
<link rel="stylesheet" href="{% static 'vendor/font-awesome/css/solid.min.css' %}">
|
|
|
|
<script>
|
|
const _$ = (s, e = document, a = true) => {
|
|
let r = e.querySelectorAll(s) || [];
|
|
if (!a) {
|
|
return r.item(0);
|
|
}
|
|
return r;
|
|
};
|
|
const _id = s => document.getElementById(s);
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Delete notifications
|
|
_$('.notification .delete').forEach(d => {
|
|
let n = d.parentNode;
|
|
|
|
d.addEventListener('click', () => {
|
|
n.parentNode.removeChild(n);
|
|
});
|
|
});
|
|
|
|
// Interact with dropdowns
|
|
let ds = _$('.dropdown:not(.is-hoverable)');
|
|
|
|
ds.forEach(d => {
|
|
d.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
d.classList.toggle('is-active');
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', () => {
|
|
ds.forEach(d => {
|
|
d.classList.remove('is-active');
|
|
});
|
|
});
|
|
|
|
// Interact with modals
|
|
let ms = _$('.modal');
|
|
let mbs = _$('.modal-button');
|
|
let mcs = _$('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button-close');
|
|
|
|
mbs.forEach(b => {
|
|
b.addEventListener('click', () => {
|
|
let m = _id(b.dataset.target);
|
|
if ('post_url' in b.dataset) {
|
|
_$('form', m, false).action = b.dataset.post_url;
|
|
};
|
|
|
|
if ('title' in b.dataset) {
|
|
_$('.modal-card-title', m, false).innerHTML = b.dataset.title;
|
|
};
|
|
|
|
document.documentElement.classList.add('is-clipped');
|
|
m.classList.add('is-active');
|
|
});
|
|
});
|
|
|
|
mcs.forEach(d => {
|
|
d.addEventListener('click', () => {
|
|
document.documentElement.classList.remove('is-clipped');
|
|
ms.forEach(m => {
|
|
m.classList.remove('is-active');
|
|
});
|
|
});
|
|
});
|
|
|
|
document.addEventListener('keydown', ev => {
|
|
var e = ev || window.event;
|
|
if (e.keyCode === 27) {
|
|
ds.forEach(d => {
|
|
d.classList.remove('is-active');
|
|
});
|
|
|
|
document.documentElement.classList.remove('is-clipped');
|
|
|
|
ms.forEach(m => {
|
|
m.classList.remove('is-active');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Language selection
|
|
let ls = _$('.dropdown-item.lang-selector');
|
|
|
|
ls.forEach(l => {
|
|
l.addEventListener('click', () => {
|
|
_id('lang-input').value = l.dataset.lang;
|
|
_id('lang-form').submit();
|
|
});
|
|
});
|
|
|
|
// Disable button after form submission
|
|
_$('form').forEach(f => {
|
|
f.addEventListener('submit', () => {
|
|
_$('button[type=submit]', f).forEach(b => {
|
|
b.classList.add('is-loading');
|
|
setTimeout(() => {
|
|
b.classList.remove('is-loading');
|
|
}, 1000);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Scroll to top button
|
|
let up = _id('scroll-button');
|
|
if (document.documentElement.scrollTop >= 100) {
|
|
up.classList.remove('is-hidden');
|
|
}
|
|
|
|
window.onscroll = () => {
|
|
if (document.documentElement.scrollTop >= 100) {
|
|
up.classList.remove('is-hidden');
|
|
} else {
|
|
up.classList.add('is-hidden');
|
|
}
|
|
}
|
|
|
|
up.addEventListener('click', () => {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth',
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
{% block extra_head %}{% endblock extra_head %}
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<a href="{% url 'faq.list' %}">
|
|
<h3 class="has-text-primary-light has-text-weight-semibold is-size-3">{% trans "FAQ" %}</h3>
|
|
</a>
|
|
</div>
|
|
{% endcomment %}
|
|
</div>
|
|
|
|
<div class="level-right px-5">
|
|
{% 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 %}
|
|
</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="dropdown is-hoverable 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-language"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="dropdown-menu">
|
|
<div class="dropdown-content">
|
|
{% for lang in langs %}
|
|
{% with lang_svg="images/"|add:lang.code|add:".svg" %}
|
|
<a class="dropdown-item lang-selector" data-lang="{{ lang.code }}">
|
|
<span class="icon-text">
|
|
<span class="icon">
|
|
<img src="{% static lang_svg %}">
|
|
</span>
|
|
<span class="ml-1">{{ lang.name_translated }}</span>
|
|
</span>
|
|
{% endwith %}
|
|
</a>
|
|
{% if not forloop.last %}
|
|
<hr class="dropdown-divider">
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{% block layout %}
|
|
<div class="main-content">
|
|
<div class="columns is-centered">
|
|
<div class="column is-two-thirds-fullhd is-12-desktop is-12-widescreen">
|
|
<section class="section pt-3">
|
|
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="notification is-{{ message.level_tag|bulma_message_tag }} is-light">
|
|
{% if 'safe' in message.tags %}
|
|
{{ message|safe }}
|
|
{% else %}
|
|
{{ message }}
|
|
{% endif %}
|
|
<button class="delete"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<div class="box">
|
|
{% block content %}
|
|
{% endblock content %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</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 %}
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
|
|
</html>
|