From e644620d04b889576ffae04d656a0c8189291f69 Mon Sep 17 00:00:00 2001
From: Jocelyn Delalande <jocelyn@crapouillou.net>
Date: Sat, 23 Dec 2017 02:13:37 +0100
Subject: [PATCH] Position flash messages with CSS rather than JS

Visual result is exactly the same, but less black magic :-).
---
 ihatemoney/static/css/main.css   |  7 ++++++-
 ihatemoney/templates/layout.html | 10 +++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/ihatemoney/static/css/main.css b/ihatemoney/static/css/main.css
index fa8ad56a..b0120ca9 100644
--- a/ihatemoney/static/css/main.css
+++ b/ihatemoney/static/css/main.css
@@ -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 {
diff --git a/ihatemoney/templates/layout.html b/ihatemoney/templates/layout.html
index 85109112..c2bd71f9 100644
--- a/ihatemoney/templates/layout.html
+++ b/ihatemoney/templates/layout.html
@@ -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>