diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7bde8ae..d28a6c2 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index df63a25..6d92c95 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/tabs/courses/details/details.component.ts b/src/app/tabs/courses/details/details.component.ts index 9d1c086..f2c1b98 100644 --- a/src/app/tabs/courses/details/details.component.ts +++ b/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; diff --git a/src/app/tabs/more/attendance/attendance.component.html b/src/app/tabs/more/attendance/attendance.component.html index 09d7974..3dd6cf5 100644 --- a/src/app/tabs/more/attendance/attendance.component.html +++ b/src/app/tabs/more/attendance/attendance.component.html @@ -92,6 +92,7 @@

Chapter : Topic

+

Attended

@@ -100,6 +101,7 @@

Chapter : Topic

+

Absent

@@ -108,6 +110,7 @@

Chapter : Topic

+

10 Mins late

@@ -117,6 +120,7 @@

Chapter : Topic

+

Attended

@@ -125,6 +129,7 @@

Chapter : Topic

+

Absent

@@ -133,6 +138,7 @@

Chapter : Topic

+

15 Mins late

@@ -159,6 +165,7 @@

Chapter : Topic

+

warning

@@ -167,6 +174,7 @@

Chapter : Topic

+

warning

@@ -176,6 +184,7 @@

Chapter : Topic

+

warning

@@ -185,6 +194,7 @@

Chapter : Topic

+

warning

diff --git a/src/app/tabs/more/attendance/attendance.component.scss b/src/app/tabs/more/attendance/attendance.component.scss index 1a46695..2b39654 100644 --- a/src/app/tabs/more/attendance/attendance.component.scss +++ b/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 { diff --git a/src/app/tabs/more/forum-page/forum-page.component.html b/src/app/tabs/more/forum-page/forum-page.component.html new file mode 100644 index 0000000..6997324 --- /dev/null +++ b/src/app/tabs/more/forum-page/forum-page.component.html @@ -0,0 +1,13 @@ +
+
+ +
+ + Forum +
+
+ + +
diff --git a/src/app/tabs/more/forum-page/forum-page.component.scss b/src/app/tabs/more/forum-page/forum-page.component.scss new file mode 100644 index 0000000..2f3d55d --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/tabs/more/forum-page/forum-page.component.spec.ts b/src/app/tabs/more/forum-page/forum-page.component.spec.ts new file mode 100644 index 0000000..5a16708 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ForumPageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ForumPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/more/forum-page/forum-page.component.ts b/src/app/tabs/more/forum-page/forum-page.component.ts new file mode 100644 index 0000000..0f6db48 --- /dev/null +++ b/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(); + } + +} diff --git a/src/app/tabs/more/more.component.html b/src/app/tabs/more/more.component.html index 0fffd9f..7a70376 100644 --- a/src/app/tabs/more/more.component.html +++ b/src/app/tabs/more/more.component.html @@ -6,47 +6,22 @@ -
-
-
- -
-
Dwayne The Rock
-

3000 XP

-
-
- - - - -
- +
+
+
+
+ +
+
Dwayne The Rock
+

3000 XP

+
+
- -
+ +
@@ -130,4 +105,30 @@
+
+
    +
  • + +

    Attendance

    +
    • + +
  • + +

    My Class

    +
    • + +
  • + +

    Duel

    +
    • + +
  • + +

    Forum

    +
    • +
+ + +
+ diff --git a/src/app/tabs/more/more.component.scss b/src/app/tabs/more/more.component.scss index c82e2f4..77be615 100644 --- a/src/app/tabs/more/more.component.scss +++ b/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%;