MOBILE-3149 style: Add spacers

src/addons/mod/feedback/pages/form/form.html

@@ -12,9 +12,9 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="feedbackLoaded">
+    <core-loading [hideUntil]="feedbackLoaded" class="has-spacer">
         <ng-container *ngIf="items && items.length">
-            <ion-list class="ion-no-margin">
+            <ion-list class="ion-no-margin has-spacer">
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <h2>{{ 'addon.mod_feedback.mode' | translate }}</h2>
@@ -110,7 +110,7 @@
                     </ng-container>
                 </ng-container>
 
-                <ion-row class="ion-align-items-center" *ngIf="!preview">
+                <ion-row class="ion-align-items-center spacer-top" *ngIf="!preview">
                     <ion-col *ngIf="hasPrevPage">
                         <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
                             <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>

src/addons/mod/quiz/pages/player/player.html

@@ -31,7 +31,7 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <!-- Button to start attempting. -->
         <ion-button *ngIf="!attempt" expand="block" class="ion-margin" (click)="start()">
             {{ 'addon.mod_quiz.startattempt' | translate }}
@@ -67,7 +67,7 @@
         </form>
 
         <!-- Go to next or previous page. -->
-        <ion-row *ngIf="questions.length && !quizAborted && !showSummary">
+        <ion-row *ngIf="questions.length && !quizAborted && !showSummary" class="spacer-top">
             <ion-col *ngIf="previousPage >= 0">
                 <ion-button expand="block" fill="outline" (click)="changePage(previousPage)" class="ion-text-wrap">
                     <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>

src/core/components/loading/loading.scss

@@ -75,6 +75,12 @@
         height: 100%;
     }
 
+    &.has-spacer .core-loading-content {
+        min-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
     &.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);

src/core/features/course/components/unsupported-module/core-course-unsupported-module.html

@@ -1,22 +1,25 @@
-<ion-card class="core-danger-card">
+<div class="has-spacer">
-    <ion-item>
+    <ion-card class="core-danger-card">
-        <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+        <ion-item>
+            <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <p><strong>{{ 'core.uhoh' | translate }} </strong>
+                    <ng-container *ngIf="isDisabledInSite">{{ 'core.course.activitydisabled' | translate }}</ng-container>
+                    <ng-container *ngIf="!isDisabledInSite">
+                        {{ 'core.course.activitynotyetviewableremoteaddon' | translate }}
+                    </ng-container>
+                </p>
+            </ion-label>
+        </ion-item>
+    </ion-card>
+    <div class="spacer"></div>
+    <ion-item lines="none" class="ion-text-wrap" *ngIf="module?.url && module?.uservisible">
         <ion-label>
-            <p><strong>{{ 'core.uhoh' | translate }} </strong>
+            <p>{{ 'core.course.useactivityonbrowser' | translate }}</p>
-                <ng-container *ngIf="isDisabledInSite">{{ 'core.course.activitydisabled' | translate }}</ng-container>
+            <ion-button expand="block" [href]="module?.url" core-link [showBrowserWarning]="false">
-                <ng-container *ngIf="!isDisabledInSite">
+                {{ 'core.openinbrowser' | translate }}
-                    {{ 'core.course.activitynotyetviewableremoteaddon' | translate }}
+                <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-                </ng-container>
+            </ion-button>
-            </p>
         </ion-label>
     </ion-item>
-</ion-card>
+</div>
-<ion-item lines="none" class="ion-text-wrap" *ngIf="module?.url && module?.uservisible">
-    <ion-label>
-        <p>{{ 'core.course.useactivityonbrowser' | translate }}</p>
-        <ion-button expand="block" [href]="module?.url" core-link [showBrowserWarning]="false">
-            {{ 'core.openinbrowser' | translate }}
-            <ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
-        </ion-button>
-    </ion-label>
-</ion-item>

src/core/features/course/components/unsupported-module/unsupported-module.scss

@@ -0,0 +1,3 @@
+:host {
+    display: contents;
+}

src/core/features/course/components/unsupported-module/unsupported-module.ts

@@ -23,6 +23,7 @@ import { CoreCourseModuleDelegate } from '@features/course/services/module-deleg
 @Component({
     selector: 'core-course-unsupported-module',
     templateUrl: 'core-course-unsupported-module.html',
+    styleUrls: ['unsupported-module.scss'],
 })
 export class CoreCourseUnsupportedModuleComponent implements OnInit {
 

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">
+    <core-loading [hideUntil]="loaded" class="has-spacer">
         <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>

src/theme/theme.base.scss

@@ -1581,3 +1581,18 @@ body.core-iframe-fullscreen ion-content {
 
 
 }
+
+.has-spacer {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+
+    .spacer-top {
+        flex-grow: 1;
+        align-content: flex-end;
+    }
+    .spacer {
+        flex-grow: 1;
+    }
+}