Attendance page added coloured status text, more page show nav boxes even if show profile true

src/app/app-routing.module.ts

@@ -7,6 +7,7 @@ import { VideoChapterComponent } from './tabs/courses/video-chapter/video-chapte
 import { NotesDetailsComponent } from './tabs/courses/notes-details/notes-details.component';
 import { CalendarComponent } from './calendar/calendar.component';
 import { AttendanceComponent } from './tabs/more/attendance/attendance.component';
+import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -19,6 +20,7 @@ const routes: Routes = [
     { component: NotesDetailsComponent, path: 'notes-details/:heading' },
     { component: CalendarComponent, path: 'calendar' },
     { component: AttendanceComponent, path: 'attendance'},
+    { component: ForumPageComponent, path: 'forum'},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { environment } from '../environments/environment';
 import { CalendarComponent } from './calendar/calendar.component';
 import { AttendanceComponent } from './tabs/more/attendance/attendance.component';
 import { ForumComponent } from './reusable-components/forum/forum.component';
+import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component';
 
 @NgModule({
 	declarations: [
@@ -37,6 +38,7 @@ import { ForumComponent } from './reusable-components/forum/forum.component';
 		CalendarComponent,
 		AttendanceComponent,
 		ForumComponent,
+		ForumPageComponent,
 	],
 	imports: [
 		BrowserModule,

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

@@ -9,7 +9,7 @@ import { Location } from '@angular/common';
 	styleUrls: ['./details.component.scss']
 })
 export class DetailsComponent implements OnInit {
-    selectedSegment: string = 'forum';
+    selectedSegment: string = 'home';
     heading: string;
     routeSubscription: Subscription;
     selectedChapter: number = 1;

src/app/tabs/more/attendance/attendance.component.html

@@ -92,6 +92,7 @@
                     <div class="content">
                         <label> English </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> Attended </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                 </li>
@@ -100,6 +101,7 @@
                     <div class="content">
                         <label> Kannada </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> Absent </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </li>
@@ -108,6 +110,7 @@
                     <div class="content">
                         <label> Physics </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> 10 Mins late </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 </li>
@@ -117,6 +120,7 @@
                     <div class="content">
                         <label> English </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> Attended </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
                 </li>
@@ -125,6 +129,7 @@
                     <div class="content">
                         <label> Kannada </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> Absent </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
                 </li>
@@ -133,6 +138,7 @@
                     <div class="content">
                         <label> Physics </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> 15 Mins late </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 </li>
@@ -159,6 +165,7 @@
                     <div class="content">
                         <label> Kannada </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> warning </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 </li>
@@ -167,6 +174,7 @@
                     <div class="content">
                         <label> English </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> warning </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 </li>
@@ -176,6 +184,7 @@
                     <div class="content">
                         <label> Chemistry </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> warning </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 </li>
@@ -185,6 +194,7 @@
                     <div class="content">
                         <label> Physics </label>
                         <p> Chapter : Topic </p>
+                        <p class="status-text"> warning </p>
                     </div>
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/warning.svg"></svg-icon>
                 </li>

src/app/tabs/more/attendance/attendance.component.scss

@@ -250,18 +250,29 @@
             .icon {
                 fill: var(--green);
             }
+            .status-text {
+                color: var(--green);
+            }
         }
 
         &.failed {
             .icon {
                 fill: var(--danger);
             }
+
+            .status-text {
+                color: var(--danger);
+            }
         }
 
         &.warning {
             .icon {
                 fill: rgba(orange, 0.5);
             }
+
+            .status-text {
+                color: rgba(orange, 0.8);
+            }
         }
 
         label {

src/app/tabs/more/forum-page/forum-page.component.html

@@ -0,0 +1,13 @@
+<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/comment.svg"></svg-icon>
+            <span> Forum </span>
+        </h5>
+    </header>
+
+    <app-forum></app-forum>
+</div>

src/app/tabs/more/forum-page/forum-page.component.scss

@@ -0,0 +1,45 @@
+.page {
+    background-color: var(--black);
+    height: 100vh;
+    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: 15px;
+            height: 15px;
+            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;
+        }
+    }
+}

src/app/tabs/more/forum-page/forum-page.component.spec.ts

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

src/app/tabs/more/forum-page/forum-page.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+	selector: 'app-forum-page',
+	templateUrl: './forum-page.component.html',
+	styleUrls: ['./forum-page.component.scss']
+})
+export class ForumPageComponent implements OnInit {
+
+	constructor(
+        private location: Location
+    ) { }
+
+	ngOnInit(): void {
+	}
+
+    back() {
+        this.location.back();
+    }
+
+}

src/app/tabs/more/more.component.html

@@ -6,47 +6,22 @@
         </button>
     </header>
 
-    <section class="upfold">
-        <div>
-            <figure>
-                <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
-            </figure>
-            <h5> Dwayne The Rock </h5>
-            <p> 3000 XP </p>
-        </div>
-    </section>
-
-    <button class="profile-details-button" (click)="profileDetails = !profileDetails"
-    [ngClass]="{'active' : profileDetails}"> Profile Details
-        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
-    </button>
-
-
-    <section *ngIf="!profileDetails">
-        <ul class="more-page-list">
-            <li [routerLink]="['/attendance']">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/attendance-1.svg"></svg-icon>
-                <h4> Attendance </h4>
-            </li>
-
-            <li>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/class.svg"></svg-icon>
-                <h4> My Class </h4>
-            </li>
-
-            <li>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/duel.svg"></svg-icon>
-                <h4> Duel </h4>
-            </li>
-
-            <li [routerLink]="['/forum']">
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/forum.svg"></svg-icon>
-                <h4> Forum </h4>
-            </li>
-        </ul>
+    <div class="upfold-holder">
+        <section class="upfold">
+            <div>
+                <figure>
+                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                </figure>
+                <h5> Dwayne The Rock </h5>
+                <p> 3000 XP </p>
+            </div>
+        </section>
 
-        <button class="logout-button"> Logout </button>
-    </section>
+        <button class="profile-details-button" (click)="profileDetails = !profileDetails"
+        [ngClass]="{'active' : profileDetails}"> Profile Details
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+        </button>
+    </div>
 
     <section *ngIf="profileDetails">
         <section class="segment-buttons">
@@ -130,4 +105,30 @@
         </div>
     </section>
 
+    <section>
+        <ul class="more-page-list">
+            <li [routerLink]="['/attendance']">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/attendance-1.svg"></svg-icon>
+                <h4> Attendance </h4>
+            </li>
+
+            <li>
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/class.svg"></svg-icon>
+                <h4> My Class </h4>
+            </li>
+
+            <li>
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/duel.svg"></svg-icon>
+                <h4> Duel </h4>
+            </li>
+
+            <li [routerLink]="['/forum']">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/forum.svg"></svg-icon>
+                <h4> Forum </h4>
+            </li>
+        </ul>
+
+        <button class="logout-button"> Logout </button>
+    </section>
+
 </div>

src/app/tabs/more/more.component.scss

@@ -32,6 +32,13 @@
     }
 }
 
+.upfold-holder {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+}
+
 .upfold {
     width: 100%;
     text-align: center;
@@ -170,6 +177,10 @@
     font-size: 16px;
 }
 
+.segment-holder {
+    margin-bottom: 40px;
+}
+
 .badge-list {
     list-style: none;
     width: 90%;