Merge pull request #3146 from crazyserver/MOBILE-3814

Mobile 3814
2022-03-01 10:34:51 +01:00 · 2022-03-01 10:34:51 +01:00 · b89735eef9
parent 003a7d7ea2 331b16440f
commit b89735eef9
80 changed files with 762 additions and 718 deletions
--- a/src/addons/badges/pages/issued-badge/issued-badge.html
+++ b/src/addons/badges/pages/issued-badge/issued-badge.html
@ -13,7 +13,7 @@
    <ion-refresher slot="fixed" [disabled]="!badgeLoaded" (ionRefresh)="refreshBadges($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="badgeLoaded">
+    <core-loading [hideUntil]="badgeLoaded" class="list-item-limited-width">
        <ion-item-group *ngIf="badge">
            <ion-item class="ion-text-wrap ion-text-center">
                <ion-label>
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@ -15,7 +15,7 @@
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ion-item *ngIf="showMyEntriesToggle">
            <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)"></ion-toggle>
@ -68,7 +68,8 @@
                </ion-card-content>
                <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
                    <ion-note>
-                        <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified |
+                        <ion-icon name="fas-clock" [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified
+                        |
                        coreTimeAgo}}
                    </ion-note>
                </div>
--- a/src/addons/calendar/components/components.module.ts
+++ b/src/addons/calendar/components/components.module.ts
@ -18,14 +18,14 @@ import { CoreSharedModule } from '@/core/shared.module';

 import { AddonCalendarCalendarComponent } from './calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from './upcoming-events/upcoming-events';
-import { AddonCalendarFilterPopoverComponent } from './filter/filter';
+import { AddonCalendarFilterComponent } from './filter/filter';
 import { AddonCalendarReminderTimeModalComponent } from './reminder-time-modal/reminder-time-modal';

@NgModule({
    declarations: [
        AddonCalendarCalendarComponent,
        AddonCalendarUpcomingEventsComponent,
-        AddonCalendarFilterPopoverComponent,
+        AddonCalendarFilterComponent,
        AddonCalendarReminderTimeModalComponent,
    ],
    imports: [
@ -36,7 +36,7 @@ import { AddonCalendarReminderTimeModalComponent } from './reminder-time-modal/r
    exports: [
        AddonCalendarCalendarComponent,
        AddonCalendarUpcomingEventsComponent,
-        AddonCalendarFilterPopoverComponent,
+        AddonCalendarFilterComponent,
        AddonCalendarReminderTimeModalComponent,
    ],
 })
--- a/src/addons/calendar/components/filter/addon-calendar-filter-popover.html
+++ b/src/addons/calendar/components/filter/addon-calendar-filter-popover.html
@ -1,18 +0,0 @@
-<ion-list>
-    <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
-        <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
-        <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
-        <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
-    </ion-item>
-    <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
-    <ng-container *ngIf="filter.course || filter.category || filter.group">
-        <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
-            <ion-item class="ion-text-wrap" *ngFor="let course of courses">
-                <ion-label>
-                    <core-format-text [text]="course.fullname"></core-format-text>
-                </ion-label>
-                <ion-radio slot="end" [value]="course.id"></ion-radio>
-            </ion-item>
-        </ion-radio-group>
-    </ng-container>
-</ion-list>
--- a/src/addons/calendar/components/filter/filter.html
+++ b/src/addons/calendar/components/filter/filter.html
@ -0,0 +1,29 @@
+<ion-header class="no-title">
+    <ion-toolbar>
+        <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>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+    <ion-list>
+        <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
+            <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
+            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end"></ion-toggle>
+        </ion-item>
+        <core-spacer *ngIf="filter.course || filter.category || filter.group"></core-spacer>
+        <ng-container *ngIf="filter.course || filter.category || filter.group">
+            <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
+                <ion-item class="ion-text-wrap" *ngFor="let course of courses">
+                    <ion-label>
+                        <core-format-text [text]="course.fullname"></core-format-text>
+                    </ion-label>
+                    <ion-radio slot="end" [value]="course.id"></ion-radio>
+                </ion-item>
+            </ion-radio-group>
+        </ng-container>
+    </ion-list>
+</ion-content>
--- a/src/addons/calendar/components/filter/filter-popover.scss
+++ b/src/addons/calendar/components/filter/filter-popover.scss
--- a/src/addons/calendar/components/filter/filter.ts
+++ b/src/addons/calendar/components/filter/filter.ts
@ -15,6 +15,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { CoreUtils } from '@services/utils/utils';
+import { ModalController } from '@singletons';
 import { CoreEvents } from '@singletons/events';
 import { AddonCalendarEventType, AddonCalendarProvider } from '../../services/calendar';
 import { AddonCalendarFilter, AddonCalendarEventIcons } from '../../services/calendar-helper';
@ -23,11 +24,11 @@ import { AddonCalendarFilter, AddonCalendarEventIcons } from '../../services/cal
 * Component to display the events filter that includes events types and a list of courses.
 */
@Component({
-    selector: 'addon-calendar-filter-popover',
-    templateUrl: 'addon-calendar-filter-popover.html',
-    styleUrls: ['../../calendar-common.scss', 'filter-popover.scss'],
+    selector: 'addon-calendar-filter',
+    templateUrl: 'filter.html',
+    styleUrls: ['../../calendar-common.scss', 'filter.scss'],
 })
-export class AddonCalendarFilterPopoverComponent implements OnInit {
+export class AddonCalendarFilterComponent implements OnInit {

    @Input() filter: AddonCalendarFilter = {
        filtered: false,
@ -56,7 +57,7 @@ export class AddonCalendarFilterPopoverComponent implements OnInit {
    }

    /**
-     * Init the component.
+     * @inheritdoc
     */
    ngOnInit(): void {
        this.courseId = this.filter.courseId || -1;
@ -80,4 +81,11 @@ export class AddonCalendarFilterPopoverComponent implements OnInit {
        CoreEvents.trigger(AddonCalendarProvider.FILTER_CHANGED_EVENT, this.filter);
    }

+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        ModalController.dismiss();
+    }
+
 }
--- a/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
@ -1,11 +1,12 @@
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" class="list-item-limited-width">
    <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" [message]="'addon.calendar.noevents' | translate">
    </core-empty-box>

    <ion-list *ngIf="filteredEvents && filteredEvents.length" class="ion-no-margin">
        <ng-container *ngFor="let event of filteredEvents">
+            <ion-card>
                <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
-                [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" detail="true">
+                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" [detail]="false">
                    <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [modname]="event.modulename"
                        [componentId]="event.instance" [showAlt]="false"></core-mod-icon>
                    <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start" aria-hidden="true">
@ -31,6 +32,7 @@
                        <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
                    </ion-note>
                </ion-item>
+            </ion-card>
        </ng-container>
    </ion-list>

--- a/src/addons/calendar/pages/day/day.html
+++ b/src/addons/calendar/pages/day/day.html
@ -7,7 +7,7 @@
            <h1>{{ 'addon.calendar.calendarevents' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
            </ion-button>
            <core-context-menu>
@ -50,7 +50,7 @@

            <core-swipe-slides [manager]="manager">
                <ng-template let-day="item">
-                    <core-loading [hideUntil]="day.loaded" class="safe-area-padding">
+                    <core-loading [hideUntil]="day.loaded" class="safe-area-padding list-item-limited-width">
                        <!-- There is data to be synchronized -->
                        <ion-card class="core-warning-card" *ngIf="day.hasOffline">
                            <ion-item>
@ -65,9 +65,10 @@

                        <ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
                            <ng-container *ngFor="let event of day.filteredEvents">
+                                <ion-card>
                                    <ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
                                        (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
-                                    [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
+                                        [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button [detail]="false">
                                        <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
                                            [modname]="event.modulename" [componentId]="event.instance">
                                        </core-mod-icon>
@ -78,7 +79,8 @@
                                            <!-- Add the icon title so accessibility tools read it. -->
                                            <span class="sr-only">
                                                {{ 'addon.calendar.type' + event.formattedType | translate }}
-                                            <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
+                                                <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle
+                                                    }}</span>
                                            </span>
                                            <p class="item-heading">
                                                <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
@ -95,6 +97,7 @@
                                            <span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
                                        </ion-note>
                                    </ion-item>
+                                </ion-card>
                            </ng-container>
                        </ion-list>
                    </core-loading>
--- a/src/addons/calendar/pages/day/day.page.ts
+++ b/src/addons/calendar/pages/day/day.page.ts
@ -31,7 +31,7 @@ import { AddonCalendarFilter, AddonCalendarHelper } from '../../services/calenda
 import { AddonCalendarSync, AddonCalendarSyncProvider } from '../../services/calendar-sync';
 import { CoreCategoryData, CoreCourses, CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
-import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
+import { AddonCalendarFilterComponent } from '../../components/filter/filter';
 import moment from 'moment';
 import { Network, NgZone } from '@singletons';
 import { CoreNavigator } from '@services/navigator';
@ -348,18 +348,15 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
    }

    /**
-     * Show the context menu.
-     *
-     * @param event Event.
+     * Show the filter menu.
     */
-    async openFilter(event: MouseEvent): Promise<void> {
-        await CoreDomUtils.openPopover({
-            component: AddonCalendarFilterPopoverComponent,
+    async openFilter(): Promise<void> {
+        await CoreDomUtils.openSideModal({
+            component: AddonCalendarFilterComponent,
            componentProps: {
                courses: this.manager?.getSource().courses,
                filter: this.filter,
            },
-            event,
        });
    }

--- a/src/addons/calendar/pages/index/index.html
+++ b/src/addons/calendar/pages/index/index.html
@ -7,7 +7,7 @@
            <h1>{{ (showCalendar ? 'addon.calendar.calendarevents' : 'addon.calendar.upcomingevents') | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
-            <ion-button fill="clear" (click)="openFilter($event)" [attr.aria-label]="'core.filter' | translate">
+            <ion-button fill="clear" (click)="openFilter()" [attr.aria-label]="'core.filter' | translate">
                <ion-icon slot="icon-only" name="fas-filter" aria-hidden="true"></ion-icon>
            </ion-button>
            <core-context-menu>
--- a/src/addons/calendar/pages/index/index.page.ts
+++ b/src/addons/calendar/pages/index/index.page.ts
@ -29,7 +29,7 @@ import { CoreEnrolledCourseData } from '@features/courses/services/courses';
 import { ActivatedRoute, Params } from '@angular/router';
 import { AddonCalendarCalendarComponent } from '../../components/calendar/calendar';
 import { AddonCalendarUpcomingEventsComponent } from '../../components/upcoming-events/upcoming-events';
-import { AddonCalendarFilterPopoverComponent } from '../../components/filter/filter';
+import { AddonCalendarFilterComponent } from '../../components/filter/filter';
 import { CoreNavigator } from '@services/navigator';
 import { CoreLocalNotifications } from '@services/local-notifications';
 import { CoreConstants } from '@/core/constants';
@ -328,18 +328,15 @@ export class AddonCalendarIndexPage implements OnInit, OnDestroy {
    }

    /**
-     * Show the context menu.
-     *
-     * @param event Event.
+     * Show the filter menu.
     */
-    async openFilter(event: MouseEvent): Promise<void> {
-        await CoreDomUtils.openPopover({
-            component: AddonCalendarFilterPopoverComponent,
+    async openFilter(): Promise<void> {
+        await CoreDomUtils.openSideModal({
+            component: AddonCalendarFilterComponent,
            componentProps: {
                courses: this.courses,
                filter: this.filter,
            },
-            event,
        });
    }

--- a/src/addons/competency/pages/competency/competency.html
+++ b/src/addons/competency/pages/competency/competency.html
@ -14,7 +14,7 @@
    <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded">
+    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
        <ion-card *ngIf="user">
            <ion-item class="ion-text-wrap">
                <core-user-avatar [user]="user" slot="start"></core-user-avatar>
--- a/src/addons/competency/pages/competencysummary/competencysummary.html
+++ b/src/addons/competency/pages/competencysummary/competencysummary.html
@ -14,7 +14,7 @@
    <ion-refresher slot="fixed" [disabled]="!competencyLoaded" (ionRefresh)="refreshCompetency($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="competencyLoaded">
+    <core-loading [hideUntil]="competencyLoaded" class="list-item-limited-width">
        <ion-card *ngIf="competency">
            <ion-item class="ion-text-wrap" *ngIf="competency.competency.description">
                <ion-label>
--- a/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
+++ b/src/addons/competency/pages/coursecompetencies/coursecompetencies.html
@ -12,7 +12,7 @@
    <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshCourseCompetencies($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded">
+    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
        <ion-card *ngIf="!user && courseCompetencies && courseCompetencies.statistics.competencycount > 0">
            <ng-container *ngIf="courseCompetencies.cangradecompetencies">
                <ion-item class="ion-text-wrap" *ngIf="courseCompetencies.settings.pushratingstouserplans">
--- a/src/addons/competency/pages/plan/plan.html
+++ b/src/addons/competency/pages/plan/plan.html
@ -12,7 +12,7 @@
    <ion-refresher slot="fixed" [disabled]="!competencies.loaded" (ionRefresh)="refreshLearningPlan($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="competencies.loaded">
+    <core-loading [hideUntil]="competencies.loaded" class="list-item-limited-width">
        <ion-card *ngIf="user">
            <ion-item class="ion-text-wrap">
                <ion-label>
--- a/src/addons/messages/pages/discussion/discussion.html
+++ b/src/addons/messages/pages/discussion/discussion.html
@ -69,7 +69,8 @@

        <h2 class="sr-only">{{ title }}</h2>

-        <ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
+        <ion-list class="addon-messages-discussion-container list-item-limited-width" [class.addon-messages-discussion-group]="isGroup"
+            [attr.aria-live]="'polite'">
            <ng-container *ngFor="let message of messages; index as index; last as last">
                <h3 class="ion-text-center addon-messages-date" *ngIf="message.showDate">
                    {{ message.timecreated | coreFormatDate: "strftimedayshort" }}
@ -157,7 +158,7 @@
            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" (click)="confirmContactRequest()">
                {{ 'addon.messages.acceptandaddcontact' | translate }}
            </ion-button>
-            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" fill="outline" (click)="declineContactRequest()">
+            <ion-button expand="block" class="ion-text-wrap ion-margin-bottom" color="light" (click)="declineContactRequest()">
                {{ 'addon.messages.decline' | translate }}
            </ion-button>
        </div>
--- a/src/addons/mod/assign/components/index/addon-mod-assign-index.html
+++ b/src/addons/mod/assign/components/index/addon-mod-assign-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" class="list-item-limited-width">

    <!-- User and status of the submission. -->
    <ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
--- a/src/addons/mod/bigbluebuttonbn/components/index/index.html
+++ b/src/addons/mod/bigbluebuttonbn/components/index/index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-page">
+<core-loading [hideUntil]="!showLoading" class="safe-area-page list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addons/mod/book/components/index/addon-mod-book-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addons/mod/chat/components/index/addon-mod-chat-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@ -7,7 +7,7 @@

 <!-- Content. -->
 <core-loading [hideUntil]="!showLoading">
-
+    <div class="list-item-limited-width">
        <!-- Activity info. -->
        <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
            [courseId]="courseId" [hasDataToSync]="hasOffline">
@ -30,7 +30,8 @@
                <ion-label>
                    <p *ngIf="options.length">
                        {{ 'addon.mod_choice.yourselection' | translate }}
-                    <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
+                        <core-format-text [text]="options[0].text" contextLevel="module" [contextInstanceId]="module.id"
+                            [courseId]="courseId">
                        </core-format-text>
                    </p>
                    <p>{{ 'addon.mod_choice.expired' | translate:{$a: closeTimeReadable} }}</p>
@ -65,7 +66,7 @@
                </ion-item>
            </ion-radio-group>
        </ion-card>
-
+    </div>
    <!-- Choice results -->
    <div *ngIf="canSeeResults && choice">
        <ion-item-divider>
--- a/src/addons/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addons/mod/data/components/index/addon-mod-data-index.html
@ -18,7 +18,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/data/pages/entry/entry.html
+++ b/src/addons/mod/data/pages/entry/entry.html
@ -16,7 +16,8 @@
        (ionRefresh)="refreshDatabase($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)">
+    <core-loading [hideUntil]="entryLoaded && (isPullingToRefresh || !renderingEntry && !loadingRating && !loadingComments)"
+        class="list-item-limited-width">
        <!-- Database entries found to be synchronized -->
        <ion-card class="core-warning-card" *ngIf="entry && entry.hasOffline">
            <ion-item>
--- a/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
+++ b/src/addons/mod/feedback/components/index/addon-mod-feedback-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@ -12,7 +12,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
+    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer list-item-limited-width">
        <ng-container *ngIf="items && items.length">
            <ion-list class="ion-no-margin has-spacer">
                <ion-item class="ion-text-wrap">
--- a/src/addons/mod/folder/components/index/addon-mod-folder-index.html
+++ b/src/addons/mod/folder/components/index/addon-mod-folder-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info *ngIf="!subfolder" [module]="module" [description]="description" [component]="component"
--- a/src/addons/mod/forum/pages/discussion/discussion.html
+++ b/src/addons/mod/forum/pages/discussion/discussion.html
@ -60,7 +60,7 @@
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

-    <core-loading [hideUntil]="discussionLoaded">
+    <core-loading [hideUntil]="discussionLoaded" class="list-item-limited-width">
        <!-- Discussion replies found to be synchronized -->
        <ion-card class="core-warning-card" *ngIf="postHasOffline || hasOfflineRatings">
            <ion-item>
--- a/src/addons/mod/glossary/pages/entry/entry.html
+++ b/src/addons/mod/glossary/pages/entry/entry.html
@ -16,7 +16,7 @@
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ng-container *ngIf="entry && loaded">
            <ion-item class="ion-text-wrap" *ngIf="showAuthor">
                <core-user-avatar [user]="entry" slot="start"></core-user-avatar>
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">
    <core-tabs [hideUntil]="!showLoading" [selectedIndex]="selectedTab">
        <!-- Index/Preview tab. -->
        <core-tab [title]="'addon.mod_lesson.preview' | translate" (ionSelect)="indexSelected()">
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@ -18,7 +18,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <!-- Info messages. Only show the first one. -->
        <ion-card class="core-info-card" *ngIf="lesson && messages?.length">
            <ion-item class="ion-text-wrap">
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@ -13,7 +13,7 @@
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <div *ngIf="student">
            <!-- Student data. -->
            <ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
--- a/src/addons/mod/lti/components/index/addon-mod-lti-index.html
+++ b/src/addons/mod/lti/components/index/addon-mod-lti-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
--- a/src/addons/mod/page/components/index/addon-mod-page-index.html
+++ b/src/addons/mod/page/components/index/addon-mod-page-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
--- a/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addons/mod/quiz/components/index/addon-mod-quiz-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/quiz/pages/attempt/attempt.html
+++ b/src/addons/mod/quiz/pages/attempt/attempt.html
@ -16,7 +16,7 @@
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ion-list *ngIf="attempt">
            <ion-item class="ion-text-wrap">
                <ion-label>
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@ -31,7 +31,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded" class="has-spacer">
+    <core-loading [hideUntil]="loaded" class="has-spacer list-item-limited-width">
        <!-- Button to start attempting. -->
        <ion-button *ngIf="!attempt" expand="block" class="ion-margin" (click)="start()">
            {{ 'addon.mod_quiz.startattempt' | translate }}
--- a/src/addons/mod/quiz/pages/review/review.html
+++ b/src/addons/mod/quiz/pages/review/review.html
@ -19,7 +19,7 @@
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">

        <!-- Review summary -->
        <ion-card *ngIf="attempt">
--- a/src/addons/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addons/mod/resource/components/index/addon-mod-resource-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding core-loading-full-height list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [courseId]="courseId" [description]="displayDescription && description"
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
@ -21,7 +21,7 @@
        </ion-item>
    </ion-card>

-    <div *ngIf="scorm && !showLoading && !scorm.warningMessage" class="list-item-limited-width">
+    <div *ngIf="scorm && !showLoading && !scorm.warningMessage">
        <!-- Attempts status. -->
        <ion-card *ngIf="(scorm.displayattemptstatus || offlineAttempts.length) && !skip">
            <ion-card-header class="ion-text-wrap">
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading" class="safe-area-padding">
+<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
--- a/src/addons/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addons/mod/url/components/index/addon-mod-url-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="displayDescription && description" [component]="component"
--- a/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
+++ b/src/addons/mod/wiki/components/index/addon-mod-wiki-index.html
@ -27,7 +27,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="description" [component]="component" [componentId]="componentId"
--- a/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
+++ b/src/addons/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" class="list-item-limited-width">
    <ion-item class="ion-text-wrap" [detail]="canViewAssessment && !canSelfAssess" (click)="gotoAssessment($event)"
        [button]="canViewAssessment && !canSelfAssess">
        <core-user-avatar [user]="profile" slot="start" [courseId]="courseId" [userId]="profile?.id"></core-user-avatar>
--- a/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
+++ b/src/addons/mod/workshop/components/index/addon-mod-workshop-index.html
@ -6,7 +6,7 @@
 </core-navbar-buttons>

 <!-- Content. -->
-<core-loading [hideUntil]="!showLoading">
+<core-loading [hideUntil]="!showLoading" class="list-item-limited-width">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [hasDataToSync]="hasOffline">
--- a/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addons/mod/workshop/components/submission/addon-mod-workshop-submission.html
@ -1,4 +1,4 @@
-<core-loading [hideUntil]="loaded">
+<core-loading [hideUntil]="loaded" class="list-item-limited-width">
    <div *ngIf="!summary">
        <ion-item class="ion-text-wrap addon-workshop-submission-title">
            <core-user-avatar [user]="profile" [courseId]="courseId" [userId]="profile?.id" slot="start">
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@ -30,7 +30,7 @@
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

-    <core-loading [hideUntil]="notesLoaded">
+    <core-loading [hideUntil]="notesLoaded" class="list-item-limited-width">
        <ion-item class="ion-text-wrap" *ngIf="user">
            <core-user-avatar [user]="user" [courseId]="courseId" slot="start" [linkProfile]="false"></core-user-avatar>
            <ion-label>
--- a/src/addons/notifications/pages/list/list.html
+++ b/src/addons/notifications/pages/list/list.html
@ -16,8 +16,11 @@
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
    <core-loading [hideUntil]="notificationsLoaded">
+        <div class="list-item-limited-width">
+
            <div class="ion-padding" *ngIf="canMarkAllNotificationsAsRead">
-            <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()" fill="outline">
+                <ion-button [disabled]="loadingMarkAllNotificationsAsRead" expand="block" (click)="markAllNotificationsAsRead()"
+                    fill="outline">
                    <ion-icon slot="start" name="fas-check" aria-hidden="true" *ngIf="!loadingMarkAllNotificationsAsRead"></ion-icon>
                    <ion-spinner slot="start" [attr.aria-label]="'core.loading' | translate" *ngIf="loadingMarkAllNotificationsAsRead">
                    </ion-spinner>
@ -40,8 +43,8 @@
                        </core-mod-icon>
                    </core-user-avatar>

-                <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt="" role="presentation"
-                    class="core-notification-icon" slot="start">
+                    <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt=""
+                        role="presentation" class="core-notification-icon" slot="start">

                    <ion-label>
                        <p class="item-heading">
@ -69,11 +72,11 @@
                    [data]="notification.customdata">
                </addon-notifications-actions>
            </ion-card>
+        </div>

        <core-empty-box *ngIf="!notifications || notifications.length <= 0" icon="far-bell"
            [message]="'addon.notifications.therearentnotificationsyet' | translate">
        </core-empty-box>
-
        <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreNotifications($event)" [error]="loadMoreError">
        </core-infinite-loading>
    </core-loading>
--- a/src/addons/privatefiles/pages/index/index.html
+++ b/src/addons/privatefiles/pages/index/index.html
@ -14,7 +14,7 @@
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>

-    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
+    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="list-item-limited-width">
        <!-- Allow selecting the files to see: private or site. -->
        <core-combobox [selection]="root" (onChange)="rootChanged($event)" *ngIf="showPrivateFiles && showSiteFiles && !path">
            <ion-select-option class="ion-text-wrap" value="my">
--- a/src/addons/storagemanager/pages/course-storage/course-storage.html
+++ b/src/addons/storagemanager/pages/course-storage/course-storage.html
@ -9,7 +9,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ion-card class="wholecourse">
            <ion-card-header>
                <p class="ion-text-wrap ion-no-margin">{{ 'addon.storagemanager.courseinfo' | translate }}</p>
--- a/src/addons/storagemanager/pages/courses-storage/courses-storage.html
+++ b/src/addons/storagemanager/pages/courses-storage/courses-storage.html
@ -9,7 +9,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <div class="ion-padding-horizontal ion-text-wrap" *ngIf="spaceUsage">
            <h2>{{ 'addon.storagemanager.alldata' | translate }}</h2>
        </div>
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@ -81,6 +81,12 @@
        flex-direction: column;
    }

+    &.list-item-limited-width .core-loading-content {
+        max-width: var(--list-item-max-width);
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
    &.safe-area-padding:not(.core-loading-inline) .core-loading-content,
    &.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
        @include safe-area-padding-horizontal(0px, 0px);
--- a/src/core/features/comments/pages/viewer/viewer.html
+++ b/src/core/features/comments/pages/viewer/viewer.html
@ -38,7 +38,7 @@
        <core-infinite-loading [enabled]="canLoadMore" position="top" (action)="loadPrevious($event)" [error]="loadMoreError">
        </core-infinite-loading>

-        <ion-list class="addon-messages-discussion-container">
+        <ion-list class="addon-messages-discussion-container  list-item-limited-width">
            <ng-container *ngFor="let comment of comments; index as index; last as last">

                <p class="ion-text-center addon-messages-date" *ngIf="comment.showDate">
--- a/src/core/features/course/components/tag-area/core-course-tag-area.html
+++ b/src/core/features/course/components/tag-area/core-course-tag-area.html
@ -1,8 +1,10 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button
-    detail="true">
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" (click)="openCourse(item.courseId)" [attr.aria-label]="item.courseName" button detail="true">
        <ion-icon name="fas-graduation-cap" slot="start" aria-hidden="true"></ion-icon>
        <ion-label>
            <p class="item-heading">{{ item.courseName }}</p>
            <p *ngIf="item.categoryName">{{ 'core.category' | translate }}: {{ item.categoryName }}</p>
        </ion-label>
    </ion-item>
+
+</ion-card>
--- a/src/core/features/course/pages/module-preview/module-preview.html
+++ b/src/core/features/course/pages/module-preview/module-preview.html
@ -22,7 +22,7 @@
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="loaded" class="has-spacer">
+    <core-loading [hideUntil]="loaded" class="has-spacer list-item-limited-width">
        <core-course-module-info [module]="module" [courseId]="courseId" [description]="module.description" [component]="module.modname"
            [componentId]="module.id" [expandDescription]="true" [showAvailabilityInfo]="true">
            <div class="core-module-additional-info" title>
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@ -102,7 +102,7 @@ ion-chip {

 // List layout.
 ion-card.core-course-list-item {
-    max-width: var(--list-item--max-width);
+    max-width: var(--list-item-max-width);

    ion-icon.course-icon {
        padding: 12px;
--- a/src/core/features/login/pages/change-password/change-password.html
+++ b/src/core/features/login/pages/change-password/change-password.html
@ -16,7 +16,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list>
+    <ion-list class="list-item-limited-width">
        <ng-container *ngIf="!changingPassword">
            <ion-item class="ion-text-wrap">
                <ion-label>
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@ -16,7 +16,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
-    <core-loading [hideUntil]="pageLoaded">
+    <core-loading [hideUntil]="pageLoaded" class="list-item-limited-width">
        <div class="ion-text-wrap ion-text-center ion-margin-bottom">
            <div class="core-login-site-logo">
                <!-- Show site logo or a default image. -->
@ -73,7 +73,7 @@
                    <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
                </ion-label>
            </ion-item>
-            <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
+            <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
                (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
                <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
                <ion-label>{{provider.name}}</ion-label>
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@ -20,6 +20,7 @@
    <ion-refresher slot="fixed" [disabled]="!settingsLoaded || isMinor" (ionRefresh)="refreshSettings($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
+    <div class="list-item-limited-width">

        <core-loading [hideUntil]="settingsLoaded" *ngIf="!isMinor">

@ -36,8 +37,8 @@
            </ion-list>

            <!-- Age verification. -->
-        <form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification" [formGroup]="ageVerificationForm"
-            (ngSubmit)="verifyAge($event)" #ageForm>
+            <form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification"
+                [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>

                <ion-item-divider class="ion-text-wrap">
                    <ion-label>
@ -244,4 +245,5 @@
                {{ 'core.openinbrowser' | translate }}
            </ion-button>
        </ion-list>
+    </div>
 </ion-content>
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@ -10,6 +10,8 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
+    <div class="list-item-limited-width">
+
        <ion-list>
            <ion-item class="ion-text-wrap">
                <ion-label>{{ 'core.login.passwordforgotteninstructions2' | translate }}</ion-label>
@ -43,4 +45,5 @@
                </ion-button>
            </form>
        </ion-card>
+    </div>
 </ion-content>
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@ -10,6 +10,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding" (keydown)="keyDown($event)" (keyup)="keyUp($event)">
+    <div class="list-item-limited-width">
        <div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showSiteAvatar}">
            <!-- Show user avatar. -->
            <img *ngIf="showSiteAvatar" [src]="userAvatar" class="large-avatar" core-external-content [siteId]="siteId"
@ -87,7 +88,7 @@
                    <h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
                </ion-label>
            </ion-item>
-        <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap core-oauth-provider"
+            <ion-button fill="outline" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
                (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
                <img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
                <ion-label>{{provider.name}}</ion-label>
@ -100,4 +101,5 @@
                {{ 'core.login.cancel' | translate }}
            </ion-button>
        </ion-list>
+    </div>
 </ion-content>
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@ -16,6 +16,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding">
+    <div class="list-item-limited-width">
        <div class="ion-text-center ion-padding ion-margin-bottom core-login-site-logo" [class.hidden]="hasSites || enteredSiteUrl">
            <img src="assets/img/login_logo.png" class="avatar-full login-logo" role="presentation" alt="">
        </div>
@ -108,10 +109,11 @@
        </ng-container>

        <!-- Help. -->
-    <ion-button class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap" (click)="showHelp()" aria-haspopup="dialog"
-        expand="block" fill="clear" color="dark">
+        <ion-button class="ion-margin-top core-login-need-help core-button-as-link ion-text-wrap" (click)="showHelp()"
+            aria-haspopup="dialog" expand="block" fill="clear" color="dark">
            {{ 'core.needhelp' | translate }}
        </ion-button>
+    </div>
 </ion-content>

 <!-- Template site selector. -->
--- a/src/core/features/login/pages/site/site.scss
+++ b/src/core/features/login/pages/site/site.scss
@ -1,5 +1,9 @@
@import "~theme/globals";

+:host {
+    --list-item-max-width: 600px;
+}
+
 .item-input:last-child {
    margin-bottom: 20px;
 }
@ -101,12 +105,6 @@
 }

@include media-breakpoint-up(md) {
-    ion-content > * {
-        max-width: 600px;
-        margin: 0 auto;
-        width: 100%;
-    }
-
    ion-content .core-login-site-logo {
        margin-top: 20%;
        &.hidden {
--- a/src/core/features/login/pages/sites/sites.html
+++ b/src/core/features/login/pages/sites/sites.html
@ -20,7 +20,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ion-list class="core-sitelist">
            <ion-card *ngFor="let sites of accountsList.otherSites">
                <ion-item-divider sticky="true" *ngIf="sites[0]" class="core-sitelist-sitename">
--- a/src/core/features/settings/pages/about/about.html
+++ b/src/core/features/settings/pages/about/about.html
@ -12,7 +12,7 @@
 </ion-header>

 <ion-content>
-    <ion-list>
+    <ion-list class="list-item-limited-width">
        <ion-item button class="ion-text-wrap" (click)="openPage('licenses')" detail="true">
            <ion-icon name="far-copyright" slot="start" aria-hidden="true"></ion-icon>
            <ion-label>{{ 'core.settings.opensourcelicenses' | translate }}</ion-label>
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@ -16,7 +16,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list>
+    <ion-list class="list-item-limited-width">
        <ion-item class="ion-text-wrap">
            <ion-label>
                <h2>{{ 'core.settings.textdirection' | translate }}</h2>
--- a/src/core/features/settings/pages/deviceinfo/deviceinfo.html
+++ b/src/core/features/settings/pages/deviceinfo/deviceinfo.html
@ -17,7 +17,7 @@
 </ion-header>

 <ion-content>
-    <ion-list>
+    <ion-list class="list-item-limited-width">
        <ion-item *ngIf="showDevOptions" detail="true" (click)="gotoDevOptions()">
            <ion-icon name="fas-terminal" slot="start" aria-hidden="true"></ion-icon>
            <ion-label class="ion-text-wrap">
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@ -10,8 +10,8 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-list>
-        <ion-item class="ion-text-wrap">
+    <ion-list class="list-item-limited-width">
+        <ion-item class="ion-text-wrap" lines="none">
            <ion-label>
                <h2>{{ 'core.settings.language' | translate }}</h2>
            </ion-label>
@ -20,7 +20,7 @@
                <ion-select-option *ngFor="let entry of languages" [value]="entry.code">{{ entry.name }}</ion-select-option>
            </ion-select>
        </ion-item>
-        <ion-item class="ion-text-wrap core-settings-general-font-size item-interactive">
+        <ion-item class="ion-text-wrap core-settings-general-font-size item-interactive" lines="none">
            <ion-label>
                <h2>{{ 'core.settings.fontsize' | translate }}</h2>
            </ion-label>
@ -35,8 +35,7 @@
                </ion-segment-button>
            </ion-segment>
        </ion-item>
-        <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0"
-            [lines]="selectedScheme=='system' && isAndroid ? 'none' : ''">
+        <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0" lines="none">
            <ion-label>
                <h2>{{ 'core.settings.colorscheme' | translate }}</h2>
                <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
@ -47,7 +46,7 @@
                    {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
            </ion-select>
        </ion-item>
-        <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='system' && isAndroid">
+        <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='system' && isAndroid" lines="none">
            <ion-label>
                <p>{{ 'core.settings.colorscheme-system-notice' | translate }}</p>
            </ion-label>
--- a/src/core/features/settings/pages/licenses/licenses.html
+++ b/src/core/features/settings/pages/licenses/licenses.html
@ -10,7 +10,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ion-searchbar [(ngModel)]="textFilter" (ionInput)="filterChanged($event.target)" (ionCancel)="filterChanged($event.target)"
            [placeholder]="'core.filter' | translate">
        </ion-searchbar>
--- a/src/core/features/settings/pages/space-usage/space-usage.html
+++ b/src/core/features/settings/pages/space-usage/space-usage.html
@ -16,7 +16,7 @@
    <ion-refresher [disabled]="!loaded" (ionRefresh)="refreshData($event.target)" slot="fixed">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ion-list>
            <ion-item *ngFor="let site of sites" [class.item-current]="site.id == currentSiteId">
                <ion-label class="ion-text-wrap">
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@ -16,7 +16,7 @@
    </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="sitesLoaded">
+    <core-loading [hideUntil]="sitesLoaded" class="list-item-limited-width">
        <ion-list>
            <ion-item-divider>
                <ion-label>
--- a/src/core/features/tag/components/feed/core-tag-feed.html
+++ b/src/core/features/tag/components/feed/core-tag-feed.html
@ -1,4 +1,5 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" [href]="item.url" core-link [capture]="true">
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" [href]="item.url" core-link [capture]="true">
        <ion-avatar slot="start" *ngIf="item.avatarUrl">
            <img [src]="item.avatarUrl" core-external-content alt="" role="presentation" onError="this.src='assets/img/user-avatar.png'">
        </ion-avatar>
@ -9,3 +10,4 @@
            <p *ngFor="let text of item.details">{{ text }}</p>
        </ion-label>
    </ion-item>
+</ion-card>
--- a/src/core/features/tag/pages/index-area/index-area.html
+++ b/src/core/features/tag/pages/index-area/index-area.html
@ -14,7 +14,7 @@
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="list-item-limited-width">
        <ng-container *ngIf="loaded">
            <core-dynamic-component [component]="areaComponent" [data]="{items: items}"></core-dynamic-component>
        </ng-container>
--- a/src/core/features/user/components/tag-area/core-user-tag-area.html
+++ b/src/core/features/user/components/tag-area/core-user-tag-area.html
@ -1,6 +1,9 @@
-<ion-item class="ion-text-wrap" *ngFor="let item of items" core-user-link [userId]="item.user.id">
+<ion-card *ngFor="let item of items">
+    <ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
        <core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
        <ion-label>
            <h2>{{ item.heading }}</h2>
        </ion-label>
    </ion-item>
+
+</ion-card>
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@ -12,7 +12,7 @@
    <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
        <ion-list *ngIf="user">
            <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]="!canChangeProfilePicture">
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@ -12,7 +12,7 @@
    <ion-refresher slot="fixed" [disabled]="!userLoaded" (ionRefresh)="refreshUser($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
    </ion-refresher>
-    <core-loading [hideUntil]="userLoaded">
+    <core-loading [hideUntil]="userLoaded" class="list-item-limited-width">
        <ion-list *ngIf="user && !isDeleted && isEnrolled">
            <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">
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@ -830,7 +830,7 @@ ion-card {
 ion-list.core-course-module-list-wrapper,
 .list-item-limited-width,
 .core-course-module-list-wrapper {
-    max-width: var(--list-item--max-width);
+    max-width: var(--list-item-max-width);
    margin-left: auto !important;
    margin-right: auto !important;
 }
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@ -79,7 +79,7 @@
    --module-icon-size: 24px;
    --module-icon-radius: var(--medium-radius);

-    --list-item--max-width: 768px;
+    --list-item-max-width: 768px;

    --contrast-background: white;