Merge pull request #2798 from crazyserver/MOBILE-3320

Mobile 3320

src/addons/mod/glossary/components/index/addon-mod-glossary-index.html

@@ -2,11 +2,11 @@
 <core-navbar-buttons slot="end">
     <ion-button *ngIf="glossary && glossary.browsemodes && glossary.browsemodes.length > 1" (click)="openModePicker($event)"
         [attr.aria-label]="'addon.mod_glossary.browsemode' | translate">
-        <ion-icon name="fas-sort" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-sort" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <ion-button *ngIf="glossary" (click)="toggleSearch()" [attr.aria-label]="'addon.mod_glossary.bysearch' | translate">
-        <ion-icon name="fas-search" aria-hidden="true"></ion-icon>
+        <ion-icon name="fas-search" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <core-context-menu>

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

@@ -21,10 +21,8 @@
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
-</ion-header>
-<ion-content>
     <!-- Navigation arrows and time left. -->
-    <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light" slot="fixed">
+    <ion-toolbar *ngIf="loaded && endTime && questions.length && !quizAborted && !showSummary" color="light">
         <ion-title>
             <core-timer [endTime]="endTime" (finished)="timeUp()" [timerText]="'addon.mod_quiz.timeleft' | translate"
                 [align]="'center'">
@@ -40,7 +38,8 @@
             </ion-button>
         </ion-buttons>
     </ion-toolbar>
-
+</ion-header>
+<ion-content>
     <core-loading [hideUntil]="loaded">
         <!-- Navigation arrows if there's no timer. -->
         <ion-toolbar *ngIf="!endTime && questions.length && !quizAborted && !showSummary" color="light">

src/addons/mod/wiki/components/map/map.html

@@ -3,7 +3,7 @@
         <h1>{{ 'addon.mod_wiki.map' | translate }}</h1>
         <ion-buttons slot="end">
             <ion-button fill="clear" (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
-                <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
+                <ion-icon slot="icon-only" name="fas-times" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-buttons>
     </ion-toolbar>

src/addons/storagemanager/pages/course-storage/course-storage.html

@@ -21,7 +21,7 @@
                     <p slot="end" class="ion-text-end">{{ totalSize | coreBytesToSize }}</p>
                     <ion-button slot="end" (click)="deleteForCourse()" [disabled]="totalSize == 0">
                         <ion-icon name="fas-trash" slot="icon-only"
-                            ariaLabel="{{ 'addon.storagemanager.deletecourse' | translate }}">
+                            [attr.aria-label]="'addon.storagemanager.deletecourse' | translate">
                         </ion-icon>
                     </ion-button>
                 </ion-item>
@@ -37,7 +37,7 @@
                         <p slot="end" class="ion-text-end">{{ section.totalSize | coreBytesToSize }}</p>
                         <ion-button slot="end" (click)="deleteForSection(section)">
                             <ion-icon name="fas-trash" slot="icon-only"
-                                ariaLabel="{{ 'addon.storagemanager.deletedatafrom' | translate: { name: section.name } }}">
+                                [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: section.name }">
                             </ion-icon>
                         </ion-button>
                     </ion-item>
@@ -55,7 +55,7 @@
                             <p slot="end" class="ion-text-end">{{ module.totalSize | coreBytesToSize }}</p>
                             <ion-button fill="clear" slot="end" (click)="deleteForModule(module)">
                                 <ion-icon name="fas-trash" slot="icon-only"
-                                    ariaLabel="{{ 'addon.storagemanager.deletedatafrom' | translate: { name: module.name } }}">
+                                    [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: module.name }">
                                 </ion-icon>
                             </ion-button>
                         </ion-item>

src/addons/storagemanager/pages/courses-storage/courses-storage.html

@@ -39,7 +39,7 @@
                         <p slot="end" class="ion-text-end">{{ course.totalSize | coreBytesToSize }}</p>
                         <ion-button slot="end" (click)="deleteCourse(course)" [disabled]="course.isDownloading">
                             <ion-icon name="fas-trash" slot="icon-only"
-                                ariaLabel="{{ 'addon.storagemanager.deletedatafrom' | translate: { name: course.displayname } }}">
+                                [attr.aria-label]="'addon.storagemanager.deletedatafrom' | translate: { name: course.displayname }">
                             </ion-icon>
                         </ion-button>
                     </ion-item>

src/core/components/download-refresh/core-download-refresh.html

@@ -1,14 +1,14 @@
 <ng-container *ngIf="enabled && !loading">
     <!-- Download button. -->
     <ion-button *ngIf="status == statusNotDownloaded" fill="clear" (click)="download($event, false)" color="dark"
-        [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
+        [@coreShowHideAnimation] [attr.aria-label]="(statusTranslatable || 'core.download') | translate" [size]="size">
         <ion-icon slot="icon-only" name="cloud-download" aria-hidden="true"></ion-icon>
     </ion-button>
 
     <!-- Refresh button. -->
     <ion-button *ngIf="status == statusOutdated || (status == statusDownloaded && !canTrustDownload)" fill="clear"
         (click)="download($event, true)" color="dark" [@coreShowHideAnimation]
-        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
+        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate" [size]="size">
         <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 

src/core/components/download-refresh/download-refresh.ts

@@ -34,6 +34,7 @@ export class CoreDownloadRefreshComponent {
     @Input() statusTranslatable?: string; // Download status translatable string.
     @Input() enabled = false; // Whether the download is enabled.
     @Input() loading = true; // Force loading status when is not downloading.
+    @Input() size: 'small' | 'default' | 'large' = 'default'; // Size of the buttons.
     @Input() canTrustDownload = false; // If false, refresh will be shown if downloaded.
     @Output() action: EventEmitter<boolean>; // Will emit an event when the item clicked.
 

src/core/components/empty-box/empty-box.scss

@@ -1,4 +1,6 @@
 :host {
+    display: contents;
+
     .core-empty-box {
         position: absolute;
         top: 0;
@@ -47,7 +49,7 @@
         z-index: 0;
     }
 
-    @media (max-width: 350px) {
+    @media (max-height: 550px) {
         .core-empty-box {
             position: relative;
             height: auto;
@@ -73,4 +75,3 @@
 :host-context(core-block-course-blocks) .core-empty-box {
     position: relative;
 }
-

src/core/components/file/core-file.html

@@ -9,11 +9,11 @@
     </ion-label>
     <div slot="end">
         <core-download-refresh [status]="state" [enabled]="canDownload" [loading]="isDownloading"
-            [canTrustDownload]="!alwaysDownload" (action)="download()">
+            [canTrustDownload]="!alwaysDownload" (action)="download()" size="small">
         </core-download-refresh>
 
         <ion-button fill="clear" *ngIf="!isDownloading && canDelete" (click)="delete($event)"
-            [attr.aria-label]="'core.delete' | translate" color="danger">
+            [attr.aria-label]="'core.delete' | translate" color="danger" size="small">
             <ion-icon slot="icon-only" name="fas-trash" aria-hidden="true"></ion-icon>
         </ion-button>
     </div>

src/core/components/iframe/iframe.scss

@@ -9,7 +9,7 @@
         border: 0;
         display: block;
         max-width: 100%;
-        background-color: var(--gray-light);
+        background-color: var(--ion-background-color);
     }
 
     .core-loading-container {

src/core/components/loading/loading.scss

@@ -38,7 +38,6 @@
 
     .core-loading-content {
         display: contents;
-        padding-bottom: 1px; /* This makes height be real */
     }
 
     &.core-loading-noheight .core-loading-content {
@@ -56,9 +55,5 @@
             padding-top: 20px;
             position: relative;
         }
-
-        .core-loading-content {
-            display: block;
-        }
     }
 }

src/core/features/block/components/block/block.scss

@@ -1,6 +1,7 @@
 :host {
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
     background: var(--background);
 
     ion-item-divider {

src/core/features/course/components/format/core-course-format.html

@@ -167,7 +167,7 @@
         </ion-badge>
 
         <core-download-refresh [status]="section.downloadStatus" [enabled]="downloadEnabled" (action)="prefetch(section)"
-            [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates">
+            [loading]="section.isDownloading || section.isCalculating" [canTrustDownload]="section.canCheckUpdates" size="small">
         </core-download-refresh>
     </div>
 </ng-template>

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

@@ -61,11 +61,11 @@
                 <div class="core-module-buttons-more">
                     <core-download-refresh [status]="downloadStatus" [enabled]="downloadEnabled"
                         [canTrustDownload]="canCheckUpdates" [loading]="spinner || module.handlerData.spinner"
-                        (action)="download($event)">
+                        (action)="download($event)" size="small">
                     </core-download-refresh>
 
                     <!-- Buttons defined by the module handler. -->
-                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
+                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" size="small"
                         [hidden]="button.hidden || spinner || module.handlerData.spinner" class="core-animate-show-hide"
                         (click)="buttonClicked($event, button)"
                         [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">

src/core/features/courses/components/course-progress/core-courses-course-progress.html

@@ -5,7 +5,8 @@
     </div>
     <ion-item button lines="none" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
         class="core-course-header" [class.item-disabled]="course.visible == 0"
-        [class.core-course-more-than-title]="course.progress! >= 0" detail="false">
+        [class.core-course-only-title]="!showAll || course.progress! < 0 && course.completionusertracked === false"
+        detail="false">
         <ion-label
             class="ion-text-wrap core-course-title"
             [class.core-course-with-buttons]="courseOptionMenuEnabled || (downloadCourseEnabled && showDownload)"

src/core/features/courses/components/course-progress/course-progress.scss

@@ -2,10 +2,14 @@
 
 :host {
     ion-card {
+        --vertical-margin: 12px;
+
         display: flex;
         flex-direction: column;
         align-self: stretch;
-        height: calc(100% - 20px);
+        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        margin-top: var(--vertical-margin);
+        margin-bottom: var(--vertical-margin);
 
         @for $i from 0 to length($core-course-image-background) {
             &[course-color="#{$i}"] .core-course-thumb {
@@ -42,10 +46,19 @@
         }
 
         .core-course-header {
-            padding-top: 8px;
-            padding-bottom: 8px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+
+            &.core-course-only-title {
+                &::part(native) {
+                    flex-grow: 1;
+                }
+
+            }
+
             .core-course-title {
-                margin: 5px 0;
+                margin: 12px 0;
                 flex-grow: 1;
 
                 .item-heading ion-icon {
@@ -54,10 +67,6 @@
                 }
             }
 
-            &.core-course-more-than-title {
-                padding-bottom: 0;
-            }
-
             .core-button-spinner {
                 margin: 0;
             }
@@ -93,11 +102,8 @@
         }
 
         .core-course-header {
-            padding-top: 4px;
-            padding-bottom: 4px;
-
             .core-course-title {
-                margin: 3px 0;
+                margin: 7px 0;
 
                 .item-heading ion-icon {
                     margin-right: 2px;

src/theme/globals.mixins.scss

@@ -213,16 +213,16 @@
     display: block;
 
     ion-card {
-      height: calc(100% - 20px);
-      width: calc(100% - 20px);
-      margin-top: 10px;
-      margin-bottom: 10px;
+        --vertical-margin: 10px;
+        --horizontal-margin: 10px;
 
-      @media (max-width: 360px) {
-        margin-left: 6px;
-        margin-right: 6px;
-        width: calc(100% - 12px);
-      }
+        width: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
+        margin: var(--vertical-margin) var(--horizontal-margin);
+
+        @media (max-width: 360px) {
+            --horizontal-margin: 6px;
+        }
     }
 
     .ion-text-wrap ion-label {

src/theme/theme.base.scss

@@ -153,7 +153,7 @@ ion-item.ion-text-wrap ion-label {
     }
 }
 
-// Ionic toolbar.
+// Ionic toolbar on header.
 ion-app.md ion-toolbar {
     --min-height: #{$toolbar-height-md};
 }
@@ -162,29 +162,31 @@ ion-app.ios ion-toolbar {
     --min-height: #{$toolbar-height-ios};
 }
 
-ion-toolbar ion-back-button,
-ion-toolbar .in-toolbar.button-clear {
-    --color: var(--core-header-toolbar-color);
-    --ion-toolbar-color: var(--core-header-toolbar-color);
-}
+ion-header ion-toolbar {
+    ion-back-button,
+    .in-toolbar.button-clear {
+        --color: var(--core-header-toolbar-color);
+        --ion-toolbar-color: var(--core-header-toolbar-color);
+    }
 
-ion-header ion-toolbar .button.button-clear,
-ion-header ion-toolbar .button.button-solid {
-    --background: transparent;
-    --color: var(--core-header-toolbar-color);
-    --ion-color-primary: var(--core-header-toolbar-color);
-}
+    .button.button-clear,
+    .button.button-solid {
+        --background: transparent;
+        --color: var(--core-header-toolbar-color);
+        --ion-color-primary: var(--core-header-toolbar-color);
+    }
 
-ion-header ion-toolbar .button.button-clear.button-has-icon-only,
-ion-header ion-toolbar .button.button-solid.button-has-icon-only {
-    --border-radius: 50%;
-    width: 48px;
-    height: 48px;
-}
+    .button.button-clear.button-has-icon-only,
+    .button.button-solid.button-has-icon-only {
+        --border-radius: 50%;
+        width: 48px;
+        height: 48px;
+    }
 
 
-ion-toolbar .core-navbar-button-hidden {
-    display: none !important;
+    .core-navbar-button-hidden {
+        display: none !important;
+    }
 }
 
 // Ionic icon.
@@ -475,6 +477,10 @@ ion-card ion-item img.core-module-icon[slot="start"] {
     margin-left: 32px;
 }
 
+.core-course-module-handler:not(.addon-mod-label-handler) .item-heading .filter_mathjaxloader_equation * {
+    display: inline !important;
+}
+
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 0;
@@ -508,6 +514,15 @@ ion-select::part(text) {
     white-space: normal;
 }
 
+ion-searchbar {
+    .searchbar-search-icon.ios {
+        top: 4px;
+    }
+    .searchbar-search-icon.md {
+        top: 12px;
+    }
+}
+
 // File uploader.
 .action-sheet-button input.core-fileuploader-file-handler-input {
     position: absolute;
@@ -603,7 +618,6 @@ ion-back-button.md::part(text) {
     display: none;
 }
 
-
 .core-media-adapt-width {
     max-width: 100%;
 }
@@ -730,3 +744,10 @@ ion-content.disable-scroll-y::part(scroll) {
     z-index: auto;
     will-change: auto;
 }
+
+iframe {
+    border: 0;
+    display: block;
+    max-width: 100%;
+    background-color: var(--ion-background-color);
+}

src/theme/theme.dark.scss

@@ -79,10 +79,9 @@
     --core-tab-border-color: #{$core-tab-border-color-dark};
     --core-tab-color-active: #{$core-tab-color-active-dark};
     --core-tab-border-color-active: #{$core-tab-border-color-active-dark};
-    core-progress-bar {
-        --color: #{$core-progressbar-color-dark};
-        --text-color: #{$core-progressbar-text-color-dark};
-    }
+
+    --core-progressbar-color: #{$core-progressbar-color-dark};
+    --core-progressbar-text-color: #{$core-progressbar-text-color-dark};
 
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);

src/theme/theme.light.scss

@@ -107,7 +107,7 @@
     --core-header-toolbar-button-image-size: #{$toolbar-button-image-size};
     --core-header-toolbar-background: #{$toolbar-background};
     --core-header-toolbar-color: #{$toolbar-color};
-    ion-toolbar {
+    ion-header ion-toolbar {
         --color: var(--core-header-toolbar-color);
         --background: var(--core-header-toolbar-background);
         ion-button {
@@ -121,6 +121,13 @@
         }
     }
 
+    ion-searchbar {
+        --background: var(--ion-item-background);
+        .searchbar-input {
+            height: var(--a11y-min-target-size);
+        }
+    }
+
     ion-action-sheet {
         --button-color-selected: #{$action-sheet-selected};
         --title-border-color: var(--gray);
@@ -161,11 +168,15 @@
         --color: var(--ion-color-primary);
     }
 
+    --core-progressbar-height: #{$core-progressbar-height};
+    --core-progressbar-color: #{$core-progressbar-color};
+    --core-progressbar-text-color: #{$core-progressbar-text-color};
+    --core-progressbar-background: #{$core-progressbar-background};
     core-progress-bar {
-        --height: #{$core-progressbar-height};
-        --color: #{$core-progressbar-color};
-        --text-color: #{$core-progressbar-text-color};
-        --background: #{$core-progressbar-background};
+        --height: var(--core-progressbar-height);
+        --color: var(--core-progressbar-color);
+        --text-color: var(--core-progressbar-text-color);
+        --background: var(--core-progressbar-background);
     }
 
     core-block-course-blocks {