MOBILE-3749 course: Divide module in two ion-items

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

@@ -1,3 +1,9 @@
-<button *ngIf="completion" (click)="completionClicked($event)" [title]="completionDescription">
+<img *ngIf="completion && completion.tracking !== 1" [src]="completionImage" [alt]="completionDescription">
+
+<ion-button
+    fill="clear"
+    *ngIf="completion && completion.tracking === 1"
+    (click)="completionClicked($event)"
+    [title]="completionDescription">
     <img [src]="completionImage" role="presentation" alt="">
-</button>
+</ion-button>

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

@@ -1,13 +1,20 @@
 :host {
-    button {
-        display: block;
-        background-color: transparent;
+    min-width: var(--a11y-min-target-size);
+    min-height: var(--a11y-min-target-size);
+    --size: 30px;
 
-        img {
-            padding: 5px;
-            width: 30px;
-            vertical-align: middle;
-            max-width: none;
-        }
+    img {
+        padding: 5px;
+        width: var(--size);
+        vertical-align: middle;
+        max-width: none;
+        margin: 7px;
+    }
+
+    ion-button {
+        --padding-top: 0;
+        --padding-start: 0;
+        --padding-end: 0;
+        --padding-bottom: 0;
     }
 }

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

@@ -1,22 +1,57 @@
-<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && !module.handlerData.loading"
-    id="core-course-module-{{module.id}}" class="ion-text-wrap core-course-module-handler {{module.handlerData.class}}"
-    (click)="moduleClicked($event)" [attr.aria-label]="module.handlerData.a11yTitle" detail="false"
-    [ngClass]="{'item-media': module.handlerData.icon, 'item-dimmed': module.visible === 0 || module.uservisible === false,
-    'core-not-clickable': !module.handlerData.action || module.uservisible === false}"
-    [button]="module.handlerData.action || module.uservisible">
+<ng-container *ngIf="module.handlerData && module.visibleoncoursepage !== 0">
+    <ng-container *ngIf="!module.handlerData.loading">
+        <ion-item
+            id="core-course-module-{{module.id}}"
+            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-description': module.description,
+                'item-media': module.handlerData.icon,
+                'item-dimmed': module.visible === 0 || module.uservisible === false
+            }"
+            [button]="module.handlerData.action && module.uservisible"
+            detail="false">
 
-    <img slot="start" *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="modNameTranslated"
-        class="core-module-icon">
-
-    <ion-label>
-        <div class="core-module-title">
-            <core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
-                [courseId]="courseId" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
-            </core-format-text>
+            <img slot="start" *ngIf="module.handlerData.icon" [src]="module.handlerData.icon" [alt]="modNameTranslated"
+                class="core-module-icon">
 
+            <ion-label class="core-module-title">
+                <h2>
+                    <core-format-text [text]="module.handlerData.title" contextLevel="module" [contextInstanceId]="module.id"
+                        [courseId]="courseId" [attr.aria-label]="module.handlerData.a11yTitle + ', ' + modNameTranslated">
+                    </core-format-text>
+                </h2>
+                <ion-badge
+                    *ngIf="module.handlerData.extraBadge"
+                    [color]="module.handlerData.extraBadgeColor"
+                    class="ion-text-wrap ion-text-start"
+                >
+                    <span [innerHTML]="module.handlerData.extraBadge"></span>
+                </ion-badge>
+                <ion-badge *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap">
+                    {{ 'core.course.hiddenfromstudents' | translate }}
+                </ion-badge>
+                <ion-badge *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
+                    {{ 'core.course.hiddenoncoursepage' | translate }}
+                </ion-badge>
+                <div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo">
+                    <ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
+                    <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
+                        [courseId]="courseId" class="ion-text-wrap">
+                    </core-format-text>
+                </div>
+                <ion-badge *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap">
+                    {{ 'core.course.manualcompletionnotsynced' | translate }}
+                </ion-badge>
+            </ion-label>
             <!-- Buttons. -->
-            <div slot="end" *ngIf="module.uservisible !== false" class="buttons core-module-buttons"
-                [ngClass]="{'core-button-completion': module.completiondata}">
+            <div
+                slot="end"
+                *ngIf="module.uservisible !== false"
+                class="buttons core-module-buttons"
+                [ngClass]="{'core-button-completion': module.completiondata}"
+            >
                 <!-- Module completion. -->
                 <core-course-module-completion *ngIf="module.completiondata" [completion]="module.completiondata"
                     [moduleName]="module.name" [moduleId]="module.id" (completionChanged)="completionChanged.emit($event)">
@@ -37,39 +72,34 @@
                     </ion-button>
                 </div>
             </div>
-        </div>
-
-        <div class="core-module-more-info">
-            <ion-badge slot="end" *ngIf="module.handlerData.extraBadge" [color]="module.handlerData.extraBadgeColor"
-                class="ion-text-wrap ion-text-start">
-                <span [innerHTML]="module.handlerData.extraBadge"></span>
-            </ion-badge>
-            <ion-badge slot="end" *ngIf="module.visible === 0 && (!section || section.visible)" class="ion-text-wrap">
-                {{ 'core.course.hiddenfromstudents' | translate }}
-            </ion-badge>
-            <ion-badge slot="end" *ngIf="module.visible !== 0 && module.isStealth" class="ion-text-wrap">
-                {{ 'core.course.hiddenoncoursepage' | translate }}
-            </ion-badge>
-            <div class="core-module-availabilityinfo" *ngIf="module.availabilityinfo" slot="end">
-                <ion-badge class="ion-text-wrap">{{ 'core.restricted' | translate }}</ion-badge>
-                <core-format-text [text]="module.availabilityinfo" contextLevel="module" [contextInstanceId]="module.id"
-                    [courseId]="courseId" class="ion-text-wrap">
+        </ion-item>
+        <ion-item
+            *ngIf="module.description"
+            id="core-course-module-{{module.id}}-info"
+            class="ion-text-wrap core-course-module-handler core-module-module-description {{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]="courseId">
                 </core-format-text>
-            </div>
-            <ion-badge slot="end" *ngIf="module.completiondata?.offline" color="warning" class="ion-text-wrap">
-                {{ 'core.course.manualcompletionnotsynced' | translate }}
-            </ion-badge>
-        </div>
+            </ion-label>
+        </ion-item>
+    </ng-container>
 
-        <core-format-text class="core-module-description" *ngIf="module.description" maxHeight="80" [text]="module.description"
-            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
-        </core-format-text>
-    </ion-label>
-</ion-item>
-
-<!-- Loading. -->
-<ion-item *ngIf="module && module.handlerData && module.visibleoncoursepage !== 0 && 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">
-    <ion-label><ion-spinner></ion-spinner></ion-label>
-</ion-item>
+    <!-- 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"
+    >
+        <ion-label><ion-spinner></ion-spinner></ion-label>
+    </ion-item>
+</ng-container>

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

@@ -1,45 +1,10 @@
 :host {
-    // @todo Review commented styles.
 
-    background: white;
-    display: block;
-
-    .item.core-course-module-handler {
-        align-items: flex-start;
-        min-height: 52px;
-        cursor: pointer;
-
-//         &.item .item-inner {
-//             @include safe-area-padding(null, 0px, null, null);
-//         }
-//         .label {
-//             @include margin(0, 0, 0, null);
-//         }
-        .core-module-icon {
-            align-items: flex-start;
-            width: 24px;
-            height: 24px;
-            margin-top: 11px;
-        }
-
-//         &.item-ios:active,
-//         &.item-ios.activated {
-//             background-color: $list-ios-activated-background-color;
-//         }
-//         &.item-md:active,
-//         &.item-md.activated {
-//             background-color: $list-md-activated-background-color;
-//         }
+    .item.core-module-main-item {
+        --min-height: 52px;
     }
 
-    .core-module-title {
-        display: flex;
-        flex-flow: row;
-        align-items: flex-start;
-
-        core-format-text {
-            flex-grow: 2;
-        }
+    .core-module-main-item {
         .core-module-buttons,
         .buttons.core-module-buttons {
             margin: 0;
@@ -66,10 +31,10 @@
         }
     }
 
-    .core-module-more-info {
-        // ion-badge {
-        //     @include text-align('start');
-        // }
+    .core-module-module-description {
+        ion-badge {
+            text-align: start;
+        }
 
         .core-module-availabilityinfo  {
             font-size: 90%;
@@ -79,86 +44,23 @@
         }
     }
 
-    .core-not-clickable {
-        cursor: initial;
-
-//         &:active,
-//         &.activated {
-//             background-color: $list-background-color;
-//         }
-    }
-
     .core-module-loading {
         width: 100%;
         text-align: center;
         padding-top: 10px;
         clear: both;
-//         @include darkmode() {
-//             color: $core-dark-text-color;
-//         }
     }
 
-//     @include darkmode() {
-//         .item.core-course-module-handler {
-//             background: $core-dark-item-bg-color;
-//             &.item-ios:active,
-//             &.item-ios.activated,
-//             &.item-md:active,
-//             &.item-md.activated {
-//               background-color: $core-dark-background-color;
-//             }
-//         }
+    .core-module-main-item + .core-module-module-description ion-label {
+        margin-top: 0px;
+    }
+
+    .core-module-main-item.has-module-description {
+        --inner-border-width: 0;
+    }
+
+    .core-module-module-description ion-label {
+        margin-inline-start: 50px;
+    }
 
-//         .core-not-clickable:active,
-//         .core-not-clickable.activated {
-//             background-color: $core-dark-item-bg-color;
-//         }
-//     }
 }
-
-// ion-app.app-root.md core-course-module {
-//     .core-module-description {
-//         @include padding(null, $label-md-margin-end, null, null);
-//         margin-bottom: $label-md-margin-bottom;
-
-//         .core-show-more {
-//             @include padding(null, $label-md-margin-end, null, null);
-//         }
-//     }
-
-//     .core-module-title core-format-text {
-//         padding-top: $label-md-margin-top + 3;
-//     }
-//     .button-md {
-//         margin-top: 8px;
-//         margin-bottom: 8px;
-//     }
-//     .core-module-buttons-more {
-//         min-height: 52px;
-//         min-width: 53px;
-//     }
-// }
-
-// ion-app.app-root.ios core-course-module {
-//     .core-module-description {
-//         @include padding(null, $label-ios-margin-end, null, null);
-//         margin-bottom: $label-md-margin-bottom;
-
-//         .core-show-more {
-//             @include padding(null, $label-ios-margin-end, null, null);
-//         }
-//     }
-
-//     .core-module-title core-format-text {
-//         padding-top: $label-ios-margin-top + 3;
-//     }
-
-//     .core-module-buttons-more {
-//         min-height: 53px;
-//         min-width: 58px;
-//     }
-// }
-
-// ion-app.app-root .core-course-module-handler.item [item-start] + .item-inner {
-//     @include margin-horizontal(4px, null);
-// }