Merge pull request #2792 from crazyserver/MOBILE-3320

Mobile 3320

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -2,7 +2,7 @@
     <ion-label>
         <h2>{{ 'addon.block_recentlyaccessedcourses.pluginname' | translate }}</h2>
     </ion-label>
-    <div slot="end">
+    <div slot="end" class="flex-row">
         <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner">
             <ion-button *ngIf="prefetchCoursesData.icon && !prefetchCoursesData.loading" fill="clear" color="dark"
                 (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -2,7 +2,7 @@
     <ion-label>
         <h2>{{ 'addon.block_starredcourses.pluginname' | translate }}</h2>
     </ion-label>
-    <div slot="end">
+    <div slot="end" class="flex-row">
         <div *ngIf="downloadCoursesEnabled && downloadEnabled && courses && courses.length > 1" class="core-button-spinner">
             <ion-button *ngIf="prefetchCoursesData.icon && !prefetchCoursesData.loading" fill="clear" color="dark"
                 (click)="prefetchCourses()" [attr.aria-label]="'core.courses.downloadcourses' | translate">

src/addons/messages/pages/contacts/contacts.page.ts

@@ -32,7 +32,6 @@ import { IonRefresher } from '@ionic/angular';
     selector: 'page-addon-messages-contacts',
     templateUrl: 'contacts.html',
     styleUrls: [
-        'tabs.scss',
         '../../messages-common.scss',
     ],
 })

src/addons/messages/pages/contacts/tabs.scss

@@ -1,48 +0,0 @@
-:host {
-    ion-tab-bar.core-tabs-bar {
-        position: relative;
-        width: 100%;
-        background: var(--core-tabs-background);
-        color: var(--core-tab-color);
-        -webkit-filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        filter: drop-shadow(0px 3px 3px rgba(var(--drop-shadow)));
-        border: 0;
-
-        ion-row {
-            width: 100%;
-        }
-
-        .tab-slide {
-            border-bottom: 2px solid transparent;
-            min-width: 100px;
-            min-height: 56px;
-            cursor: pointer;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0;
-            margin-bottom: 1px;
-
-            ion-label {
-                font-size: 16px;
-                font-weight: 400;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-                word-wrap: break-word;
-                max-width: 100%;
-                line-height: 1.2em;
-                margin: 16px auto;
-            }
-
-            &[aria-selected=true] {
-                color: var(--core-tab-border-color-active);
-                border-bottom-color: var(--core-tab-color-active);
-                ion-tab-button {
-                    color: var(--core-tab-border-color-active);
-                }
-            }
-        }
-    }
-}

src/core/components/dynamic-component/dynamic-component.ts

@@ -62,6 +62,7 @@ import { CoreLogger } from '@singletons/logger';
 @Component({
     selector: 'core-dynamic-component',
     templateUrl: 'core-dynamic-component.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreDynamicComponent implements OnChanges, DoCheck {
 

src/core/components/loading/loading.scss

@@ -56,5 +56,9 @@
             padding-top: 20px;
             position: relative;
         }
+
+        .core-loading-content {
+            display: block;
+        }
     }
 }

src/core/components/send-message-form/core-send-message-form.html

@@ -17,7 +17,7 @@
     >
     </textarea>
     <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled"
-        [attr.aria-label]="'core.send' | translate" [core-suppress-events] (click)="submitForm($event)">
+        [attr.aria-label]="'core.send' | translate" [core-suppress-events] (onClick)="submitForm($event)">
         <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
     </ion-button>
 </form>

src/core/components/tabs/tabs.scss

@@ -1,6 +1,6 @@
 :host {
     --tabs-background: var(--core-tabs-background);
-    --tabs-color: var(--color);
+    --tabs-color: var(--core-tab-color);
     --height: 56px;
     height: 100%;
     display: block;

src/core/directives/supress-events.ts

@@ -15,6 +15,7 @@
 // Based on http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/
 
 import { Directive, ElementRef, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { CoreLogger } from '@singletons/logger';
 
 /**
  * Directive to suppress all events on an element. This is useful to prevent keyboard closing when clicking this element.
@@ -29,6 +30,8 @@ import { Directive, ElementRef, OnInit, Input, Output, EventEmitter } from '@ang
  * If you only want to suppress a single event just pass the name of the event. If you want to suppress a set of events,
  * pass an array with the names of the events to suppress.
  *
+ * Usage of onClick instead of click is mandatory to make this directive work.
+ *
  * Example usage:
  *
  * <ion-button [core-suppress-events] (onClick)="toggle($event)">
@@ -51,6 +54,13 @@ export class CoreSupressEventsDirective implements OnInit {
      * Initialize event listeners.
      */
     ngOnInit(): void {
+        if (this.onClick.observers.length == 0) {
+            CoreLogger.getInstance('CoreSupressEventsDirective')
+                .error('No onClick output was defined causing this directive to fail', this.element);
+
+            return;
+        }
+
         let events: string[];
 
         if (this.suppressEvents == 'all' || typeof this.suppressEvents == 'undefined' || this.suppressEvents === null) {

src/core/features/comments/pages/viewer/viewer.html

@@ -119,7 +119,7 @@
 
     </core-loading>
 </ion-content>
-<ion-footer color="light" class="footer-adjustable" *ngIf="commentsLoaded">
+<ion-footer color="light" class="footer-adjustable" *ngIf="commentsLoaded && canAddComments">
     <ion-toolbar color="light">
         <core-send-message-form [sendDisabled]="sending" [message]="newComment"
             (onSubmit)="addComment($event)" [placeholder]="'core.comments.addcomment' | translate">

src/core/features/compile/components/compile-html/compile-html.ts

@@ -56,6 +56,7 @@ import { CoreUtils } from '@services/utils/utils';
 @Component({
     selector: 'core-compile-html',
     template: '<core-loading [hideUntil]="loaded"><ng-container #dynamicComponent></ng-container></core-loading>',
+    styles: [':host { display: contents; }'],
 })
 // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
 export class CoreCompileHtmlComponent implements OnChanges, OnDestroy, DoCheck {

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

@@ -93,18 +93,19 @@
 
             <ion-buttons class="ion-padding core-course-section-nav-buttons safe-padding-horizontal"
                 *ngIf="displaySectionSelector && sections?.length">
-                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)"
-                    [attr.aria-label]="'core.previous' | translate">
+                <ion-button *ngIf="previousSection" (click)="sectionChanged(previousSection)" fill="outline"
+                    [attr.aria-label]="('core.previous' | translate) + ': ' + previousSection.name">
                     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
-                    <core-format-text class="accesshide" [text]="previousSection.name" contextLevel="course"
+                    <core-format-text class="sr-only" [text]="previousSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
                 </ion-button>
-                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" [attr.aria-label]="'core.next' | translate">
-                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
-                    <core-format-text class="accesshide" [text]="nextSection.name" contextLevel="course"
+                <ion-button *ngIf="nextSection" (click)="sectionChanged(nextSection)" fill="solid"
+                    [attr.aria-label]="('core.next' | translate) + ': ' + nextSection.name">
+                    <core-format-text class="sr-only" [text]="nextSection.name" contextLevel="course"
                         [contextInstanceId]="course?.id">
                     </core-format-text>
+                    <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
                 </ion-button>
             </ion-buttons>
         </core-loading>

src/core/features/course/components/format/format.scss

@@ -58,4 +58,16 @@
         }
     }
 
+    .core-course-section-nav-buttons {
+        display: flex;
+        justify-content: flex-end;
+
+        core-format-text {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            text-transform: none;
+        }
+    }
+
 }

src/core/features/login/login.scss

@@ -36,6 +36,7 @@
 
     form .core-username.item p {
         font-size: 16px;
+        @include padding-horizontal(8px, null);
     }
 
     .core-login-site-logo img {

src/core/features/login/pages/credentials/credentials.html

@@ -91,7 +91,7 @@
             <ion-item class="ion-text-wrap" lines="none" *ngIf="authInstructions">
                 <ion-label><p><core-format-text [text]="authInstructions" [filter]="false"></core-format-text></p></ion-label>
             </ion-item>
-            <ion-button expand="block" class="ion-margin" color="light" (click)="openEmailSignup()">
+            <ion-button expand="block" class="ion-margin ion-text-wrap" color="light" (click)="openEmailSignup()">
                 {{ 'core.login.startsignup' | translate }}
             </ion-button>
         </ion-list>

src/core/features/mainmenu/pages/menu/menu.html

@@ -1,6 +1,6 @@
 <ion-tabs #mainTabs [hidden]="!showTabs" [class]="'placement-' + tabsPlacement" [class.tabshidden]="hidden"
     (ionTabsDidChange)="tabChanged($event)">
-    <ion-tab-bar slot="bottom" [hidden]="hidden">
+    <ion-tab-bar slot="bottom" [hidden]="hidden" class="mainmenu-tabs">
         <ion-spinner *ngIf="!loaded"></ion-spinner>
 
         <ion-tab-button

src/core/features/siteplugins/components/assign-feedback/assign-feedback.ts

@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-assign-feedback',
     templateUrl: 'core-siteplugins-assign-feedback.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsAssignFeedbackComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/core/features/siteplugins/components/assign-submission/assign-submission.ts

@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-assign-submission',
     templateUrl: 'core-siteplugins-assign-submission.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsAssignSubmissionComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/core/features/siteplugins/components/block/block.ts

@@ -25,6 +25,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 @Component({
     selector: 'core-site-plugins-block',
     templateUrl: 'core-siteplugins-block.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsBlockComponent extends CoreBlockBaseComponent implements OnChanges {
 

src/core/features/siteplugins/components/course-format/course-format.ts

@@ -28,6 +28,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 @Component({
     selector: 'core-site-plugins-course-format',
     templateUrl: 'core-siteplugins-course-format.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsCourseFormatComponent implements OnChanges {
 

src/core/features/siteplugins/components/module-index/module-index.ts

@@ -40,6 +40,7 @@ import { CoreSitePluginsPluginContentComponent } from '../plugin-content/plugin-
 @Component({
     selector: 'core-site-plugins-module-index',
     templateUrl: 'core-siteplugins-module-index.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsModuleIndexComponent implements OnInit, OnDestroy, CoreCourseModuleMainComponent {
 

src/core/features/siteplugins/components/only-title-block/only-title-block.ts

@@ -26,6 +26,7 @@ import { CoreNavigator } from '@services/navigator';
 @Component({
     selector: 'core-siteplugins-only-title-block',
     templateUrl: 'core-siteplugins-only-title-block.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsOnlyTitleBlockComponent extends CoreBlockBaseComponent implements OnInit {
 

src/core/features/siteplugins/components/plugin-content/plugin-content.ts

@@ -28,6 +28,7 @@ import { CoreDomUtils } from '@services/utils/dom';
 @Component({
     selector: 'core-site-plugins-plugin-content',
     templateUrl: 'core-siteplugins-plugin-content.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsPluginContentComponent implements OnInit, DoCheck {
 

src/core/features/siteplugins/components/question-behaviour/question-behaviour.ts

@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-question-behaviour',
     templateUrl: 'core-siteplugins-question-behaviour.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsQuestionBehaviourComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/core/features/siteplugins/components/question/question.ts

@@ -25,6 +25,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-question',
     templateUrl: 'core-siteplugins-question.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsQuestionComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/core/features/siteplugins/components/quiz-access-rule/quiz-access-rule.ts

@@ -25,6 +25,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-site-plugins-quiz-access-rule',
     templateUrl: 'core-siteplugins-quiz-access-rule.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsQuizAccessRuleComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/core/features/siteplugins/components/user-profile-field/user-profile-field.ts

@@ -26,6 +26,7 @@ import { CoreUserProfileFieldDelegate } from '@features/user/services/user-profi
 @Component({
     selector: 'core-site-plugins-user-profile-field',
     templateUrl: 'core-siteplugins-user-profile-field.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsUserProfileFieldComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/core/features/siteplugins/components/workshop-assessment-strategy/workshop-assessment-strategy.ts

@@ -24,6 +24,7 @@ import { CoreSitePluginsCompileInitComponent } from '@features/siteplugins/class
 @Component({
     selector: 'core-siteplugins-workshop-assessment-strategy',
     templateUrl: 'core-siteplugins-workshop-assessment-strategy.html',
+    styles: [':host { display: contents; }'],
 })
 export class CoreSitePluginsWorkshopAssessmentStrategyComponent extends CoreSitePluginsCompileInitComponent implements OnInit {
 

src/theme/theme.light.scss

@@ -89,7 +89,7 @@
     --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected};
     --core-bottom-tabs-badge-color: #{$bottom-tabs-badge-color};
     --core-bottom-tabs-badge-text-color: #{$bottom-tabs-badge-text-color};
-    ion-tab-bar {
+    ion-tab-bar.mainmenu-tabs {
         --background: var(--core-bottom-tabs-background);
         --color: var(--core-bottom-tabs-color);
         --color-selected: var(--core-bottom-tabs-color-selected);