From d1ab694920235c0017770ec210d69f6ac1fbfb0e Mon Sep 17 00:00:00 2001
From: Brentley Jones <the.ajarn@gmail.com>
Date: Tue, 16 Jul 2013 03:14:26 +0000
Subject: [PATCH] FIX: Modal dialogs now truely center and work at all screen
 sizes (mobile)

---
 .../templates/modal/modal.js.handlebars       | 32 +++++++++++--------
 .../stylesheets/application/modal.css.scss    | 28 +++++++++++-----
 2 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/modal/modal.js.handlebars b/app/assets/javascripts/discourse/templates/modal/modal.js.handlebars
index b55d4e8c600..f9b3cc16c6e 100644
--- a/app/assets/javascripts/discourse/templates/modal/modal.js.handlebars
+++ b/app/assets/javascripts/discourse/templates/modal/modal.js.handlebars
@@ -1,16 +1,22 @@
-<div class="modal-header">
-  <a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a>
-  <h3>{{title}}</h3>
-</div>
-<div id='modal-alert'></div>
+<div id='modal-outer-container'>
+  <div id='modal-middle-container'>
+    <div id='modal-inner-container'>
 
-{{outlet modalBody}}
+      <div class="modal-header">
+        <a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a>
+        <h3>{{title}}</h3>
+      </div>
+      <div id='modal-alert'></div>
 
-{{#each errors}}
-  <div class="alert alert-error">
-    <button class="close" data-dismiss="alert">×</button>
-    {{this}}
+      {{outlet modalBody}}
+
+      {{#each errors}}
+        <div class="alert alert-error">
+          <button class="close" data-dismiss="alert">×</button>
+          {{this}}
+        </div>
+      {{/each}}
+
+    </div>
   </div>
-{{/each}}
-
-
+</div>
diff --git a/app/assets/stylesheets/application/modal.css.scss b/app/assets/stylesheets/application/modal.css.scss
index 9306705d03a..b35c1a9851c 100644
--- a/app/assets/stylesheets/application/modal.css.scss
+++ b/app/assets/stylesheets/application/modal.css.scss
@@ -38,14 +38,18 @@
   filter: alpha(opacity=80);
 }
 
-.modal {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  z-index: 1050;
-  overflow: auto;
-  width: 610px;
-  margin: -250px 0 0 -305px;
+#modal-outer-container {
+  display:table;
+  width:100%;
+  height:100%;
+}
+#modal-middle-container {
+  display:table-cell;
+  vertical-align: middle;
+}
+#modal-inner-container {
+  max-width: 610px;
+  margin: 0 auto;
   background-color: #ffffff;
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.3);
@@ -56,6 +60,14 @@
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   background-clip: padding-box;
 }
+.modal {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1050;
+  overflow: auto;
+}
 .modal.fade {
   -webkit-transition: opacity .3s linear, top .3s ease-out;
   transition: opacity .3s linear, top .3s ease-out;