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 b55d4e8c6..f9b3cc16c 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 9306705d0..b35c1a985 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;