Partial commit --- UI corrections

src/app/app-routing.module.ts

@@ -25,6 +25,7 @@ const routes: Routes = [
     { component: VideoChapterComponent, path: 'video-chapter/:heading' },
     { component: VideoNotesComponent, path: 'video-notes/:heading' },
     { component: QuizComponent, path: 'quiz' },
+    { component: QuizComponent, path: 'quiz/:heading' },
     { component: TestComponent, path: 'test'},
     { component: CalendarComponent, path: 'calendar' },
     { component: AttendanceComponent, path: 'attendance'},

src/app/calendar/calendar.component.html

@@ -37,8 +37,8 @@
     <section class="schedule-details">
         <header> {{ selectedDate }}, {{ selectedMonth }} {{ selectedYear }}  </header>
         <ul>
-            <li class="progress" [routerLink]="['/quiz']">
-                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+            <li class="progress" [routerLink]="['/tabs/home']">
+                <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/play-button.svg"></svg-icon>
                 <div class="content-holder">
                     <div class="content">
                         <label> Social Science class </label>
@@ -93,7 +93,7 @@
                                 <label> Social Science class </label>
                                 <p> 4:00 PM to 5:00 PM </p>
                             </div>
-                            <span class="status"> In Progress </span>
+                            <span class="status"> Completed Quiz </span>
                         </div>
                     </li>
 
@@ -133,14 +133,14 @@
 
                 <header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
                 <ul>
-                    <li class="absent" [routerLink]="['/quiz']">
-                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                    <li class="absent" [routerLink]="['/video-chapter', 'Living Things']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                         <div class="content-holder">
                             <div class="content">
                                 <label> Social Science class </label>
                                 <p> 4:00 PM to 5:00 PM </p>
                             </div>
-                            <span class="status"> In Progress </span>
+                            <span class="status"> Absent </span>
                         </div>
                     </li>
 
@@ -181,5 +181,5 @@
         </section>
     </section>
 
-    <button class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>
+    <button *ngIf="demoType === 'Teacher'" class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>
 </section>

src/app/calendar/calendar.component.ts

@@ -17,7 +17,7 @@ export class CalendarComponent implements OnInit {
     preceedingDays: Array<number> = [];
     succeedingDays: Array<number> = [];
     selectedMonthDays: Array<number> = [];
-
+    demoType: string;
     showAllSchedules: boolean = false;
 
 	constructor(
@@ -40,6 +40,7 @@ export class CalendarComponent implements OnInit {
     }
 
 	ngOnInit(): void {
+        this.demoType = localStorage.demoType;
         this.selectToday();
 	}
 

src/app/reusable-components/class-card-list/class-card-list.component.html

@@ -1,13 +1,19 @@
 <ul class="subject-list">
     <li *ngFor="let class of classes" [ngClass]="{'late' : class.attendanceStatus && class.attendanceStatus === 'LATE',
     'attended' : class.attendanceStatus && class.attendanceStatus === 'PRESENT',
-    'absent' : class.attendanceStatus && class.attendanceStatus === 'ABSENT'}">
+    'absent' : class.attendanceStatus && class.attendanceStatus === 'ABSENT',
+    'ripple' : class.isLive, 'disable' : hasLive && !class.isLive }">
         <div class="schedule">
             <label> {{ class.time }} </label>
             <p> {{ class.duration }} </p>
         </div>
         <div class="subject">
             <label> {{ class.subject }} </label>
+            <p class="status">
+                <span *ngIf="class.attendanceStatus && class.attendanceStatus === 'PRESENT'"> Present </span>
+                <span *ngIf="class.attendanceStatus && class.attendanceStatus === 'ABSENT'"> Absent </span>
+                <span *ngIf="class.attendanceStatus && class.attendanceStatus === 'LATE'"> 10 Mins late </span>
+            </p>
             <p *ngIf="class.teacher.name !== 'You'">
                 <img [src]="class.teacher.profile_image">
                 <span> {{ class.teacher.name }} </span>

src/app/reusable-components/class-card-list/class-card-list.component.scss

@@ -30,6 +30,26 @@
         box-shadow: 0px 0px 5px -2px var(--black);
         position: relative;
 
+        &.disable {
+            filter: grayscale(70%);
+            pointer-events: none;
+        }
+
+        &.ripple {
+            box-shadow: none;
+            border: 2px solid var(--teal-green);
+            animation: ripple 1s infinite;
+        }
+
+        @keyframes ripple {
+            100% {
+                box-shadow: 0px 0px 1px 20px transparent;
+            }
+            0% {
+                box-shadow: 0px 0px 1px 0px var(--teal);
+            }
+        }
+
         &::before {
             content: '';
             position: absolute;
@@ -40,27 +60,48 @@
             background-color: transparent;
         }
 
-        &.attended::before {
-            background-color: var(--teal-green);
+        &.attended {
+
+            &::before {
+                background-color: var(--teal-green);
+            }
+
+            .status {
+                color: var(--teal-green);
+            }
         }
 
-        &.absent::before {
-            background-color: var(--danger);
+        &.absent {
+
+            &::before {
+                background-color: var(--danger);
+            }
+
+            .status {
+                color: var(--danger-dark);
+            }
         }
 
-        &.late::before {
-            background-color: rgba(orange, 0.5);
+        &.late {
+
+            &::before {
+                background-color: rgba(orange, 0.5);
+            }
+
+            .status {
+                color: rgba(orange, 0.8);
+            }
         }
     }
 
     .schedule {
-        width: 80px;
-        padding-right: 15px;
+        width: 100px;
         text-align: center;
+        padding: 0 5px;
     }
 
     .subject {
-        flex-grow: 1;
+        width: calc(100% - 100px);
         border-left: 1px solid #cecece;
         padding-left: 15px;
         overflow: hidden;

src/app/reusable-components/class-card-list/class-card-list.component.ts

@@ -7,11 +7,11 @@ import { Component, OnInit, Input } from '@angular/core';
 })
 export class ClassCardListComponent implements OnInit {
     @Input() classes: any;
+    @Input() hasLive: boolean;
 
 	constructor() { }
 
 	ngOnInit(): void {
-
 	}
 
 }

src/app/reusable-components/forum/forum.component.html

@@ -27,22 +27,23 @@
 
     <ul class="forum-post-list">
         <li class="post" *ngFor="let post of forumPostList">
-            <button class="book-mark-button" [ngClass]="{'active' : post.isBookmarked}">
+            <button class="book-mark-button" [ngClass]="{'active' : post.isBookmarked}"
+            (click)="post.isBookmarked = !post.isBookmarked">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
             </button>
             <div (click)="openPostDetails(post)">
                 <h5>
                     {{ post.question }}
                 </h5>
-                <div class="tags">
+                <!-- <div class="tags">
                     <button *ngFor="let tag of post.friendTags"> @ {{ tag }} </button>
-                </div>
+                </div> -->
                 <p *ngIf="post.helpLink">
                     <a href="{{ post.helpLink }}" target="_blank"> Link Related to this Topic </a>
                 </p>
-                <div class="tags">
+                <!-- <div class="tags">
                     <button *ngFor="let tag of post.hashTags"> # {{ tag }} </button>
-                </div>
+                </div> -->
             </div>
             <div class="author">
                 <img src="{{ post.author.imgSrc }}">

src/app/reusable-components/forum/post-details/post-details.component.html

@@ -18,16 +18,17 @@
 
         <li *ngFor="let answerPost of postDetails.answers; let i = index" class="post"
         [ngClass]="{'active' : selectedAnswer === i }">
-            <button class="book-mark-button" [ngClass]="{'active' : answerPost.isBookmarked }">
+            <button class="book-mark-button" [ngClass]="{'active' : answerPost.isBookmarked }"
+            (click)="answerPost.isBookmarked = !answerPost.isBookmarked">
                 <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
             </button>
             <div (click)="openSelectedAnswer(i)" id="answer-{{ i }}">
                 <h5>
                     {{ answerPost.answer }}
                 </h5>
-                <div class="tags">
+                <!-- <div class="tags">
                     <button *ngFor="let tag of answerPost.friendTags"> @ {{ tag }} </button>
-                </div>
+                </div> -->
                 <p *ngIf="answerPost.helpLink">
                     <a href="{{ answerPost.helpLink }}" target="_blank"> Link Related to this Topic </a>
                 </p>

src/app/services/demo.service.ts

@@ -206,7 +206,8 @@ export class DemoService {
             teacher: {
                 name: 'Mr Kashinath Kashyap',
                 profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
+            },
+            isLive: true,
         }, {
             time: '3:00 PM',
             duration: '45 Mins',
@@ -271,7 +272,8 @@ export class DemoService {
             teacher: {
                 name: 'You',
                 profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
-            }
+            },
+            isLive: true,
         }, {
             time: '11:00 AM',
             duration: '45 Mins',

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

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./test.component.scss']
 })
 export class TestComponent implements OnInit {
-    testStatus: string = 'PROGRESS';
+    testStatus: string = 'START';
 
     testData = {
         name: 'CHEMISTRY',

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

@@ -9,8 +9,15 @@
 
         <div class="topic-name" *ngIf="classList.length > 0">
             <h2> {{ classList[0].classes[0].subject }} </h2>
-            <p> Starts at </p>
-            <div class="counter"> {{ classList[0].classes[0].time }} </div>
+            <p> Starts in </p>
+            <div class="counter"> 00 : 00 : 0{{ secondsCounter }} </div>
+            <div class="checkbox-holder" (click)="joinAutomatically = !joinAutomatically"
+            *ngIf="secondsCounter > 0">
+                <div class="checkbox" [ngClass]="{'active' : joinAutomatically }">
+                    <span> &#10003; </span>
+                </div>
+                <p> Join in automatically </p>
+            </div>
         </div>
 
         <span class="tutor">
@@ -22,7 +29,8 @@
                 <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
                 <span> {{ classList[0].classes[0].teacher.name }} </span>
             </div>
-            <button (click)="showVideo = true" *ngIf="demoType === 'Teacher'" class="go-live-button"> Go Live </button>
+            <button (click)="showVideo = true" *ngIf="demoType === 'Teacher' && hasLive" class="go-live-button"> Go Live </button>
+            <button (click)="showVideo = true" *ngIf="demoType === 'Student' && hasLive" class="go-live-button"> Join </button>
         </span>
     </section>
 
@@ -100,12 +108,12 @@
         </div>
     </section>
 
-    <div class="card-list-holder">
+    <div class="card-list-holder" *ngIf="!showClassDetails">
         <div class="card-list" *ngFor="let class of classList">
             <header>
                 <h5> {{ class.date }} </h5>
             </header>
-            <app-class-card-list [classes]="class.classes"></app-class-card-list>
+            <app-class-card-list [hasLive]="hasLive" [classes]="class.classes"></app-class-card-list>
         </div>
     </div>
 

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

@@ -59,7 +59,7 @@
     position: sticky;
     position: -webkit-sticky;
     top: 0;
-    z-index: 1;
+    z-index: 2;
     transition: width 0.5s, border-radius 0.5s;
     overflow: hidden;
     height: 35vh;
@@ -178,6 +178,43 @@
         }
     }
 
+    .checkbox-holder {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
+        margin: 5px auto;
+
+        .checkbox {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--light-grey);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: white;
+            border-radius: 3px;
+            transition: background-color 0.2s, border-color 0.2s;
+
+            &.active {
+                background-color: var(--teal-green);
+                color: white;
+                border-color: var(--teal-green);
+            }
+
+            span {
+                font-size: 12px;
+            }
+        }
+
+        p {
+            color: var(--teal-green);
+            margin-left: 10px;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+    }
+
     h2 {
         font-size: 20px;
         margin-bottom: 5px;
@@ -215,11 +252,13 @@
     border-radius: 7px;
     overflow: hidden;
     width: 90%;
-    margin: 20px auto;
+    margin: 1px auto 20px;
     transition: width 0.5s, border-radius 0.5s;
     position: sticky;
     position: -webkit-sticky;
     top: 35vh;
+    max-height: 50vh;
+    overflow: auto;
     z-index: 1;
 
     @media screen and (min-width: 1023px) {
@@ -252,6 +291,10 @@
         height: 45px;
         border-radius: 7px;
         padding: 0 5%;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        z-index: 1;
 
         @media screen and (min-width: 1023px) {
             display: none;
@@ -313,7 +356,6 @@
         width: 90%;
         margin: 0 auto;
         color: var(--light-grey);
-        height: 150px;
         overflow: auto;
 
         @media screen and (min-width: 1023px) {
@@ -330,7 +372,6 @@
         list-style: none;
         width: 90%;
         margin: 0 auto;
-        height: 150px;
         overflow: auto;
 
         a {

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

@@ -9,33 +9,41 @@ import { DemoService } from '../../services/demo.service';
 })
 export class HomeComponent implements OnInit {
     expandVideo: boolean = false;
-    showClassDetails: boolean;
+    showClassDetails: boolean = false;
     selectedSegment: string = 'transcript';
     showVideo: boolean = false;
     demoType: string;
-
+    hasLive: boolean = false;
     classList = [];
+    secondsCounter: number = 3;
+    timerInterval: any;
+    joinAutomatically: boolean = false;
 
 	constructor(
         private demoService: DemoService
     ) { }
 
 	ngOnInit(): void {
-        if (window.innerWidth > 1023) {
-            this.showClassDetails = true;
-        } else {
-            this.showClassDetails = false;
-        }
-
         this.demoType = localStorage.demoType;
         if (this.demoType === 'Student') {
             this.classList = this.demoService.studentClassList;
-            this.showVideo = true;
         }
 
         if (this.demoType === 'Teacher') {
             this.classList = this.demoService.teacherClassList;
         }
+
+        this.timerInterval = setInterval(() => {
+            if (this.secondsCounter > 0) {
+                this.secondsCounter -= 1;
+            } else {
+                clearInterval(this.timerInterval);
+                this.hasLive = true;
+                this.showClassDetails = true;
+
+                this.joinAutomatically ? this.showVideo = true : this.showVideo = false;
+            }
+        }, 1000);
 	}
 
 	public handleScroll(event: ScrollEvent) {

src/app/welcome/welcome.component.html

@@ -10,11 +10,11 @@
     </section>
 
     <div class="card-list-holder">
-        <div class="card-list" *ngFor="let class of classList">
-            <header>
+        <div class="card-list" *ngFor="let class of classList; let i = index">
+            <header id="list-header-{{ i }}" class="white-header">
                 <h5> {{ class.date }} </h5>
             </header>
-            <app-class-card-list [classes]="class.classes"></app-class-card-list>
+            <app-class-card-list [hasLive]="hasLive" [classes]="class.classes"></app-class-card-list>
         </div>
     </div>
 

src/app/welcome/welcome.component.scss

@@ -5,7 +5,11 @@
 .upfold {
     width: 100%;
     color: white;
-    position: relative;
+    position: sticky;
+    position: -webkit-sticky;
+    z-index: 1;
+    top: 0;
+    background-color: var(--black);
     padding: 30px 10% 0 10%;
 
     h1 {
@@ -40,10 +44,8 @@
     margin: 0 auto;
 
     .card-list {
-        &:first-child {
-            header {
-                color: white;
-            }
+        header.white-header {
+            color: var(--light-grey);
         }
     }
 
@@ -54,7 +56,7 @@
         h5 {
             font-size: 14px;
             margin-top: 30px;
-            font-weight: 500;
+            font-weight: bold;
         }
     }
 }

src/app/welcome/welcome.component.ts

@@ -9,12 +9,13 @@ import { DemoService } from '../services/demo.service';
 export class WelcomeComponent implements OnInit {
     classList = [];
     demoType: string;
+    hasLive: boolean = false;
 
 	constructor(
         private demoService: DemoService
     ) { }
 
-	ngOnInit(): void {        
+	ngOnInit(): void {
         this.demoType = localStorage.demoType;
         if (this.demoType === 'Student') {
             this.classList = this.demoService.studentClassList;
@@ -23,10 +24,14 @@ export class WelcomeComponent implements OnInit {
         if (this.demoType === 'Teacher') {
             this.classList = this.demoService.teacherClassList;
         }
-	}
-
-    ngOnDestroy() {
 
-    }
+        for (let i = 0; i < this.classList.length; i += 1) {
+            for (let j = 0; j < this.classList[i].classes.length; j += 1) {
+                if (this.classList[i].classes[j].isLive) {
+                    this.hasLive = true;
+                }
+            }
+        }
+	}
 
 }