MOBILE-3808 styles: Some style fixes

src/addons/messages/pages/discussion/discussion.html

@@ -128,7 +128,7 @@
             [attr.aria-label]="'addon.messages.newmessages' | translate">
             <ion-icon name="fas-arrow-down" aria-hidden="true"></ion-icon>
             <span class="sr-only">{{ 'addon.messages.newmessages' | translate }}</span>
-            <span class="core-discussion-messages-badge">{{ newMessages }}</span>
+            <ion-badge class="core-discussion-messages-badge">{{ newMessages }}</ion-badge>
         </ion-fab-button>
     </ion-fab>
 </ion-content>

src/addons/messages/pages/discussion/discussion.scss

@@ -27,13 +27,9 @@
 
         .core-discussion-messages-badge {
             position: absolute;
-            border-radius: 50%;
             color: var(--addon-messages-discussion-badge-text);
             background-color: var(--addon-messages-discussion-badge);
             display: block;
-            line-height: 20px;
-            height: 20px;
-            width: 20px;
             @include position(-6px, -6px, null, null);
         }
     }

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

@@ -55,7 +55,7 @@
                             <div *ngIf="downloadEnabled" slot="end" class="core-button-spinner">
                                 <core-download-refresh *ngIf="!section.isDownloading" [status]="section.downloadStatus" [enabled]="true"
                                     (action)="prefecthSection(section)" [loading]="section.isDownloading || section.isCalculating"
-                                    [canTrustDownload]="true" size="small">
+                                    [canTrustDownload]="true">
                                 </core-download-refresh>
 
                                 <ion-badge class="core-course-download-section-progress"
@@ -93,7 +93,7 @@
                                     </ion-icon>
                                 </ion-button>
                                 <core-download-refresh *ngIf="downloadEnabled && module.handlerData?.showDownloadButton"
-                                    [status]="module.downloadStatus" [enabled]="true" [canTrustDownload]="true" size="small"
+                                    [status]="module.downloadStatus" [enabled]="true" [canTrustDownload]="true"
                                     [loading]="module.spinner || module.handlerData.spinner" (action)="prefetchModule(module, section)">
                                 </core-download-refresh>
                             </div>

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" [size]="size">
+        [attr.aria-label]="(statusTranslatable || 'core.download') | translate">
         <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" [size]="size">
+        [attr.aria-label]="(statusTranslatable || 'core.refresh') | translate">
         <ion-icon slot="icon-only" name="fas-redo-alt" aria-hidden="true"></ion-icon>
     </ion-button>
 

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

@@ -35,7 +35,10 @@ 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.
+    /**
+     * @deprecated since 4.0. It has no effect.
+     */
+    @Input() size = ''; // 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/file/core-file.html

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

src/core/components/mod-icon/mod-icon.scss

@@ -5,12 +5,13 @@
     --size: var(--module-icon-size);
     --margin-end: 0px;
     --margin-vertical: 0px;
+    --icon-radius: var(--small-radius);
 
     margin-top: var(--margin-vertical);
     margin-bottom: var(--margin-vertical);
     @include margin-horizontal(null, var(--margin-end));
 
-    border-radius: var(--small-radius);
+    border-radius: var(--icon-radius);
     padding: 0.7rem;
     background-color: $gray-100;
     line-height: var(--size);
@@ -50,4 +51,5 @@ img {
 :host-context(ion-card ion-item) {
     --margin-vertical: 12px;
     --margin-end: 12px;
+    --icon-radius: var(--module-icon-radius);
 }

src/core/components/tabs/tabs.scss

@@ -7,6 +7,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    --ion-safe-area-top: 0px;
 
     ion-tabs {
         background: transparent;

src/core/directives/collapsible-header.ts

@@ -32,7 +32,6 @@ import { CoreMath } from '@singletons/math';
 })
 export class CoreCollapsibleHeaderDirective implements OnDestroy {
 
-    protected scrollElement?: HTMLElement;
     protected loadingObserver: CoreEventObserver;
     protected content?: HTMLIonContentElement | null;
     protected header: HTMLIonHeaderElement;

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

@@ -24,8 +24,11 @@
     </ng-container>
 
     <ng-container *ngIf="!completion.istrackeduser">
-        <ion-chip *ngFor="let rule of details" color="light" role="listitem">
-            <ion-label>{{ rule.rulevalue.description }}</ion-label>
+        <ion-chip *ngFor="let rule of details" role="listitem">
+            <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
+            <ion-label>
+                <strong>{{ 'core.course.completion_automatic:todo' | translate }}</strong> {{ rule.rulevalue.description }}
+            </ion-label>
         </ion-chip>
     </ng-container>
 </div>

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

@@ -1,12 +1,12 @@
 <ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
     <ng-container *ngIf="!module.handlerData.loading">
-        <ion-item id="core-course-module-{{module.id}}"
+        <ion-item id="core-course-module-{{module.id}}" detail="false" lines="none"
             class="ion-text-wrap core-course-module-handler core-module-main-item {{module.handlerData.class}}"
             (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" [ngClass]="{
                 'has-module-info': hasInfo,
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
-            }" [button]="module.handlerData.action && module.uservisible" detail="false">
+            }" [button]="module.handlerData.action && module.uservisible">
 
             <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
                 [componentId]="module.instance">
@@ -19,8 +19,8 @@
                     </core-format-text>
                 </p>
                 <ion-chip class="completioninfo completion_incomplete" *ngIf="completionStatus === 0">
-                    <ion-label>
                     <ion-icon name="fas-edit" aria-hidden="true"></ion-icon>
+                    <ion-label>
                         {{ 'core.course.todo' | translate }}
                     </ion-label>
                 </ion-chip>
@@ -50,7 +50,7 @@
 
                 <div class="core-module-buttons-more">
                     <!-- Buttons defined by the module handler. -->
-                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark" size="small"
+                    <ion-button fill="clear" *ngFor="let button of module.handlerData.buttons" color="dark"
                         [hidden]="button.hidden || module.handlerData.spinner" class="core-animate-show-hide"
                         (click)="buttonClicked($event, button)" [attr.aria-label]="button.label | translate:{$a: module.handlerData.title}">
                         <ion-icon [name]="button.icon" slot="icon-only" aria-hidden="true"></ion-icon>
@@ -58,11 +58,11 @@
                 </div>
             </div>
         </ion-item>
-        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info"
+        <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info" detail="false" lines="none"
             class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
-            }" detail="false">
+            }">
             <ion-label>
                 <core-format-text class="core-module-description" *ngIf="module.description" [maxHeight]="80" [text]="module.description"
                     contextLevel="module" [contextInstanceId]="module.id" [courseId]="module.course">
@@ -82,30 +82,38 @@
                     [showManualCompletion]="showManualCompletion" (completionChanged)="completionChanged.emit($event)">
                 </core-course-module-completion>
 
-                <ion-chip *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap block">
+                <div *ngIf="module.completiondata?.offline">
+                    <ion-chip color="warning">
                         <ion-icon name="fas-sync" aria-hidden="true"></ion-icon>
                         <ion-label>{{ 'core.course.manualcompletionnotsynced' | translate }}</ion-label>
                     </ion-chip>
+                </div>
 
                 <!-- Availability -->
-                <ion-chip *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap block">
+                <div *ngIf="module.visible === 0 && (!section || section.visible)">
+                    <ion-chip>
                         <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
                         <ion-label>{{ 'core.course.hiddenfromstudents' | translate }}</ion-label>
                     </ion-chip>
+                </div>
 
-                <ion-chip *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap block">
+                <div *ngIf="module.visible !== 0 && module.isStealth">
+                    <ion-chip>
                         <ion-icon name="fas-eye-slash" aria-hidden="true"></ion-icon>
                         <ion-label>{{ 'core.course.hiddenoncoursepage' | translate }}</ion-label>
                     </ion-chip>
+                </div>
 
-                <ion-chip class="core-module-availabilityinfo ion-text-wrap block" *ngIf="module.availabilityinfo">
+                <div *ngIf="module.availabilityinfo">
+                    <ion-chip class="core-module-availabilityinfo">
                         <ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate"></ion-icon>
                         <ion-label>
                             <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                            [courseId]="module.course" class="ion-text-wrap">
+                                [courseId]="module.course">
                             </core-format-text>
                         </ion-label>
                     </ion-chip>
+                </div>
 
             </ion-label>
         </ion-item>
@@ -114,7 +122,7 @@
     <!-- Loading. -->
     <ion-item *ngIf="module.handlerData.loading" role="status" class="ion-text-wrap" id="core-course-module-{{module.id}}"
         [attr.aria-label]="module.handlerData.a11yTitle"
-        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false">
+        [ngClass]="['core-course-module-handler', 'core-module-loading', module.handlerData.class]" detail="false" lines="none">
         <ion-label>
             <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
         </ion-label>

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

@@ -63,6 +63,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
 
         this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
         this.completionStatus = this.module.completiondata === undefined  ||
+                !this.module.completiondata?.istrackeduser ||
                 this.module.completiondata.tracking == CoreCourseModuleCompletionTracking.COMPLETION_TRACKING_NONE
             ? undefined
             : this.module.completiondata.state;

src/core/features/login/login.scss

@@ -106,7 +106,7 @@
 
 :host-context(body.dark) {
     @if ($core-login-button-outline-dark) {
-        form ion-button-dark {
+        form ion-button {
             --background: white;
             --color: var(--core-login-background-dark);
         }

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

@@ -56,7 +56,7 @@
                 <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
                 <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
                     <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
-                    <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
+                    {{ 'core.scanqr' | translate }}
                 </ion-button>
             </ng-container>
         </form>
@@ -64,7 +64,7 @@
         <!-- Forgotten password option. -->
         <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear" color="dark"
             class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-            <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+            {{ 'core.login.forgotten' | translate }}
         </ion-button>
 
         <ion-list *ngIf="identityProviders && identityProviders.length" class="ion-padding-top core-login-identity-providers">

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

@@ -67,7 +67,7 @@
             <div class="ion-text-center ion-padding">{{ 'core.login.or' | translate }}</div>
             <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()">
                 <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
-                <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
+                {{ 'core.scanqr' | translate }}
             </ion-button>
         </ng-container>
     </form>
@@ -75,7 +75,7 @@
     <!-- Forgotten password option. -->
     <ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear" color="dark"
         class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-        <ion-label>{{ 'core.login.forgotten' | translate }}</ion-label>
+        {{ 'core.login.forgotten' | translate }}
     </ion-button>
 
     <!-- Identity providers. -->

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

@@ -104,14 +104,14 @@
         <ion-button expand="block" color="light" class="ion-margin" lines="none" (click)="showInstructionsAndScanQR()"
             aria-haspopup="dialog">
             <ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
-            <ion-label>{{ 'core.scanqr' | translate }}</ion-label>
+            {{ 'core.scanqr' | translate }}
         </ion-button>
     </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-label>{{ 'core.needhelp' | translate }}</ion-label>
+        {{ 'core.needhelp' | translate }}
     </ion-button>
 </ion-content>
 

src/core/features/sitehome/pages/index/index.html

@@ -55,7 +55,7 @@
 </ion-content>
 
 <ng-template #allCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openAvailableCourses()" lines="none">
         <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.availablecourses' | translate}}</h2>
@@ -69,7 +69,7 @@
 </ng-template>
 
 <ng-template #categories>
-    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openCourseCategories()" lines="none">
         <ion-icon name="fas-folder" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.categories' | translate}}</h2>
@@ -78,7 +78,7 @@
 </ng-template>
 
 <ng-template #enrolledCourseList>
-    <ion-item button class="ion-text-wrap" (click)="openMyCourses()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openMyCourses()" lines="none">
         <ion-icon name="fas-graduation-cap" fixed-width slot="start" aria-hidden="true">
         </ion-icon>
         <ion-label>
@@ -88,7 +88,7 @@
 </ng-template>
 
 <ng-template #courseSearch>
-    <ion-item button class="ion-text-wrap" (click)="openSearch()" detail="true">
+    <ion-item button class="ion-text-wrap" (click)="openSearch()" lines="none">
         <ion-icon name="fas-search" slot="start" aria-hidden="true"></ion-icon>
         <ion-label>
             <h2>{{ 'core.courses.searchcourses' | translate}}</h2>

src/core/features/sitehome/pages/index/index.scss

@@ -2,7 +2,7 @@
 
 ion-item ion-icon {
     display: inline-block;
-    border-radius: var(--small-radius);
+    border-radius: var(--module-icon-radius);
     padding: 0.7rem;
     background-color: $gray-100;
     line-height: var(--size);

src/theme/components/format-text.scss

@@ -699,7 +699,7 @@ core-rich-text-editor .core-rte-editor {
         padding: .25em .4em;
         font-size: 75%;
         font-weight: 700;
-        line-height: 1;
+        line-height: 1.1;
         text-align: center;
         white-space: nowrap;
         vertical-align: baseline;

src/theme/theme.base.scss

@@ -189,6 +189,7 @@ ion-button core-format-text .core-format-text-content {
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
+    line-height: 1.2;
 }
 
 ion-button > * {
@@ -217,6 +218,10 @@ ion-button ion-spinner {
     --color: inherit !important;
 }
 
+ion-button:not(.button-has-icon-only) > ion-icon {
+    min-width: 20px;
+}
+
 @each $color-name, $unused in $colors {
     .text-#{$color-name},
     p.text-#{$color-name} {
@@ -850,14 +855,22 @@ ion-select-popover ion-item.core-select-option-title {
     }
 }
 
+ion-badge {
+    line-height: 1.1;
+    padding: 4px 8px;
+    border-radius: var(--big-radius);
+}
+
 ion-chip {
     line-height: 1.1;
     font-size: 12px;
     padding: 4px 8px;
-    height: 24px;
+    min-height: 24px;
+    height: auto;
 
     ion-icon {
         font-size: 16px;
+        min-width: 16px;
         @include margin(0, 8px, 0, 0);
     }
 
@@ -869,6 +882,10 @@ ion-chip {
             color: var(--ion-color-base);
         }
     }
+
+    ion-label {
+        white-space: normal !important;
+    }
 }
 
 ion-searchbar {

src/theme/theme.light.scss

@@ -58,6 +58,11 @@
 
     --brand-color: var(--brand);
 
+    --small-radius: 4px;
+    --medium-radius: 8px;
+    --big-radius: 16px;
+    --huge-radius: 24px;
+
     // Accessibility vars.
     --a11y-min-target-size: 44px;
     --a11y-focus-color: var(--primary);
@@ -65,6 +70,7 @@
     --zoom-level: 100%;
 
     --module-icon-size: 24px;
+    --module-icon-radius: var(--medium-radius);
 
     --ion-background-color: var(--background-color);
     --ion-background-color-rgb: #{$background-color-rgb};
@@ -75,11 +81,6 @@
     --ion-text-color-rgb: #{$text-color-rgb};
     --subdued-text-color: var(--gray-700);
 
-    --small-radius: 4px;
-    --medium-radius: 8px;
-    --big-radius: 16px;
-    --huge-radius: 24px;
-
     --ion-card-color: var(--text-color);
     ion-card {
         --border-width: 1px;