From 1d01a4fc2c212c0d8d08f5514fbccd73f4b0113d Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 9 Jun 2020 14:03:52 +0530 Subject: [PATCH] Course details UI partial commit --- src/app/app-routing.module.ts | 5 +- src/app/app.module.ts | 2 + src/app/tabs/courses/courses.component.html | 10 +- .../courses/details/details.component.html | 56 +++++++ .../courses/details/details.component.scss | 154 ++++++++++++++++++ .../courses/details/details.component.spec.ts | 25 +++ .../tabs/courses/details/details.component.ts | 35 ++++ src/assets/custom-icons/checkmark.svg | 43 +++++ src/assets/custom-icons/close.svg | 46 ++++++ src/assets/custom-icons/down-arrow.svg | 36 ++++ src/styles.scss | 2 +- 11 files changed, 407 insertions(+), 7 deletions(-) create mode 100644 src/app/tabs/courses/details/details.component.html create mode 100644 src/app/tabs/courses/details/details.component.scss create mode 100644 src/app/tabs/courses/details/details.component.spec.ts create mode 100644 src/app/tabs/courses/details/details.component.ts create mode 100644 src/assets/custom-icons/checkmark.svg create mode 100644 src/assets/custom-icons/close.svg create mode 100644 src/assets/custom-icons/down-arrow.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6e15217..a9f39ad 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,12 +2,15 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { WelcomeComponent } from './welcome/welcome.component'; import { TabsComponent } from './tabs/tabs.component'; +import { DetailsComponent } from './tabs/courses/details/details.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'welcome' }, { component: WelcomeComponent, path: 'welcome' }, { component: TabsComponent, path: 'tabs' }, - { component: TabsComponent, path: 'tabs/:subpage' } + { component: TabsComponent, path: 'tabs/:subpage' }, + { component: DetailsComponent, path: 'course-details' }, + { component: DetailsComponent, path: 'course-details/:heading' } ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f44a91c..ea95f44 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { HomeComponent } from './tabs/home/home.component'; import { CoursesComponent } from './tabs/courses/courses.component'; import { ReportsComponent } from './tabs/reports/reports.component'; import { MoreComponent } from './tabs/more/more.component'; +import { DetailsComponent } from './tabs/courses/details/details.component'; @NgModule({ declarations: [ @@ -21,6 +22,7 @@ import { MoreComponent } from './tabs/more/more.component'; CoursesComponent, ReportsComponent, MoreComponent, + DetailsComponent, ], imports: [ BrowserModule, diff --git a/src/app/tabs/courses/courses.component.html b/src/app/tabs/courses/courses.component.html index 2049b35..89a5b26 100644 --- a/src/app/tabs/courses/courses.component.html +++ b/src/app/tabs/courses/courses.component.html @@ -3,14 +3,14 @@

  • ENG

    -
    +
    English

    Chapter: 21

    • -
  • +

  • KAN

    @@ -20,7 +20,7 @@
    • -
  • +

  • BIO

    @@ -30,7 +30,7 @@
    • -
  • +

  • PHY

    @@ -40,7 +40,7 @@
    • -
  • +

  • CHEM

    diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html new file mode 100644 index 0000000..b70963a --- /dev/null +++ b/src/app/tabs/courses/details/details.component.html @@ -0,0 +1,56 @@ +
    + + +

    {{ heading }}

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis. +

    + +
    + +
    + +
    + + + + +
    + +
    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam. +

    + +
    +
    + +
      +
    • +
      + +
      + +

      5 Topics

      +
      + +
      +
      • +
    • +
      + +
      + +

      5 Topics

      +
      + +
      +
      • +
    diff --git a/src/app/tabs/courses/details/details.component.scss b/src/app/tabs/courses/details/details.component.scss new file mode 100644 index 0000000..3b49081 --- /dev/null +++ b/src/app/tabs/courses/details/details.component.scss @@ -0,0 +1,154 @@ +.upfold { + background-color: var(--black); + padding: 20px 10%; + + .close-button { + background-color: transparent; + border: 0px; + + .icon { + width: 15px; + height: 15px; + fill: white; + } + } + + h3 { + color: var(--teal); + font-size: 20px; + margin-top: 20px; + font-weight: 500; + } + + p { + margin-top: 10px; + color: white; + font-size: 13px; + } + + label { + color: var(--light-grey); + font-size: 14px; + margin-top: 20px; + display: block; + font-weight: 500; + } +} + +.progress-holder { + height: 7px; + background-color: #cecece; + position: relative; + + .progress { + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 30%; + background-color: var(--green); + } +} + +.segment-header { + position: sticky; + position: -webkit-sticky; + left: 0; + top: 0; + background-color: var(--ash-black); + display: flex; + align-items: stretch; + height: 50px; + + button { + font-size: 14px; + width: calc(100% / 4); + border: 0px; + background-color: transparent; + color: var(--light-grey); + + &.active { + color: white; + } + } +} + +.test-prompt { + background-color: var(--black); + padding: 20px; + + .prompt { + border-radius: 15px; + background-color: var(--ash-black); + padding: 20px; + } + + p { + color: white; + font-size: 13px; + } + + button { + margin-top: 10px; + display: block; + width: 100%; + height: 40px; + color: white; + font-size: 14px; + background-color: var(--teal-green); + border-radius: 5px; + border: 0px; + } +} + +.chapter-list { + list-style: none; + + li { + padding: 0 5%; + background-color: var(--ash-black); + + &.completed { + .checkmark { + fill: var(--green); + } + } + } + + .container { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 15px 0; + } + + .icon { + width: 20px; + height: 20px; + fill: var(--light-grey); + + &.checkmark { + width: 25px; + height: 25px; + background-color: white; + border-radius: 50%; + } + } + + .details { + width: calc(100% - 100px); + } + + + label { + font-size: 16px; + font-weight: 500; + color: white; + } + + p { + color: white; + font-size: 14px; + } +} diff --git a/src/app/tabs/courses/details/details.component.spec.ts b/src/app/tabs/courses/details/details.component.spec.ts new file mode 100644 index 0000000..1d5cbeb --- /dev/null +++ b/src/app/tabs/courses/details/details.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsComponent } from './details.component'; + +describe('DetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DetailsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/tabs/courses/details/details.component.ts b/src/app/tabs/courses/details/details.component.ts new file mode 100644 index 0000000..3d1114f --- /dev/null +++ b/src/app/tabs/courses/details/details.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { Subscription } from 'rxjs'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-details', + templateUrl: './details.component.html', + styleUrls: ['./details.component.scss'] +}) +export class DetailsComponent implements OnInit { + selectedSegment: string = 'home'; + heading: string; + routeSubscription: Subscription; + + constructor( + private route: ActivatedRoute, + private location: Location + ) { } + + 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/assets/custom-icons/checkmark.svg b/src/assets/custom-icons/checkmark.svg new file mode 100644 index 0000000..910247e --- /dev/null +++ b/src/assets/custom-icons/checkmark.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/close.svg b/src/assets/custom-icons/close.svg new file mode 100644 index 0000000..f890ae3 --- /dev/null +++ b/src/assets/custom-icons/close.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/down-arrow.svg b/src/assets/custom-icons/down-arrow.svg new file mode 100644 index 0000000..60dc1ad --- /dev/null +++ b/src/assets/custom-icons/down-arrow.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/styles.scss b/src/styles.scss index a09755a..5670853 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,7 +5,7 @@ margin: 0; padding: 0; box-sizing: border-box; - line-height: 1.5; + line-height: 1.7; letter-spacing: 0.5px; font-weight: 400; outline: none;