almet/ihatemoney
1
0
Fork 0
mirror of https://github.com/spiral-project/ihatemoney.git synced 2025-05-05 12:41:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Position flash messages with CSS rather than JS

Browse source 
Visual result is exactly the same, but less black magic :-).
This commit is contained in:
Jocelyn Delalande 2017-12-23 02:13:37 +01:00
parent b65ee59b1b
commit e644620d04
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();
@ -81,9 +79,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>