Details tab - transcript, resources and tabs! + Upcoming classes and not previous

src/app/tabs/home/home.component.html

@@ -17,6 +17,75 @@
         </span>
     </section>
 
+    <section class="session-details">
+        <button class="show-details-button" (click)="showClassDetails  = !showClassDetails "
+        [ngClass]="{'active' : showClassDetails }"> Show Class Details
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+        </button>
+
+        <div class="details-holder" *ngIf="showClassDetails">
+            <section class="segments">
+                <button [ngClass]="{'active' : selectedSegment === 'transcript' }"
+                (click)="selectedSegment = 'transcript'"> Transcript </button>
+                <button [ngClass]="{'active' : selectedSegment === 'resources' }"
+                (click)="selectedSegment = 'resources'"> Resources </button>
+            </section>
+
+            <section class="transcript" *ngIf="selectedSegment === 'transcript'">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quod, tempora ratione porro architecto non sequi accusamus delectus id ipsam dolores incidunt quam necessitatibus magnam laboriosam neque, unde odio cumque.
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores voluptas voluptate maxime eos aspernatur recusandae, est reprehenderit quia, temporibus deleniti repellat mollitia. At aut quas veniam, quasi, aperiam quidem aliquid!
+                </p>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus consectetur minima eligendi, velit repudiandae laudantium enim. Omnis tempore reprehenderit, quo laboriosam perferendis eligendi quia, rem est in consequuntur excepturi. Provident!
+                </p>
+            </section>
+
+            <ul class="resources-list" *ngIf="selectedSegment === 'resources'">
+                <a href="http://africau.edu/images/default/sample.pdf" target="_blank">
+                    <li>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
+                        <div class="content">
+                            <label> Resource 1 </label>
+                            <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>
+                </a>
+
+                <a href="https://www.ieee.org/publications/periodicals.html" target="_blank">
+                    <li>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
+                        <div class="content">
+                            <label> Resource 1 </label>
+                            <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>
+                </a>
+
+                <a href="http://africau.edu/images/default/sample.pdf" target="_blank">
+                    <li>
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
+                        <div class="content">
+                            <label> Resource 2 </label>
+                            <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>
+                </a>
+            </ul>
+        </div>
+    </section>
+
     <ul class="subject-list">
         <header> <h5> Today's Classes: </h5> </header>
 
@@ -50,7 +119,7 @@
             <button class="view-button"> Watch </button>
         </li>
 
-        <header> <h5> Yesterday: </h5> </header>
+        <header> <h5> Tomorrow: </h5> </header>
 
         <li class="late">
             <div class="schedule">
@@ -82,7 +151,7 @@
             <button class="view-button"> Watch </button>
         </li>
 
-        <header> <h5> Mon, March 29: </h5> </header>
+        <header> <h5> Mon, June 29: </h5> </header>
 
         <li class="attended">
             <div class="schedule">
@@ -114,7 +183,7 @@
             <button class="view-button"> Watch </button>
         </li>
 
-        <header> <h5> Sat, March 27: </h5> </header>
+        <header> <h5> Sat, June 30: </h5> </header>
 
         <li class="absent">
             <div class="schedule">

src/app/tabs/home/home.component.scss

@@ -1,6 +1,7 @@
 .page-container {
     height: 100%;
     overflow: auto;
+    padding-bottom: 20px;
 }
 
 .header-bar {
@@ -41,7 +42,7 @@
     background-color: var(--dark-grey);
     height: 30vh;
     width: 90%;
-    margin: 10px auto;
+    margin: 0 auto;
     border-radius: 5px;
     display: flex;
     align-items: center;
@@ -94,6 +95,123 @@
 }
 
 
+.session-details {
+    background-color: var(--ash-black);
+    border-radius: 7px;
+    overflow: hidden;
+    width: 90%;
+    margin: 20px auto;
+
+    .show-details-button {
+        width: 100%;
+        background-color: var(--dark-grey);
+        border: 0px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: white;
+        font-size: 14px;
+        height: 45px;
+        border-radius: 7px;
+        padding: 0 5%;
+
+        &.active .icon {
+            transform: rotate(90deg);
+        }
+
+        .icon {
+            fill: white;
+            width: 15px;
+            height: 15px;
+        }
+    }
+
+
+    .segments {
+        margin-top: 5px;
+        background-color: var(--ash-black);
+        display: flex;
+        align-items: stretch;
+        height: 40px;
+        box-shadow: 0px 0px 5px var(--black);
+        margin-bottom: 20px;
+
+        button {
+            font-size: 14px;
+            width: calc(100% / 2);
+            border: 0px;
+            background-color: transparent;
+            color: var(--light-grey);
+
+            &.active {
+                color: var(--teal-green);
+            }
+        }
+    }
+
+    .transcript {
+        width: 90%;
+        margin: 0 auto;
+        color: var(--light-grey);
+        height: 150px;
+        overflow: auto;
+
+        p {
+            font-size: 14px;
+            margin-bottom: 20px;
+        }
+    }
+
+    .resources-list {
+        list-style: none;
+        width: 90%;
+        margin: 0 auto;
+        height: 150px;
+        overflow: auto;
+
+        a {
+            text-decoration: none;
+            display: block;
+        }
+
+        li {
+            padding: 15px 20px;
+            background-color: var(--black);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-radius: 10px;
+            overflow: hidden;
+            margin-bottom: 15px;
+        }
+
+        .content {
+            width: calc(100% - 80px);
+        }
+
+        label {
+            color: white;
+            font-size: 15px;
+            display: block;
+        }
+
+        p {
+            color: var(--light-grey);
+            font-size: 12px;
+        }
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+
+            &.arrow {
+                transform: rotate(-45deg);
+            }
+        }
+    }
+}
+
 .subject-list {
     position: relative;
     width: 88%;

src/app/tabs/home/home.component.ts

@@ -9,6 +9,8 @@ import { ScrollEvent } from 'ngx-scroll-event';
 })
 export class HomeComponent implements OnInit {
     expandVideo: boolean = false;
+    showClassDetails: boolean = false;
+    selectedSegment: string = 'transcript';
 
 	constructor() { }
 
@@ -25,11 +27,6 @@ export class HomeComponent implements OnInit {
         if (event.isReachingBottom || container.scrollTop >= 100) {
 			this.expandVideo = true;
 		}
-
-		// if (event.isWindowEvent) {
-		// 	console.log(`This event is fired on Window not on an element.`);
-		// }
-
 	}
 
 }