From 391b1e3600c5a1c86ade2f7cccc185acaf87ae18 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 19 Jun 2020 18:05:13 +0530 Subject: [PATCH] Chapter notes details UI --- src/app/app-routing.module.ts | 2 + .../chapter-notes.component.html | 36 +++++- .../chapter-notes.component.scss | 121 ++++++++++++++++++ .../chapter-notes/chapter-notes.component.ts | 32 ++++- .../courses/details/details.component.html | 8 +- .../video-notes/video-notes.component.html | 10 +- 6 files changed, 189 insertions(+), 20 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 25f26c8..14acbe1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -8,6 +8,7 @@ import { VideoNotesComponent } from './tabs/courses/video-chapter/video-notes/vi import { CalendarComponent } from './calendar/calendar.component'; import { AttendanceComponent } from './tabs/more/attendance/attendance.component'; import { ForumPageComponent } from './tabs/more/forum-page/forum-page.component'; +import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-notes.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'welcome' }, @@ -16,6 +17,7 @@ const routes: Routes = [ { component: TabsComponent, path: 'tabs/:subpage' }, { component: DetailsComponent, path: 'course-details' }, { component: DetailsComponent, path: 'course-details/:heading' }, + { component: ChapterNotesComponent, path: 'chapter-notes/:heading' }, { component: VideoChapterComponent, path: 'video-chapter/:heading' }, { component: VideoNotesComponent, path: 'video-notes/:heading' }, { component: CalendarComponent, path: 'calendar' }, diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.html b/src/app/tabs/courses/chapter-notes/chapter-notes.component.html index 6f43e2d..82ffa9f 100644 --- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.html +++ b/src/app/tabs/courses/chapter-notes/chapter-notes.component.html @@ -1 +1,35 @@ -

chapter-notes works!

+
+
+ +
+ + {{ heading }} +
+
+ +

{{ heading }}

+
+ + + Faculty, Mathematics +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem in ad commodi quo. Nisi non rerum perspiciatis? Molestiae beatae sit aliquid culpa, dolores quas! Dolore, eveniet, sit. Tempore, soluta omnis. +

+ +
+ +
+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore doloremque necessitatibus ut quae ipsum, voluptas fuga perferendis incidunt labore voluptatibus iusto ullam ab repudiandae commodi alias excepturi nulla! Vero? + Lorem ipsum dolor sit amet, Lorem ipsum consectetur adipisicing elit. Saepe et cupiditate at nam earum mollitia commodi cum quidem dolore aliquid nostrum architecto voluptatem eius recusandae, enim explicabo deserunt expedita similique. +

+ +
+ +
diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss b/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss index e69de29..9e18c3e 100644 --- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss +++ b/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss @@ -0,0 +1,121 @@ +.page { + background-color: var(--black); + height: 100vh; + padding-bottom: 60px; + 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: 16px; + height: 16px; + 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; + } + } +} + +h2 { + padding: 0 5%; + font-size: 22px; + margin: 20px auto 10px; + color: white; + font-weight: 400; +} + +.author { + display: flex; + width: 100%; + padding: 0 5%; + + img { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + } + + label { + font-size: 14px; + color: white; + margin-right: 10px; + } + + span { + position: relative; + font-size: 14px; + color: var(--light-grey); + position: relative; + display: flex; + align-items: center; + + &::before { + content: ''; + display: inline-block; + height: 100%; + width: 2px; + background-color: var(--light-grey); + margin-right: 10px; + } + } +} + +.description { + width: 90%; + margin: 40px auto 0; + color: white; + + p { + margin: 20px auto; + font-size: 14px; + line-height: 2; + } + + a { + color: var(--teal-green); + } + + figure { + display: block; + width: 100%; + border-radius: 5px; + overflow: hidden; + margin: 20px auto; + + img { + display: block; + width: 100%; + object-fit: cover; + } + } +} diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.ts b/src/app/tabs/courses/chapter-notes/chapter-notes.component.ts index 9d66354..2ea6075 100644 --- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.ts +++ b/src/app/tabs/courses/chapter-notes/chapter-notes.component.ts @@ -1,15 +1,35 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; +import { ActivatedRoute } from '@angular/router'; +import { Subscription } from 'rxjs'; @Component({ - selector: 'app-chapter-notes', - templateUrl: './chapter-notes.component.html', - styleUrls: ['./chapter-notes.component.scss'] + selector: 'app-chapter-notes', + templateUrl: './chapter-notes.component.html', + styleUrls: ['./chapter-notes.component.scss'] }) export class ChapterNotesComponent implements OnInit { + heading: string; + routeSubscription: Subscription; - constructor() { } + constructor( + private location: Location, + private route: ActivatedRoute + ) { } - ngOnInit(): void { - } + ngOnInit(): void { + this.routeSubscription = this.route.params.subscribe((params) => { + this.heading = params['heading']; + }); + } + + ngOnDestroy() { + this.routeSubscription.unsubscribe(); + } + + + back() { + this.location.back(); + } } diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html index 35d36bd..01424f8 100644 --- a/src/app/tabs/courses/details/details.component.html +++ b/src/app/tabs/courses/details/details.component.html @@ -61,7 +61,7 @@
  • -

    +

    Notes: Corrupti dolores illo perferendis, impedit fugiat officiis cum tenetur amet itaque suscipit, possimus. Quas ipsam corporis aliquid enim, quisquam nobis laudantium dolorum.

    -
    - - Notes 1 -
    - +