MOBILE-4142 courses: Display hidden from students message

Author: dpalou

src/core/features/courses/components/course-list-item/core-courses-course-list-item.html

@@ -27,8 +27,7 @@
         </div>
     </ng-container>
 
-    <ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
-        [class.core-course-disabled]="course.visible == 0">
+    <ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname">
 
         <ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
             <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
@@ -74,6 +73,13 @@
                         </core-format-text>
                     </ion-label>
                 </ion-chip>
+
+                <ion-chip color="info" *ngIf="course.visible == 0"
+                    class="core-course-additional-info ion-text-wrap core-course-hidden-message">
+                    <ion-label>
+                        {{ 'core.course.hiddenfromstudents' | translate }}
+                    </ion-label>
+                </ion-chip>
             </div>
 
             <div *ngIf="layout != 'summarycard' && isEnrolled && progress >= 0 && completionUserTracked !== false"

src/core/features/courses/components/course-list-item/course-list-item.scss

@@ -39,11 +39,6 @@
     color: var(--core-star-color);
 }
 
-// Simulate item[disabled] but keep pointer-events for hidden courses.
-ion-item.core-course-disabled {
-    opacity: .8;
-}
-
 button {
     z-index: 1;
 }
@@ -102,6 +97,10 @@ ion-chip {
     margin-left: 0;
     margin-right: 0;
     max-width: 100%;
+
+    &.core-course-category {
+        @include margin-horizontal(0px, 8px);
+    }
 }
 
 

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

@@ -4,7 +4,6 @@
         <img *ngIf="course.courseImage" [src]="course.courseImage" core-external-content alt="" />
     </div>
     <ion-item button (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname" class="core-course-header"
-        [class.core-course-disabled]="course.visible == 0"
         [class.core-course-only-title]="!showAll || progress < 0 && 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

@@ -114,11 +114,6 @@
 }
 
 // Common styles.
-// Simulate item[disabled] but keep pointer-events for hidden courses.
-ion-item.core-course-disabled {
-    opacity: .8;
-}
-
 :host-context(.core-horizontal-scroll) {
     @include horizontal_scroll_item(80%, 250px, 300px);