From f2a53eb1e3e9b4be1673d34069138d3da6f6caa9 Mon Sep 17 00:00:00 2001
From: JocelynDelalande <JocelynDelalande@users.noreply.github.com>
Date: Wed, 27 Dec 2017 16:10:29 +0100
Subject: [PATCH] Position flash messages with CSS rather than JS (#292)

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 241d728d..cb36a6fe 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();
@@ -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>