github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-24 10:02:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brentley Jones 2013-07-16 03:14:26 +00:00
parent 0e504aac9b
commit d1ab694920
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">
<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>

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

@ -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;