Chapter UI enchancements

src/app/tabs/courses/details/details.component.html

@@ -1,107 +1,141 @@
-<section class="upfold">
-    <button class="close-button" (click)="back()">
-        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-    </button>
+<div class="page">
+    <section class="upfold">
+        <button class="close-button" (click)="back()">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+        </button>
 
-    <h3> {{ heading }} </h3>
-    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-        Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis.
-    </p>
-    <label> 21 Chapters to finish </label>
-</section>
+        <h3> {{ heading }} </h3>
+        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+            Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis.
+        </p>
+        <label> 21 Chapters to finish </label>
+    </section>
 
-<div class="progress-holder"> <span class="progress"></span> </div>
+    <div class="progress-holder"> <span class="progress"></span> </div>
 
-<header class="segment-header">
-    <button (click)="selectedSegment='home'"
-    [ngClass]="{'active': selectedSegment === 'home' }"> Home </button>
-    <button (click)="selectedSegment='resources'"
-    [ngClass]="{'active': selectedSegment === 'resources' }"> Resources </button>
-    <button (click)="selectedSegment='grades'"
-    [ngClass]="{'active': selectedSegment === 'grades' }"> Grades </button>
-    <button (click)="selectedSegment='forums'"
-    [ngClass]="{'active': selectedSegment === 'forums' }"> Forums </button>
-</header>
+    <header class="segment-header">
+        <button (click)="selectedSegment='home'"
+        [ngClass]="{'active': selectedSegment === 'home' }"> Home </button>
+        <button (click)="selectedSegment='resources'"
+        [ngClass]="{'active': selectedSegment === 'resources' }"> Resources </button>
+        <button (click)="selectedSegment='grades'"
+        [ngClass]="{'active': selectedSegment === 'grades' }"> Grades </button>
+        <button (click)="selectedSegment='forums'"
+        [ngClass]="{'active': selectedSegment === 'forums' }"> Forums </button>
+    </header>
 
-<section class="test-prompt">
-    <section class="prompt">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
-        </p>
-        <button> Take the test now! </button>
+    <section class="test-prompt">
+        <section class="prompt">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
+            </p>
+            <button> Take the test now! </button>
+        </section>
     </section>
-</section>
 
-<ul class="chapter-list">
-    <li class="chapter completed">
-        <div class="container">
-            <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            <div class="chapter-heading">
-                <label> Chapter 1 </label>
-                <p> 5 Topics </p>
-            </div>
-            <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
-        </div>
-    </li>
-    <li class="chapter active">
-        <div class="container">
-            <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            <div class="chapter-heading">
-                <label> Chapter 2 </label>
-                <p> 5 Topics </p>
-            </div>
-            <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
-        </div>
-        <ul class="topic-list">
-            <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
+    <ul class="chapter-list">
+        <li class="chapter completed" [ngClass]="{'active' : selectedChapter === 1}">
+            <div class="container" (click)="selectedChapter === 1? selectedChapter = null : selectedChapter = 1">
                 <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                <div class="topic-container">
-                    <p>
-                        <span class="type"> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                    </p>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                <div class="chapter-heading">
+                    <label> Chapter 1 </label>
+                    <p> 5 Topics </p>
                 </div>
-            </li>
+                <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+            </div>
+            <ul class="topic-list">
+                <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                    </div>
+                </li>
 
-            <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                <div class="topic-container">
-                    <p>
-                        <span class="type"> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                    </p>
-                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
-                </div>
-            </li>
+                <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                    </div>
+                </li>
 
-            <li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                <div class="topic-container">
-                    <p>
-                        <span class="type"> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                    </p>
-                    <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
-                </div>
-            </li>
+                <li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                    </div>
+                </li>
 
-            <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
+                <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                    </div>
+                </li>
+            </ul>
+        </li>
+        <li class="chapter" [ngClass]="{'active' : selectedChapter === 2}">
+            <div class="container" (click)="selectedChapter === 2 ? selectedChapter = null : selectedChapter = 2">
                 <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                <div class="topic-container">
-                    <p>
-                        <span class="type"> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                    </p>
-                    <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                <div class="chapter-heading">
+                    <label> Chapter 2 </label>
+                    <p> 5 Topics </p>
                 </div>
-            </li>
+                <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+            </div>
+            <ul class="topic-list">
+                <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-1']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                    </div>
+                </li>
 
-            <li class="topic" [routerLink]="['/video-chapter/', 'Topic-5']">
-                <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                <div class="topic-container">
-                    <p>
-                        <span class="type"> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
-                    </p>
-                    <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
-                </div>
-            </li>
-        </ul>
-    </li>
-</ul>
+                <li class="topic completed" [routerLink]="['/video-chapter/', 'Topic-2']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type">  <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/delete.svg"></svg-icon>
+                    </div>
+                </li>
+
+                <li class="topic" [routerLink]="['/video-chapter/', 'Topic-3']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/play-button.svg"></svg-icon> Video: </span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                    </div>
+                </li>
+
+                <li class="topic" [routerLink]="['/video-chapter/', 'Topic-4']">
+                    <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                    <div class="topic-container">
+                        <p>
+                            <span class="type"> <svg-icon [applyClass]="true" class="type-icon" src="assets/custom-icons/newspaper.svg"></svg-icon> Notes: </span> Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.
+                        </p>
+                        <svg-icon [applyClass]="true" class="icon download" src="assets/custom-icons/download.svg"></svg-icon>
+                    </div>
+                </li>
+            </ul>
+        </li>
+    </ul>
+
+</div>

src/app/tabs/courses/details/details.component.scss

@@ -1,3 +1,9 @@
+.page {
+    background-color: var(--black);
+    height: 100vh;
+    overflow: auto;
+}
+
 .upfold {
     background-color: var(--black);
     padding: 20px 10%;
@@ -116,14 +122,19 @@
             .container {
                 position: sticky;
                 position: -webkit-sticky;
-                top: 0;
+                top: 48px;
                 z-index: 1;
                 border-bottom: 0px;
+                border-top: 1px solid var(--dark-grey);
             }
 
             .arrow {
                 transform: rotate(90deg);
             }
+
+            .topic-list {
+                display: block;
+            }
         }
     }
 
@@ -171,6 +182,7 @@
     list-style: none;
     position: relative;
     z-index: 0;
+    display: none;
 
     .topic {
         display: flex;
@@ -228,6 +240,12 @@
                 color: white;
                 font-weight: 500;
             }
+
+            .type-icon {
+                width: 15px;
+                height: 15px;
+                fill: white;
+            }
         }
     }
 

src/app/tabs/courses/details/details.component.ts

@@ -12,6 +12,7 @@ export class DetailsComponent implements OnInit {
     selectedSegment: string = 'home';
     heading: string;
     routeSubscription: Subscription;
+    selectedChapter: number = 1;
 
 	constructor(
         private route: ActivatedRoute,