Commit c7b5ef3b authored by berumuron's avatar berumuron
Browse files

imp: Redesign alerts boxes

parent 90946b3d
......@@ -189,6 +189,30 @@ button.button-ghost {
background-color: var(--contrast-color);
}
/* Alerts */
.alert {
margin-bottom: 1rem;
padding: 1rem;
border-radius: .25rem;
}
.alert.alert-error {
color: var(--contrast-color);
background-color: var(--secondary-color);
}
.alert.alert-success {
color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}
.alert button {
float: right;
margin-top: -.13rem;
}
/* Containers */
.container {
position: relative;
......
......@@ -6,4 +6,15 @@
folder.classList.toggle('folder-folded');
};
});
var closableButtons = document.querySelectorAll('button[data-close]');
closableButtons.forEach(function (button) {
button.addEventListener('click', function () {
var idToClose = button.getAttribute('data-close');
var elementToClose = document.getElementById(idToClose);
if (elementToClose) {
elementToClose.remove();
}
});
});
}());
{% with error_alerts = get_flashed_messages(category_filter=["error", "message"]) %}
{% if error_alerts %}
<div class="alert alert-error" id="alert-error">
<button class="button-ghost" data-close="alert-error">
OK
</button>
{% for message in error_alerts %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% with success_alerts = get_flashed_messages(category_filter=["success"]) %}
{% if success_alerts %}
<div class="alert alert-success" id="alert-success">
<button class="button-ghost" data-close="alert-success">
OK
</button>
{% for message in success_alerts %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% endif %}
{% endwith %}
......@@ -5,11 +5,7 @@
<h1>Connexion</h1>
<form method="post">
<div class="alert alert-error">
{% for message in get_flashed_messages() %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% include "alerts.html" %}
<div class="form-group">
<label for="username">Nom d’utilisateur</label>
......
......@@ -5,11 +5,7 @@
<h1>Nouvel évènement</h1>
<form action="" method="post">
<div class="alert alert-error">
{% for message in get_flashed_messages() %}
<p>{{ message }}</p>
{% endfor %}
</div>
{% include "alerts.html" %}
<div class="form-group">
<label for="title">Titre</label>
......
......@@ -2,12 +2,6 @@
{% block content %}
<div class="container">
<div class="alert alert-error">
{% for message in get_flashed_messages() %}
<p>{{ message }}</p>
{% endfor %}
</div>
<div class="container-title">
<h1>Temps forts</h1>
......@@ -18,6 +12,8 @@
{% endif %}
</div>
{% include "alerts.html" %}
{% for group_by_year in events|groupby('date.year')|sort(reverse=True) %}
{% set year = group_by_year.grouper %}
<div class="events-by-year folder {{ 'folder-folded' if year > current_date.year }}">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment