Add note slideup

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

@@ -13,16 +13,10 @@
 
     <div class="description">
         <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum saepe itaque quisquam, maxime!
+            <strong> Transcript (2:00) : </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis quam sint recusandae ullam culpa enim, atque et? Doloremque sapiente odio, reprehenderit consectetur, suscipit repudiandae quis illum saepe itaque quisquam, maxime!
         </p>
         <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit odit rerum.
-        </p>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eos explicabo soluta voluptatibus fugit expedita omnis optio tempore at iure odio aliquid, quibusdam, voluptas aspernatur harum libero sequi nam quidem.
-        </p>
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam officiis iusto ipsa, adipisci porro ipsam. Repellendus itaque pariatur rem quia quisquam neque iure amet, deleniti, nesciunt veritatis, fugit ipsam magni.
+            <strong> Thoughts : </strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores ipsum dolorem quis omnis fuga, dolor expedita reprehenderit nemo maxime sequi voluptatum enim non, sint, repudiandae soluta cupiditate impedit odit rerum.
         </p>
     </div>
 

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

@@ -63,6 +63,9 @@
             <li [routerLink]="['/notes-details', 'Notes-1']">
                 <div class="content">
                     <label> Notes 1 </label>
+                    <p>
+                        2:00
+                    </p>
                     <p>
                         quidem minima dolor delectus optio, dicta.
                     </p>
@@ -73,6 +76,9 @@
             <li [routerLink]="['/notes-details', 'Notes-2']">
                 <div class="content">
                     <label> Notes 2 </label>
+                    <p>
+                        2:00
+                    </p>
                     <p>
                         quidem minima dolor delectus optio, dicta.
                     </p>
@@ -83,17 +89,42 @@
             <li [routerLink]="['/notes-details', 'Notes-3']">
                 <div class="content">
                     <label> Notes 3 </label>
+                    <p>
+                        2:00
+                    </p>
                     <p>
                         quidem minima dolor delectus optio, dicta.
                     </p>
                 </div>
                 <svg-icon [applyClass]="true" class="icon arrow" src="assets/custom-icons/down-arrow.svg"></svg-icon>
             </li>
+        </ul>
+    </section>
+
+    <button class="add-notes-button" (click)="showAddNote = true">
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add.svg"></svg-icon>
+        <span> SAVE A NOTE </span>
+    </button>
 
-            <button class="add-notes-button">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add.svg"></svg-icon>
-                <span> SAVE A NOTE </span>
+    <section class="add-note-slideup" [ngClass]="{'active' : showAddNote, 'expand': showAddThoughts }">
+        <header>
+            <button (click)="showAddNote = false; showAddThoughts = false">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
             </button>
-        </ul>
+            <h5> Note </h5>
+            <button (click)="showAddNote = false; showAddThoughts = false"> Save </button>
+        </header>
+
+        <p>
+            Transcript (2:00)
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi repellat voluptates inventore molestias quibusdam ex unde perferendis recusandae placeat itaque? Quos fuga suscipit temporibus. Aperiam ea dolor dolore doloremque voluptatem!
+        </p>
+        <button class="add-thoughts" (click)="showAddThoughts = true">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add.svg"></svg-icon>
+            Add your thoughts
+        </button>
+        <textarea placeholder="Your thoughts"></textarea>
     </section>
 </div>

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

@@ -2,6 +2,7 @@
     background-color: var(--black);
     height: 100vh;
     overflow: auto;
+    padding-bottom: 60px;
 }
 
 .nav-header {
@@ -152,7 +153,6 @@
 
 .notes-list {
     list-style: none;
-    padding-bottom: 60px;
 
     li {
         padding: 15px;
@@ -189,27 +189,125 @@
             transform: rotate(-45deg);
         }
     }
+}
+
+.add-notes-button {
+    position: fixed;
+    left: 0px;
+    bottom: 0px;
+    background-color: var(--ash-black);
+    color: var(--light-grey);
+    font-size: 14px;
+    width: 100%;
+    height: 50px;
+    border: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0px 0px 5px var(--black);
+    z-index: 0;
+
+    .icon {
+        width: 20px;
+        height: 20px;
+        fill: var(--light-grey);
+        margin-right: 5px;
+    }
+}
 
-    .add-notes-button {
-        position: fixed;
-        left: 0px;
-        bottom: 0px;
+.add-note-slideup {
+    position: fixed;
+    bottom: 0;
+    z-index: 1;
+    left: 0;
+    background-color: var(--black);
+    width: 100%;
+    transform: translateY(100vh);
+    transition: transform 0.5s;
+
+    &.active {
+        transform: translateY(calc(0vh + 190px));
+
+        &.expand {
+            transform: translateY(0);
+
+            .add-thoughts {
+                display: none;
+            }
+        }
+    }
+
+    header {
+        display: flex;
+        width: 100%;
+        height: 50px;
         background-color: var(--ash-black);
+        color: white;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 5%;
+
+        h5 {
+            margin: 0;
+            font-weight: 400;
+            font-size: 16px;
+            flex-grow: 1;
+            text-align: center;
+        }
+
+        button {
+            background-color: transparent;
+            border: 0px;
+            font-size: 16px;
+            color: var(--teal);
+        }
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: var(--light-grey);
+        }
+    }
+
+    p {
         color: var(--light-grey);
+        width: 90%;
+        margin: 20px auto;
         font-size: 14px;
-        width: 100%;
-        height: 50px;
-        border: 0px;
+    }
+
+    .add-thoughts {
+        background-color: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0px 0px 5px var(--black);
+        width: 100%;
+        border: 0px;
+        color: var(--light-grey);
+        height: 50px;
+        border: 0px;
+        font-size: 16px;
+        background-color: var(--black);
+        border-top: 1px solid var(--dark-grey);
 
         .icon {
             width: 20px;
             height: 20px;
             fill: var(--light-grey);
-            margin-right: 5px;
+            margin-right: 10px;
         }
     }
+
+    textarea {
+        height: 150px;
+        color: var(--light-grey);
+        font-size: 14px;
+        background-color: transparent;
+        width: 100%;
+        display: block;
+        margin: 20px auto;
+        padding: 15px 5%;
+        border: 0px;
+        border-top: 1px solid var(--dark-grey);
+    }
 }

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

@@ -12,6 +12,8 @@ export class VideoChapterComponent implements OnInit {
     selectedSegment: string = 'transcript';
     heading: string;
     routeSubscription: Subscription;
+    showAddNote: boolean = false;
+    showAddThoughts: boolean = false;
 
     constructor(
         private route: ActivatedRoute,