Merge pull request #1206 from BrentleyJones/fixed_modals

FIX: Modal dialogs now truly center and work at all screen sizes (mobile), now with working Bootbox

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 class="modal-outer-container">
+  <div class="modal-middle-container">
+    <div class="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>

app/assets/stylesheets/application/history.css.scss

@@ -5,9 +5,11 @@
 @import "foundation/mixins";
 
 .modal.history-modal {
-  width: 960px;
-  margin-left: -460px;
-  min-height: 500px;
+  .modal-inner-container {
+    min-width: 960px;
+    min-height: 500px;
+  }
+
   ins {
     background: #e6ffe6;
   }

app/assets/stylesheets/application/modal.css.scss

@@ -38,13 +38,46 @@
   filter: alpha(opacity=80);
 }
 
+.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);
+  *border: 1px solid #999;
+  /* IE6-7 */
+
+  @include border-radius-all (6px);
+  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;
+}
+
+// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same
+.bootbox.modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   overflow: auto;
   width: 610px;
+  height: auto;
   margin: -250px 0 0 -305px;
   background-color: #ffffff;
   border: 1px solid #999;
@@ -56,6 +89,7 @@
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   background-clip: padding-box;
 }
+
 .modal.fade {
   -webkit-transition: opacity .3s linear, top .3s ease-out;
   transition: opacity .3s linear, top .3s ease-out;