codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-30 19:08:10 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1206 from BrentleyJones/fixed_modals

Browse source 
FIX: Modal dialogs now truly center and work at all screen sizes (mobile), now with working Bootbox
This commit is contained in:
Robin Ward 2013-07-17 06:59:48 -07:00
commit 5a5e9d0fd1
3 changed files with 58 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/assets/javascripts/discourse/templates/modal/modal.js.handlebars
View file

@ -1,3 +1,7 @@
<div class="modal-outer-container">
<div class="modal-middle-container">
<div class="modal-inner-container">
<div class="modal-header"> <div class="modal-header">
<a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a> <a class="close" {{action closeModal}}><i class='icon-remove icon'></i></a>
<h3>{{title}}</h3> <h3>{{title}}</h3>
@ -13,4 +17,6 @@
</div> </div>
{{/each}} {{/each}}
</div>
</div>
</div>

6
app/assets/stylesheets/application/history.css.scss
View file

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

34
app/assets/stylesheets/application/modal.css.scss
View file

@ -38,13 +38,46 @@
filter: alpha(opacity=80); 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 { .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; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 1050; z-index: 1050;
overflow: auto; overflow: auto;
width: 610px; width: 610px;
height: auto;
margin: -250px 0 0 -305px; margin: -250px 0 0 -305px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #999; border: 1px solid #999;
@ -56,6 +89,7 @@
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.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;