Merge pull request #1201 from BrentleyJones/fixed_modals

FIX: Modal dialogs now truely center and work at all screen sizes (mobile)

app/assets/javascripts/discourse/templates/modal/modal.js.handlebars

@@ -1,16 +1,22 @@
-<div class="modal-header">
+<div id='modal-outer-container'>
+  <div id='modal-middle-container'>
+    <div id='modal-inner-container'>
+
+      <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>
+      <div id='modal-alert'></div>
 
-{{outlet modalBody}}
+      {{outlet modalBody}}
 
-{{#each errors}}
+      {{#each errors}}
         <div class="alert alert-error">
           <button class="close" data-dismiss="alert">×</button>
           {{this}}
         </div>
-{{/each}}
-
+      {{/each}}
 
+    </div>
+  </div>
+</div>

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;