Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1201 from BrentleyJones/fixed_modals 

FIX: Modal dialogs now truely center and work at all screen sizes (mobile)
This commit is contained in:
Robin Ward 2013-07-16 07:31:17 -07:00
parent e9d37f395f d1ab694920
commit 7e889c4e24
2 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/assets/javascripts/discourse/templates/modal/modal.js.handlebars
View File

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

28
app/assets/stylesheets/application/modal.css.scss
View File

@ -38,14 +38,18 @@
filter: alpha(opacity=80); filter: alpha(opacity=80);
} }
.modal { #modal-outer-container {
position: fixed; display:table;
top: 50%; width:100%;
left: 50%; height:100%;
z-index: 1050; }
overflow: auto; #modal-middle-container {
width: 610px; display:table-cell;
margin: -250px 0 0 -305px; vertical-align: middle;
}
#modal-inner-container {
max-width: 610px;
margin: 0 auto;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #999; border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
@ -56,6 +60,14 @@
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
background-clip: padding-box; background-clip: padding-box;
} }
.modal {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1050;
overflow: auto;
}
.modal.fade { .modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out; -webkit-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out; transition: opacity .3s linear, top .3s ease-out;