Class list card component integration with welcome page

src/app/app.module.ts

@@ -32,6 +32,7 @@ import { PostDetailsComponent } from './reusable-components/forum/post-details/p
 import { ChatPageComponent } from './chat-page/chat-page.component';
 import { ChatWindowComponent } from './chat-page/chat-window/chat-window.component';
 import { SettingsComponent } from './settings/settings.component';
+import { ClassCardListComponent } from './reusable-components/class-card-list/class-card-list.component';
 
 @NgModule({
 	declarations: [
@@ -56,6 +57,7 @@ import { SettingsComponent } from './settings/settings.component';
 		ChatPageComponent,
 		ChatWindowComponent,
 		SettingsComponent,
+		ClassCardListComponent,
 	],
 	imports: [
 		BrowserModule,

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

@@ -0,0 +1,15 @@
+<ul class="subject-list">
+    <li *ngFor="let class of classes">
+        <div class="schedule">
+            <label> {{ class.time }} </label>
+            <p> {{ class.duration }} </p>
+        </div>
+        <div class="subject">
+            <label> {{ class.subject }} </label>
+            <p>
+                <img [src]="class.teacher.profile_image">
+                <span> {{ class.teacher.name }} </span>
+            </p>
+        </div>
+    </li>
+</ul>

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

@@ -0,0 +1,113 @@
+.subject-list {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+    list-style: none;
+
+    @media screen and (min-width: 1023px) {
+        width: 33%;
+        margin: 0;
+        max-height: 50vh;
+        position: fixed;
+        right: 2%;
+        top: calc(50vh - 30px);
+        background-color: white;
+        border-radius: 30px;
+        padding: 15px;
+        box-shadow: 0px 0px 10px rgba(black, 0.3);
+        z-index: 1;
+        overflow: auto;
+    }
+
+    li {
+        background-color: white;
+        border-radius: 15px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        padding: 15px 10px;
+        margin-top: 15px;
+        box-shadow: 0px 0px 5px -2px var(--black);
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 7px;
+            height: 100%;
+            background-color: transparent;
+        }
+
+        &.attended::before {
+            background-color: var(--teal-green);
+        }
+
+        &.absent::before {
+            background-color: var(--danger);
+        }
+
+        &.late::before {
+            background-color: rgba(orange, 0.5);
+        }
+    }
+
+    .schedule {
+        width: 80px;
+        padding-right: 15px;
+        text-align: center;
+    }
+
+    .subject {
+        flex-grow: 1;
+        border-left: 1px solid #cecece;
+        padding-left: 15px;
+        overflow: hidden;
+
+        p {
+            margin-top: 5px;
+        }
+    }
+
+    .view-button {
+        height: 33px;
+        border-radius: 5px;
+        border: 0px;
+        background-color: var(--teal-green);
+        color: white;
+        font-size: 14px;
+        width: 80px;
+        margin-left: 10px;
+    }
+
+    label {
+        font-size: 14px;
+        color: var(--black);
+        font-weight: 500;
+    }
+
+    p {
+        font-size: 13px;
+        color: var(--dark-grey);
+        margin-top: 2px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+
+        img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            overflow: hidden;
+            object-fit: cover;
+            object-position: top;
+            vertical-align: middle;
+        }
+
+        span {
+            vertical-align: middle;
+            margin-left: 3px;
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClassCardListComponent } from './class-card-list.component';
+
+describe('ClassCardListComponent', () => {
+  let component: ClassCardListComponent;
+  let fixture: ComponentFixture<ClassCardListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ClassCardListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClassCardListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Component, OnInit, Input, Output } from '@angular/core';
+
+@Component({
+	selector: 'app-class-card-list',
+	templateUrl: './class-card-list.component.html',
+	styleUrls: ['./class-card-list.component.scss']
+})
+export class ClassCardListComponent implements OnInit {
+    @Input() classes: any;
+
+	constructor() { }
+
+	ngOnInit(): void {
+	}
+
+}

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

@@ -371,131 +371,3 @@
         }
     }
 }
-
-.subject-list {
-    position: relative;
-    width: 88%;
-    margin: 0 auto;
-    list-style: none;
-
-    @media screen and (min-width: 1023px) {
-        width: 33%;
-        margin: 0;
-        max-height: 50vh;
-        position: fixed;
-        right: 2%;
-        top: calc(50vh - 30px);
-        background-color: white;
-        border-radius: 30px;
-        padding: 15px;
-        box-shadow: 0px 0px 10px rgba(black, 0.3);
-        z-index: 1;
-        overflow: auto;
-    }
-
-    header {
-        color: var(--black);
-
-        h5 {
-            font-size: 14px;
-            margin-top: 30px;
-            font-weight: 500;
-        }
-
-        &:first-child h5 {
-            margin-top: 20px;
-        }
-    }
-
-    li {
-        background-color: white;
-        border-radius: 15px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        padding: 15px 10px;
-        margin-top: 15px;
-        box-shadow: 0px 0px 5px -2px var(--black);
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 7px;
-            height: 100%;
-            background-color: transparent;
-        }
-
-        &.attended::before {
-            background-color: var(--teal-green);
-        }
-
-        &.absent::before {
-            background-color: var(--danger);
-        }
-
-        &.late::before {
-            background-color: rgba(orange, 0.5);
-        }
-    }
-
-    .schedule {
-        width: 80px;
-        padding: 0 5px;
-        text-align: center;
-    }
-
-    .subject {
-        flex-grow: 1;
-        border-left: 1px solid #cecece;
-        padding-left: 15px;
-        overflow: hidden;
-
-        p {
-            margin-top: 10px;
-        }
-    }
-
-    .view-button {
-        height: 33px;
-        border-radius: 5px;
-        border: 0px;
-        background-color: var(--teal-green);
-        color: white;
-        font-size: 14px;
-        width: 80px;
-        margin-left: 10px;
-    }
-
-    label {
-        font-size: 16px;
-        color: var(--black);
-        font-weight: 500;
-    }
-
-    p {
-        font-size: 13px;
-        color: var(--dark-grey);
-        margin-top: 2px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        img {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            overflow: hidden;
-            object-fit: cover;
-            object-position: top;
-            vertical-align: middle;
-        }
-
-        span {
-            vertical-align: middle;
-            margin-left: 3px;
-        }
-    }
-}

src/app/tabs/tabs.component.html

@@ -1,8 +1,8 @@
-<div class="page">
+<section class="page-container half-bg" color="black">
     <app-home *ngIf="selectedTab === 'home'"></app-home>
     <app-courses *ngIf="selectedTab === 'courses'"></app-courses>
     <app-more *ngIf="selectedTab === 'more'"></app-more>
-</div>
+</section>
 
 <section class="tabs">
     <button [routerLink]="['/tabs/home']" [ngClass]="{'active' : selectedTab === 'home'}">

src/app/welcome/welcome.component.html

@@ -9,67 +9,15 @@
         </p>
     </section>
 
-    <ul class="subject-list">
-        <header> <h5> Classes: </h5> </header>
+    <div class="card-list-holder">
+        <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>
+        </div>
+    </div>
 
-        <li>
-            <div class="schedule">
-                <label> 3:30 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Mathematics </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-        </li>
-
-        <li>
-            <div class="schedule">
-                <label> 4:20 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> English </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-        </li>
-
-        <header> <h5> Quiz: </h5> </header>
-
-        <li>
-            <div class="schedule">
-                <label> 5:30 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> Mathematics </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-        </li>
-
-        <li>
-            <div class="schedule">
-                <label> 6:20 PM </label>
-                <p> 40 Minutes </p>
-            </div>
-            <div class="subject">
-                <label> English </label>
-                <p>
-                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-                    <span> Dwayne the Rock </span>
-                </p>
-            </div>
-        </li>
-    </ul>
 
     <button [routerLink]="['/tabs/home']" class="start-button"> All right let's Start! </button>
 </section>

src/app/welcome/welcome.component.scss

@@ -15,97 +15,6 @@
     }
 }
 
-.subject-list {
-    position: relative;
-    width: 80%;
-    margin: 0 auto;
-    list-style: none;
-
-    header {
-        color: var(--black);
-
-        h5 {
-            font-size: 16px;
-            margin-top: 30px;
-            font-weight: 500;
-        }
-
-        &:first-child {
-            color: white;
-        }
-    }
-
-    li {
-        background-color: white;
-        border-radius: 15px;
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        padding: 15px 10px;
-        margin-top: 15px;
-        box-shadow: 0px 0px 5px -2px var(--black);
-        justify-content: space-between;
-        position: relative;
-
-        &::before {
-            content: '';
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 7px;
-            height: 100%;
-            background-color: var(--teal-green);
-        }
-    }
-
-    .schedule {
-        width: 100px;
-        padding: 0 5px;
-        text-align: center;
-    }
-
-    .subject {
-        width: calc(100% - 100px);
-        border-left: 1px solid #cecece;
-        padding-left: 15px;
-        overflow: hidden;
-
-        p {
-            margin-top: 10px;
-        }
-    }
-
-    label {
-        font-size: 16px;
-        color: var(--black);
-        font-weight: 500;
-    }
-
-    p {
-        font-size: 13px;
-        color: var(--dark-grey);
-        margin-top: 2px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-
-        img {
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            overflow: hidden;
-            object-fit: cover;
-            object-position: top;
-            vertical-align: middle;
-        }
-
-        span {
-            vertical-align: middle;
-            margin-left: 3px;
-        }
-    }
-}
-
 .start-button {
     position: fixed;
     width: 70%;
@@ -120,3 +29,28 @@
     border: 0px;
     z-index: 1;
 }
+
+
+.card-list-holder {
+    width: 85%;
+    margin: 0 auto;
+
+    .card-list {
+        &:first-child {
+            header {
+                color: white;
+            }
+        }
+    }
+
+    header {
+        color: var(--dark-grey);
+        position: relative;
+
+        h5 {
+            font-size: 14px;
+            margin-top: 30px;
+            font-weight: 500;
+        }
+    }
+}

src/app/welcome/welcome.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-welcome',
@@ -6,6 +7,93 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./welcome.component.scss']
 })
 export class WelcomeComponent implements OnInit {
+    classList = [{
+        date: moment(new Date()).format('MMM, DD 2020'),
+        classes: [{
+            time: '10:00 AM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '11:00 AM',
+            duration: '45 Mins',
+            subject: 'Physics',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }, {
+            time: '12:00 PM',
+            duration: '45 Mins',
+            subject: 'Chemistry',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '2:00 PM',
+            duration: '45 Mins',
+            subject: 'EVS',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '3:00 PM',
+            duration: '45 Mins',
+            subject: 'Biology',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }]
+    }, {
+        date: moment(new Date()).subtract(1, 'day').format('MMM, DD 2020'),
+        classes: [{
+            time: '10:00 AM',
+            duration: '45 Mins',
+            subject: 'Mathematics',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '11:00 AM',
+            duration: '45 Mins',
+            subject: 'Physics',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }, {
+            time: '12:00 PM',
+            duration: '45 Mins',
+            subject: 'Chemistry',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '2:00 PM',
+            duration: '45 Mins',
+            subject: 'EVS',
+            teacher: {
+                name: 'Mr Kashinath Kashyap',
+                profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
+            }
+        }, {
+            time: '3:00 PM',
+            duration: '45 Mins',
+            subject: 'Biology',
+            teacher: {
+                name: 'Dr Meghana',
+                profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
+            }
+        }]
+    }]
 
 	constructor() { }