EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3833 ux: Show lateral modal is opened from the edge using margin

main
Pau Ferrer Ocaña 2021-12-21 15:12:17 +01:00
parent 0dc79f383d
commit 0037a66349
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/block/myoverview/components/filteroptions/filteroptions.html
View File

@ -1,6 +1,8 @@
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<h1>{{ 'core.courses.filtermycourses' | translate }}</h1> <ion-title>
<h1>{{ 'core.courses.filtermycourses' | translate }}</h1>
</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate"> <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
<ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon> <ion-icon name="fas-times" slot="icon-only" aria-hidden=true></ion-icon>

8
src/theme/theme.base.scss
View File

@ -535,6 +535,10 @@ body.core-iframe-fullscreen ion-router-outlet {
z-index: 100000 !important; z-index: 100000 !important;
} }
.core-modal-lateral .modal-wrapper {
@include margin-horizontal(16px, null);
}
@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) { @media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
.core-modal-lateral { .core-modal-lateral {
--ion-safe-area-left: 0px; --ion-safe-area-left: 0px;
@ -556,6 +560,10 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
@each $breakpoint, $width in $screen-breakpoints { @each $breakpoint, $width in $screen-breakpoints {
.core-modal-lateral-#{$breakpoint} .modal-wrapper {
@include margin-horizontal(16px, null);
}
@media only screen and (min-height: 400px) and (min-width: #{$width}) { @media only screen and (min-height: 400px) and (min-width: #{$width}) {
.core-modal-lateral-#{$breakpoint} { .core-modal-lateral-#{$breakpoint} {
--ion-safe-area-left: 0px; --ion-safe-area-left: 0px;