Chapter notes details UI

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { VideoNotesComponent } from './tabs/courses/video-chapter/video-notes/vi
 import { CalendarComponent } from './calendar/calendar.component';
 import { AttendanceComponent } from './tabs/more/attendance/attendance.component';
 import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component';
+import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -16,6 +17,7 @@ const routes: Routes = [
     { component: TabsComponent, path: 'tabs/:subpage' },
     { component: DetailsComponent, path: 'course-details' },
     { component: DetailsComponent, path: 'course-details/:heading' },
+    { component: ChapterNotesComponent, path: 'chapter-notes/:heading' },
     { component: VideoChapterComponent, path: 'video-chapter/:heading' },
     { component: VideoNotesComponent, path: 'video-notes/:heading' },
     { component: CalendarComponent, path: 'calendar' },

src/app/tabs/courses/chapter-notes/chapter-notes.component.html

@@ -1 +1,35 @@
-<p>chapter-notes works!</p>
+<div class="page">
+    <header class="nav-header">
+        <button class="close-button" (click)="back()">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+        </button>
+        <h5>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
+            <span> {{ heading }} </span>
+        </h5>
+    </header>
+
+    <h2> {{ heading }} </h2>
+    <div class="author">
+        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+        <label> Dwayne the Rock </label>
+        <span> Faculty, Mathematics </span>
+    </div>
+
+    <div class="description">
+        <p>
+            <a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit. Voluptatem in ad commodi quo. Nisi non rerum perspiciatis? Molestiae beatae sit aliquid culpa, dolores quas! Dolore, eveniet, sit. Tempore, soluta omnis.
+        </p>
+
+        <figure>
+            <img src="https://www.educationworld.in/wp-content/uploads/2018/12/notebook-near-math-supplies_23-2147847773.jpg" alt="">
+        </figure>
+        
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore doloremque necessitatibus ut quae ipsum, voluptas fuga perferendis incidunt labore voluptatibus iusto ullam ab repudiandae commodi alias excepturi nulla! Vero?
+            Lorem ipsum dolor sit amet, <a href="#">Lorem ipsum</a> consectetur adipisicing elit. Saepe et cupiditate at nam earum mollitia commodi cum quidem dolore aliquid nostrum architecto voluptatem eius recusandae, enim explicabo deserunt expedita similique.
+        </p>
+
+    </div>
+
+</div>

src/app/tabs/courses/chapter-notes/chapter-notes.component.scss

@@ -0,0 +1,121 @@
+.page {
+    background-color: var(--black);
+    height: 100vh;
+    padding-bottom: 60px;
+    overflow: auto;
+}
+
+.nav-header {
+    background-color: var(--ash-black);
+    display: flex;
+    align-items: center;
+    padding: 0 5%;
+    height: 60px;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+
+    .close-button {
+        border: 0px;
+        background-color: transparent;
+        .icon {
+            width: 16px;
+            height: 16px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin-left: 20px;
+        letter-spacing: 1px;
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: white;
+            margin-right: 3px;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+    }
+}
+
+h2 {
+    padding: 0 5%;
+    font-size: 22px;
+    margin: 20px auto 10px;
+    color: white;
+    font-weight: 400;
+}
+
+.author {
+    display: flex;
+    width: 100%;
+    padding: 0 5%;
+
+    img {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        margin-right: 10px;
+    }
+
+    label {
+        font-size: 14px;
+        color: white;
+        margin-right: 10px;
+    }
+
+    span {
+        position: relative;
+        font-size: 14px;
+        color: var(--light-grey);
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        &::before {
+            content: '';
+            display: inline-block;
+            height: 100%;
+            width: 2px;
+            background-color: var(--light-grey);
+            margin-right: 10px;
+        }
+    }
+}
+
+.description {
+    width: 90%;
+    margin: 40px auto 0;
+    color: white;
+
+    p {
+        margin: 20px auto;
+        font-size: 14px;
+        line-height: 2;
+    }
+
+    a {
+        color: var(--teal-green);
+    }
+
+    figure {
+        display: block;
+        width: 100%;
+        border-radius: 5px;
+        overflow: hidden;
+        margin: 20px auto;
+
+        img {
+            display: block;
+            width: 100%;
+            object-fit: cover;
+        }
+    }
+}

src/app/tabs/courses/chapter-notes/chapter-notes.component.ts

@@ -1,15 +1,35 @@
 import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
-  selector: 'app-chapter-notes',
-  templateUrl: './chapter-notes.component.html',
-  styleUrls: ['./chapter-notes.component.scss']
+	selector: 'app-chapter-notes',
+	templateUrl: './chapter-notes.component.html',
+	styleUrls: ['./chapter-notes.component.scss']
 })
 export class ChapterNotesComponent implements OnInit {
+    heading: string;
+    routeSubscription: Subscription;
 
-  constructor() { }
+	constructor(
+        private location: Location,
+        private route: ActivatedRoute
+    ) { }
 
-  ngOnInit(): void {
-  }
+    ngOnInit(): void {
+        this.routeSubscription = this.route.params.subscribe((params) => {
+            this.heading = params['heading'];
+        });
+    }
+
+    ngOnDestroy() {
+        this.routeSubscription.unsubscribe();
+    }
+
+
+    back() {
+        this.location.back();
+    }
 
 }

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

@@ -61,7 +61,7 @@
                     <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-2']">
+                            <p [routerLink]="['/chapter-notes/', 'Topic-2']">
                                 <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>
                             <button class="action-button" (click)="showDeletePopup = true">
@@ -85,7 +85,7 @@
                     <li class="topic">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-4']">
+                            <p [routerLink]="['/chapter-notes/', 'Topic-4']">
                                 <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>
                             <button class="action-button">
@@ -120,7 +120,7 @@
                     <li class="topic completed">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-2']">
+                            <p [routerLink]="['/chapter-notes/', 'Topic-2']">
                                 <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>
                             <button class="action-button" (click)="showDeletePopup = true">
@@ -144,7 +144,7 @@
                     <li class="topic">
                         <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
                         <div class="topic-container">
-                            <p [routerLink]="['/video-chapter/', 'Topic-4']">
+                            <p [routerLink]="['/chapter-notes/', 'Topic-4']">
                                 <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>
                             <button class="action-button">

src/app/tabs/courses/video-chapter/video-notes/video-notes.component.html

@@ -1,14 +1,6 @@
 <div class="page">
     <ngx-siema [options]="options">
-        <header class="nav-header">
-            <button class="close-button" (click)="back()">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-            </button>
-            <h5>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/play-button.svg"></svg-icon>
-                <span> Notes 1</span>
-            </h5>
-        </header>
+                
         <ngx-siema-slide>
             <header class="nav-header">
                 <button class="close-button" (click)="back()">