From 578d525e253a1ad1b87a5d066b62cf5207bc6eb8 Mon Sep 17 00:00:00 2001
From: Magnus Hoff <maghoff@gmail.com>
Date: Fri, 1 Dec 2017 16:22:36 +0100
Subject: [PATCH] Better styling of popup dialog

---
 assets/script.js |  2 +-
 assets/style.css | 30 ++++++++++++++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/assets/script.js b/assets/script.js
index 0f97707..3eb9f8f 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -21,7 +21,7 @@ function isEdited(form) {
 }
 
 function loginDialog(loginUrl) {
-    const loginDialogHtml = "<div class=popup><p>Your changes could not be saved</p><p>Log in and try again</p><div><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>";
+    const loginDialogHtml = "<div class=popup><div class=message><p>Your changes could not be saved</p><p>Log in and try again</p></div><div class=btn-row><button>Never mind</button> <a href='' target=login>Open login page</a></div></div>";
 
     const dialog = document.createElement("div");
     dialog.className = "modal-block";
diff --git a/assets/style.css b/assets/style.css
index 0ff1b01..ab1411a 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -438,22 +438,40 @@ input[type="search"] {
     top: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .popup {
-    position: fixed;
+    display: flex;
+    flex-direction: column;
 
-    width: 300px;
-    left: calc(50% - 150px);
-
-    height: 150px;
-    top: calc(50% - 75px);
+    height: 200px;
 
     text-align: center;
     background: #eee;
     box-shadow: 2px 2px 8px rgba(0,0,0, 0.25);
 }
 
+.popup>.message {
+    flex-grow: 1;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    margin: 16px 32px;
+    max-width: 600px;
+}
+
+.popup>.btn-row {
+    padding: 16px;
+    background: #ccc;
+}
+
 @media print {
     @page {
         margin: 25mm;