From 689a36ac12028bee1b3d1e9396ee105b98af642a Mon Sep 17 00:00:00 2001
From: Anastasios Bithas <anastasiostam@gmail.com>
Date: Sat, 11 Jun 2022 17:48:33 +0300
Subject: [PATCH] MOBILE-4092 courses: Fix access to hidden courses

---
 .../course-list-item/core-courses-course-list-item.html     | 2 +-
 .../components/course-list-item/course-list-item.scss       | 5 +++++
 .../course-progress/core-courses-course-progress.html       | 2 +-
 .../courses/components/course-progress/course-progress.scss | 6 ++++++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
index e8d9a2749..954a0a190 100644
--- a/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
+++ b/src/core/features/courses/components/course-list-item/core-courses-course-list-item.html
@@ -28,7 +28,7 @@
     </ng-container>
 
     <ion-item class="ion-text-wrap" button detail="false" (click)="openCourse()" [attr.aria-label]="course.displayname || course.fullname"
-        [class.item-disabled]="course.visible == 0">
+        [class.core-course-disabled]="course.visible == 0">
 
         <ng-container *ngIf="layout == 'list' || layout == 'listwithenrol'">
             <ion-icon *ngIf="!course.courseImage" name="fas-graduation-cap" slot="start" class="course-icon core-course-thumb"
diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
index 6ec6ee1a3..0ee8e5dc1 100644
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -39,6 +39,11 @@
     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;
 }
diff --git a/src/core/features/courses/components/course-progress/core-courses-course-progress.html b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
index 4d529d350..8dd5eea27 100644
--- a/src/core/features/courses/components/course-progress/core-courses-course-progress.html
+++ b/src/core/features/courses/components/course-progress/core-courses-course-progress.html
@@ -4,7 +4,7 @@
         <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.item-disabled]="course.visible == 0"
+        [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)"
diff --git a/src/core/features/courses/components/course-progress/course-progress.scss b/src/core/features/courses/components/course-progress/course-progress.scss
index 28a70f437..d120215d6 100644
--- a/src/core/features/courses/components/course-progress/course-progress.scss
+++ b/src/core/features/courses/components/course-progress/course-progress.scss
@@ -113,6 +113,12 @@
     }
 }
 
+// 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);