almet/ihatemoney
1
0
Fork 0
mirror of https://github.com/spiral-project/ihatemoney.git synced 2025-04-29 09:52:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Position flash messages with CSS rather than JS (#292)

Browse source 
Visual result is exactly the same, but less black magic :-).
This commit is contained in:
JocelynDelalande 2017-12-27 16:10:29 +01:00 committed by Alexis Metaireau
parent 4d359ce11b
commit f2a53eb1e3
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ihatemoney/static/css/main.css
View file

@ -245,8 +245,13 @@ tr.payer_line .balance-name{
margin-top: 10px;
}
.flash {
.messages {
display: flex;
justify-content: center;
position: absolute;
top: 0.6rem;
width: 100%;
pointer-events: none;
}
.light {

10
ihatemoney/templates/layout.html
View file

@ -13,8 +13,6 @@
{% block head %}{% endblock %}
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var left = window.innerWidth/2-$('.flash').width()/2;
$(".flash").css({ "left": left+"px", "top":"0.6rem" });
setTimeout(function(){
$(".flash").fadeOut("slow", function () {
$(".flash").remove();
@ -80,9 +78,11 @@
</div>
{% endblock %}
{% for message in get_flashed_messages() %}
<div class="flash alert alert-success">{{ message }}</div>
{% endfor %}
<div class="messages">
{% for message in get_flashed_messages() %}
<div class="flash alert alert-success">{{ message }}</div>
{% endfor %}
</div>
{% block footer %}
<footer>