almet/ihatemoney
1
0
Fork 0
mirror of https://github.com/spiral-project/ihatemoney.git synced 2025-04-29 17:52:37 +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; margin-top: 10px;
} }
.flash { .messages {
display: flex;
justify-content: center;
position: absolute; position: absolute;
top: 0.6rem;
width: 100%;
pointer-events: none;
} }
.light { .light {

4
ihatemoney/templates/layout.html
View file

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