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; margin-top: 10px;
} }
.flash { .messages {
display: flex;
justify-content: center;
position: absolute; position: absolute;
top: 0.6rem;
width: 100%;
pointer-events: none;
} }
.light { .light {

10
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();
@ -81,9 +79,11 @@
</div> </div>
{% endblock %} {% endblock %}
{% for message in get_flashed_messages() %} <div class="messages">
<div class="flash alert alert-success">{{ message }}</div> {% for message in get_flashed_messages() %}
{% endfor %} <div class="flash alert alert-success">{{ message }}</div>
{% endfor %}
</div>
{% block footer %} {% block footer %}
<footer> <footer>