Merge pull request #3038 from crazyserver/MOBILE-3833

Mobile 3833

src/addons/block/myoverview/components/filteroptions/filteroptions.html

@@ -1,6 +1,8 @@
 <ion-header>
     <ion-toolbar>
-        <h1>{{ 'core.courses.filtermycourses' | translate }}</h1>
+        <ion-title>
+            <h1>{{ 'core.courses.filtermycourses' | translate }}</h1>
+        </ion-title>
         <ion-buttons slot="end">
             <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>

src/core/components/swipe-navigation/swipe-navigation.scss

@@ -6,7 +6,11 @@ ion-slide {
     align-items: start;
 }
 
-::ng-deep {
+:host ::ng-deep {
+
+    .swiper-wrapper {
+        position: absolute;
+    }
 
     core-loading .core-loading-content {
         display: block !important;

src/core/features/user/pages/about/about.html

@@ -14,7 +14,7 @@
     </ion-refresher>
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user">
-            <ion-item class="ion-text-center core-user-profile-maininfo" lines="full">
+            <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
                     <ion-button class="edit-avatar" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"
                         [attr.aria-label]="'core.user.newpicture' | translate" fill="clear" color="dark">

src/core/features/user/pages/profile/profile.html

@@ -4,7 +4,7 @@
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <ion-title>
-            <h1 *ngIf="title">{{ title }}</h1>
+            <h1>{{ user?.fullname }}</h1>
         </ion-title>
     </ion-toolbar>
 </ion-header>
@@ -15,7 +15,7 @@
         </ion-refresher>
         <core-loading [hideUntil]="userLoaded">
             <ion-list *ngIf="user && !isDeleted && isEnrolled">
-                <ion-item class="ion-text-center core-user-profile-maininfo">
+                <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap">
                     <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
                     </core-user-avatar>
                     <ion-label>
@@ -23,7 +23,7 @@
                         <p *ngIf="user.address">
                             <ion-icon name="fas-map-marker-alt" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}
                         </p>
-                        <p *ngIf="rolesFormatted" class="ion-text-wrap">
+                        <p *ngIf="rolesFormatted">
                             <strong>{{ 'core.user.roles' | translate}}</strong>{{'core.labelsep' | translate}}
                             {{ rolesFormatted }}
                         </p>

src/core/features/user/pages/profile/profile.page.ts

@@ -47,7 +47,6 @@ export class CoreUserProfilePage implements OnInit, OnDestroy {
     userLoaded = false;
     isLoadingHandlers = false;
     user?: CoreUserProfile;
-    title?: string;
     isDeleted = false;
     isEnrolled = true;
     rolesFormatted?: string;
@@ -128,7 +127,6 @@ export class CoreUserProfilePage implements OnInit, OnDestroy {
             this.rolesFormatted = 'roles' in user ? CoreUserHelper.formatRoleList(user.roles) : '';
 
             this.user = user;
-            this.title = user.fullname;
 
             // If there's already a subscription, unsubscribe because we'll get a new one.
             this.subscription?.unsubscribe();

src/theme/theme.base.scss

@@ -535,6 +535,10 @@ body.core-iframe-fullscreen ion-router-outlet {
     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}) {
     .core-modal-lateral {
         --ion-safe-area-left: 0px;
@@ -556,6 +560,10 @@ body.core-iframe-fullscreen ion-router-outlet {
 }
 
 @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}) {
         .core-modal-lateral-#{$breakpoint} {
             --ion-safe-area-left: 0px;