MOBILE-3807 usermenu: Make lateal modal wider

src/core/classes/modal-lateral-transition.ts

@@ -22,37 +22,61 @@ import { Platform } from '@singletons';
 export function CoreModalLateralTransitionEnter(baseEl: HTMLElement): Animation {
     const OFF_RIGHT = Platform.isRTL ? '-100%' : '100%';
 
-    const backdropAnimation = createAnimation()
+    const otherAnimations: Animation[] = [];
-        .addElement(baseEl.querySelector('ion-backdrop')!)
-        .fromTo('opacity', 0.01, 0.4);
 
-    const wrapperAnimation = createAnimation()
+    const backdrop = baseEl.querySelector('ion-backdrop');
-        .addElement(baseEl.querySelector('.modal-wrapper')!)
+    if (backdrop) {
-        .fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)')
+        const backdropAnimation = createAnimation()
-        .fromTo('opacity', 0.8, 1);
+            .addElement(backdrop)
+            .fromTo('opacity', 0.01, 0.4);
+
+        otherAnimations.push(backdropAnimation);
+    }
+
+    const wrapper = baseEl.querySelector('.modal-wrapper');
+    if (wrapper) {
+        const wrapperAnimation = createAnimation()
+            .addElement(wrapper)
+            .fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)')
+            .fromTo('opacity', 0.8, 1);
+
+        otherAnimations.push(wrapperAnimation);
+    }
 
     return createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(300)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
+        .addAnimation(otherAnimations);
 }
 
 export function CoreModalLateralTransitionLeave(baseEl: HTMLElement): Animation {
     const OFF_RIGHT = Platform.isRTL ? '-100%' : '100%';
 
-    const backdropAnimation = createAnimation()
+    const otherAnimations: Animation[] = [];
-        .addElement(baseEl.querySelector('ion-backdrop')!)
-        .fromTo('opacity', 0.4, 0.0);
 
-    const wrapperAnimation = createAnimation()
+    const backdrop = baseEl.querySelector('ion-backdrop');
-        .addElement(baseEl.querySelector('.modal-wrapper')!)
+    if (backdrop) {
-        .beforeStyles({ opacity: 1 })
+        const backdropAnimation = createAnimation()
-        .fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
+            .addElement(backdrop)
+            .fromTo('opacity', 0.4, 0.0);
+
+        otherAnimations.push(backdropAnimation);
+    }
+
+    const wrapper = baseEl.querySelector('.modal-wrapper');
+    if (wrapper) {
+        const wrapperAnimation = createAnimation()
+            .addElement(wrapper)
+            .beforeStyles({ opacity: 1 })
+            .fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
+
+        otherAnimations.push(wrapperAnimation);
+    }
 
     return createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(300)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
+        .addAnimation(otherAnimations);
 }

src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts

@@ -47,8 +47,9 @@ export class CoreMainMenuUserButtonComponent {
         event.preventDefault();
         event.stopPropagation();
 
-        CoreDomUtils.openModal<void>({
+        CoreDomUtils.openSideModal<void>({
             component: CoreMainMenuUserMenuComponent,
+            cssClass: 'core-modal-lateral-sm',
         });
     }
 

src/core/services/utils/dom.ts

@@ -1677,13 +1677,13 @@ export class CoreDomUtilsProvider {
         modalOptions: ModalOptions,
     ): Promise<T | undefined> {
 
-        modalOptions = Object.assign(modalOptions, {
+        modalOptions = Object.assign({
             cssClass: 'core-modal-lateral',
             showBackdrop: true,
             backdropDismiss: true,
             enterAnimation: CoreModalLateralTransitionEnter,
             leaveAnimation: CoreModalLateralTransitionLeave,
-        });
+        }, modalOptions);
 
         return await this.openModal<T>(modalOptions);
     }

src/theme/globals.variables.scss

@@ -102,6 +102,8 @@ $screen-breakpoints: (
     xl: 1200px
 ) !default;
 
+$modal-lateral-width: 360px;
+
 $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
 $core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
 $core-text-hightlight-background-color: lighten($blue, 40%) !default;

src/theme/theme.base.scss

@@ -508,7 +508,7 @@ body.core-iframe-fullscreen ion-router-outlet {
     z-index: 100000 !important;
 }
 
-@media only screen and (min-height: 400px) and (min-width: 300px) {
+@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
     .core-modal-lateral {
         --ion-safe-area-left: 0px;
         --ion-safe-area-right: 0px;
@@ -519,7 +519,7 @@ body.core-iframe-fullscreen ion-router-outlet {
             display: block;
             height: 100% !important;
             width: auto;
-            min-width: 300px;
+            min-width: #{$modal-lateral-width};
             box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
         }
         ion-backdrop {
@@ -528,6 +528,29 @@ body.core-iframe-fullscreen ion-router-outlet {
     }
 }
 
+@each $breakpoint, $width in $screen-breakpoints {
+    @media only screen and (min-height: 400px) and (min-width: #{$width}) {
+        .core-modal-lateral-#{$breakpoint} {
+            --ion-safe-area-left: 0px;
+            --ion-safe-area-right: 0px;
+    
+            .modal-wrapper {
+                position: absolute;
+                @include position(0 !important, 0 !important, 0 !important, unset !important);
+                display: block;
+                height: 100% !important;
+                width: auto;
+                min-width: #{$width};
+                box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+            }
+            ion-backdrop {
+                visibility: visible;
+            }
+        }
+    }
+    
+}
+
 // Hidden submit button.
 .core-submit-hidden-enter {
     position: absolute;