From bc958a3f7ba2bc68b4ce07cf6badc261cf408dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lorenz=20H=C3=BCbschle-Schneider?=
 <lorenz-dev@lgh-alumni.de>
Date: Sun, 20 Jul 2014 11:40:23 +0100
Subject: [PATCH] Fix modal so that it reliably works on all plattforms

---
 css/glowingbear.css | 56 ++++++++++++++++++++++++++++++++++-----------
 index.html          |  1 +
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/css/glowingbear.css b/css/glowingbear.css
index 56dff4b..f8bc96f 100644
--- a/css/glowingbear.css
+++ b/css/glowingbear.css
@@ -360,29 +360,54 @@ table.notimestampseconds td.time span.seconds {
 }
 
 .gb-modal {
-     position: absolute;
-     left: 0px;
-     width:100%;
-     height: 100%;
-     z-index: 1000;
-     background-color:rgba(0, 0, 0, 0.5)
+    z-index: 1000;
+    height: 100%;
+    overflow-y: scroll;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
 }
+
 .gb-modal[data-state=hidden] {
-    transition: .2s ease-in-out, top .2s ease-in;
-    transition-delay: 0.1s, 0s;
-    top: -150px;
+    transition: .2s ease-in-out;
     visibility: hidden;
     opacity: 0;
 }
 
 .gb-modal[data-state=visible] {
-    transition: .2s ease-in-out, top .3s ease-out;
-    transition-delay: 0s, 0.1s;
-    top: 0px;
-    height: 200%;
+    transition: .2s ease-in-out;
     visibility: visible;
     opacity: 1;
 }
+
+.gb-modal[data-state=hidden] .modal-dialog {
+    transition: top .3s ease-in;
+    top: -150px;
+}
+
+.gb-modal[data-state=visible] .modal-dialog {
+    transition: top .3s ease-out;
+    top: 0px;
+}
+.gb-modal .backdrop {
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    overflow: none;
+    background-color:rgba(0, 0, 0, 0.5)
+}
+.gb-modal .modal-dialog {
+    z-index: 1001;
+    position: absolute;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    top: 35px;
+}
 .gb-modal[ng-click], .gb-modal div[ng-click] {
     cursor: default;
 }
@@ -552,6 +577,11 @@ h2 span, h2 small {
         padding: 0px !important;
     }
 
+    .gb-modal .modal-dialog {
+        margin: 20px 2%;
+        width: 96%;
+    }
+
     /* a different colour is too irregular on mobile */
     .repeated-time .cof-chat_time,
     .repeated-time .cof-chat_time_delimiters {
diff --git a/index.html b/index.html
index f168188..ffcd456 100644
--- a/index.html
+++ b/index.html
@@ -264,6 +264,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
     </div>
     <div id="soundNotification"></div>
     <div id="settingsModal" class="gb-modal" data-state="hidden">
+      <div class="backdrop" ng-click="closeModal($event)"></div>
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">