Issue #76 Refactoriser les messages flash
Javascript : Supression du javascript inutile, l'entièreté du bloc du flash. CSS : Alignement plus correct des notifications flash, fini le fixed, 15% place au margin auto. Ajout d'une marge pour éviter l'effet «bloc». Héritage des propriétés de couleur du texte et du fond de la classe supèrieure. Modification des templates : Les messages sont désormais chargés avant le contenu et après le header.
This commit is contained in:
parent
510b57c08c
commit
227087ebbc
|
@ -3,15 +3,14 @@
|
|||
*/
|
||||
|
||||
.flash {
|
||||
position: fixed; left: 15%;
|
||||
display: flex; align-items: center;
|
||||
width: 70%; z-index: 10;
|
||||
font-family: NotoSans; font-size: 14px; color: var(--text);
|
||||
background: var(--background);
|
||||
margin: 5px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
border-bottom: 5px solid var(--info);
|
||||
border-radius: 1px; box-shadow: var(--shadow);
|
||||
transition: opacity .15s ease;
|
||||
transition: top .2s ease;
|
||||
border-radius: 1px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.flash.info {
|
||||
border-color: var(--info);
|
||||
|
@ -26,18 +25,9 @@
|
|||
border-color: var(--error);
|
||||
}
|
||||
.flash span {
|
||||
flex-grow: 1; margin: 15px 10px 10px 0;
|
||||
flex-grow: 1;
|
||||
margin: 15px 10px 10px 0;
|
||||
}
|
||||
.flash svg {
|
||||
margin: 15px 20px 10px 30px;
|
||||
}
|
||||
|
||||
.flash input[type="button"] {
|
||||
margin: 3px 30px 0 0; padding: 10px 15px;
|
||||
border: none;
|
||||
background: var(--btn-bg); color: var(--btn-text);
|
||||
}
|
||||
.flash input[type="button"]:hover,
|
||||
.flash input[type="button"]:focus {
|
||||
background: var(--btn-bg-active);
|
||||
}
|
||||
|
|
|
@ -11,42 +11,3 @@ function getCookie(name) {
|
|||
if( end == -1 ) end = document.cookie.length;
|
||||
return unescape( document.cookie.substring( debut+name.length+1, end ) );
|
||||
}
|
||||
|
||||
/*
|
||||
Flash messages
|
||||
TODO: Find a way to have good flash messages in a KISS & DRY way
|
||||
*/
|
||||
function flash_add(type, message) {
|
||||
template = `<div class="flash {{ category }}" style="top: {{ top }}px;" onclick="flash_close(this)">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
{{ icon }}
|
||||
</svg>
|
||||
<span>
|
||||
{{ message }}
|
||||
</span>
|
||||
<input type="button" value="MASQUER"></input>
|
||||
</div>`;
|
||||
paths = {
|
||||
'error': '<path fill="#727272" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"></path>',
|
||||
'warning': '<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>',
|
||||
'ok': '<path fill="#727272" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"></path>',
|
||||
'info': '<path fill="#727272" d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path>'
|
||||
};
|
||||
var top = (document.getElementsByClassName('flash').length + 1) * 70 - 45;
|
||||
template = template.replace("{{ category }}", type);
|
||||
template = template.replace("{{ top }}", top);
|
||||
template = template.replace("{{ icon }}", paths[type]);
|
||||
template = template.replace("{{ message }}", message);
|
||||
document.body.innerHTML += template;
|
||||
}
|
||||
function flash_close(element) {
|
||||
element.style.opacity = 0;
|
||||
setTimeout(function(){
|
||||
var parent = element.parentNode;
|
||||
parent.removeChild(element);
|
||||
var childs = parent.getElementsByClassName('flash');
|
||||
for(var i = 0; i < childs.length; i++) {
|
||||
childs[i].style.top = ((i + 1) * 70 - 45) + 'px';
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
<div class=title>{% block title %}<h1>Planète Casio</h1>{% endblock %}</div>
|
||||
{% include "base/header.html" %}
|
||||
</header>
|
||||
{% include "base/flash.html" %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
@ -17,8 +18,6 @@
|
|||
{% include "base/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% include "base/flash.html" %}
|
||||
|
||||
{% include "base/scripts.html" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
{% for category, message in messages %}
|
||||
<div class="flash {{ category }}" style="top: {{ loop.index * 70 - 45 }}px;" onclick="flash_close(this)">
|
||||
<div class="flash {{ category }}">
|
||||
<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
|
||||
{% if category=="error" %}<path fill="#727272" d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"></path>{% endif %}
|
||||
{% if category=="warning" %}<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>{% endif %}
|
||||
|
@ -11,8 +11,8 @@
|
|||
<span>
|
||||
{{ message }}
|
||||
</span>
|
||||
<input type="button" value="MASQUER"></input>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
|
|
Loading…
Reference in New Issue