tobast/glowingbear-mainbox
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix modal so that it reliably works on all plattforms

Browse source
This commit is contained in:
Lorenz Hübschle-Schneider 2014-07-20 11:40:23 +01:00
parent 15bb4a21d9
commit bc958a3f7b
2 changed files with 44 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
css/glowingbear.css
View file

@ -360,29 +360,54 @@ table.notimestampseconds td.time span.seconds {
} }
.gb-modal { .gb-modal {
position: absolute; z-index: 1000;
left: 0px; height: 100%;
width:100%; overflow-y: scroll;
height: 100%; position: absolute;
z-index: 1000; top: 0;
background-color:rgba(0, 0, 0, 0.5) left: 0;
width: 100%;
} }
.gb-modal[data-state=hidden] { .gb-modal[data-state=hidden] {
transition: .2s ease-in-out, top .2s ease-in; transition: .2s ease-in-out;
transition-delay: 0.1s, 0s;
top: -150px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.gb-modal[data-state=visible] { .gb-modal[data-state=visible] {
transition: .2s ease-in-out, top .3s ease-out; transition: .2s ease-in-out;
transition-delay: 0s, 0.1s;
top: 0px;
height: 200%;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.gb-modal[data-state=hidden] .modal-dialog {
transition: top .3s ease-in;
top: -150px;
}
.gb-modal[data-state=visible] .modal-dialog {
transition: top .3s ease-out;
top: 0px;
}
.gb-modal .backdrop {
z-index: 999;
position: fixed;
top: 0;
height: 100%;
width: 100%;
overflow: none;
background-color:rgba(0, 0, 0, 0.5)
}
.gb-modal .modal-dialog {
z-index: 1001;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 35px;
}
.gb-modal[ng-click], .gb-modal div[ng-click] { .gb-modal[ng-click], .gb-modal div[ng-click] {
cursor: default; cursor: default;
} }
@ -552,6 +577,11 @@ h2 span, h2 small {
padding: 0px !important; padding: 0px !important;
} }
.gb-modal .modal-dialog {
margin: 20px 2%;
width: 96%;
}
/* a different colour is too irregular on mobile */ /* a different colour is too irregular on mobile */
.repeated-time .cof-chat_time, .repeated-time .cof-chat_time,
.repeated-time .cof-chat_time_delimiters { .repeated-time .cof-chat_time_delimiters {

1
index.html
View file

@ -264,6 +264,7 @@ $ openssl req -nodes -newkey rsa:4096 -keyout relay.pem -x509 -days 365 -out rel
</div> </div>
<div id="soundNotification"></div> <div id="soundNotification"></div>
<div id="settingsModal" class="gb-modal" data-state="hidden"> <div id="settingsModal" class="gb-modal" data-state="hidden">
<div class="backdrop" ng-click="closeModal($event)"></div>
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">