Improve responsiveness

This commit is contained in:
Peter Maquiran
2021-04-23 14:30:18 +01:00
parent f4eafbf9f1
commit 8f76806ae4
7 changed files with 96 additions and 78 deletions
+59 -30
View File
@@ -371,26 +371,66 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
}
}
.modal-width-100-width-background {
.modal-width-100-width-background, .modal-desktop {
.modal-wrapper{
width: 100% !important;
height: 99% !important;
top: 2%;
position: relative;
}
}
.modal-padding-top{
.modal-wrapper{
height: 99%;
top: 2%;
position: relative;
}
}
.modal-top-100-width-background, .modal-desktop {
.modal-wrapper{
width: 100%;
height: 99%;
top: 1%;
position: relative
top: 2%;
position: relative;
}
}
@media only screen and (min-width: 1366px) {
.modal-desktop-shadow{
.ion-page{
box-shadow: 0 0 15px 0 rgb(0 0 0 / 49%);
}
}
.modal-desktop-remove-background{
padding-top: 0px;
top: 85px;
ion-backdrop{
display: none;
transform: none !important;
}
.modal-wrapper{
transform: none !important;
box-shadow: none !important;
height: 100% !important;
top: unset !important;
.ion-page {
transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
}
}
}
}
.search-desktop-modal{
.modal-wrapper{
position: absolute;
right: 0px;
height: 100%;
width: 400px;
}
.modal-desktop-shadow{
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.49);
}
.footer-container{
padding: 10px 20px;
}
@@ -418,6 +458,14 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
}
}
.modal-width-100{
.modal-wrapper{
width: 100%;
height: 100%;
}
}
@media only screen and (min-width: 1365px) {
.search-modal{
@@ -434,25 +482,6 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
@media only screen and (min-width: 1366px) {
.search-modal-to-desktop{
padding-top: 0px;
top: 75px;
.modal-wrapper{
transform: none !important;
width: 100%;
height: 100%;
box-shadow: none !important;
.ion-page {
transform: none !important;
}
}
}
}
@media only screen and (min-width: 1024px) {
.timeline-mobile{