Course details UI partial commit

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({

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,

src/app/tabs/courses/courses.component.html

@@ -3,14 +3,14 @@
     <li>
         <h2> ENG </h2>
 
-        <div class="details">
+        <div class="details" [routerLink]="['/course-details/English']">
             <h5> English </h5>
             <p> Chapter: 21 </p>
             <div class="progress-holder"> <span class="progress"></span> </div>
         </div>
     </li>
 
-    <li>
+    <li [routerLink]="['/course-details/Kannada']">
         <h2> KAN </h2>
 
         <div class="details">
@@ -20,7 +20,7 @@
         </div>
     </li>
 
-    <li>
+    <li [routerLink]="['/course-details/Biology']">
         <h2> BIO </h2>
 
         <div class="details">
@@ -30,7 +30,7 @@
         </div>
     </li>
 
-    <li>
+    <li [routerLink]="['/course-details/Physics']">
         <h2> PHY </h2>
 
         <div class="details">
@@ -40,7 +40,7 @@
         </div>
     </li>
 
-    <li>
+    <li [routerLink]="['/course-details/Chemistry']">
         <h2> CHEM </h2>
 
         <div class="details">

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

@@ -0,0 +1,56 @@
+<section class="upfold">
+    <button class="close-button" (click)="back()">
+        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+    </button>
+
+    <h3> {{ heading }} </h3>
+    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+        Earum rerum itaque, autem voluptatibus, quia, consectetur quasi blanditiis.
+    </p>
+    <label> 21 Chapters to finish </label>
+</section>
+
+<div class="progress-holder"> <span class="progress"></span> </div>
+
+<header class="segment-header">
+    <button (click)="selectedSegment='home'"
+    [ngClass]="{'active': selectedSegment === 'home' }"> Home </button>
+    <button (click)="selectedSegment='resources'"
+    [ngClass]="{'active': selectedSegment === 'resources' }"> Resources </button>
+    <button (click)="selectedSegment='grades'"
+    [ngClass]="{'active': selectedSegment === 'grades' }"> Grades </button>
+    <button (click)="selectedSegment='forums'"
+    [ngClass]="{'active': selectedSegment === 'forums' }"> Forums </button>
+</header>
+
+<section class="test-prompt">
+    <section class="prompt">
+        <p>
+            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.
+        </p>
+        <button> Take the test now! </button>
+    </section>
+</section>
+
+<ul class="chapter-list">
+    <li class="completed">
+        <div class="container">
+            <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+            <div class="details">
+                <label> Chapter 1 </label>
+                <p> 5 Topics </p>
+            </div>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+        </div>
+    </li>
+    <li>
+        <div class="container">
+            <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
+            <div class="details">
+                <label> Chapter 2 </label>
+                <p> 5 Topics </p>
+            </div>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/down-arrow.svg"></svg-icon>
+        </div>
+    </li>
+</ul>

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;
+    }
+}

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<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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();
+    }
+
+}

src/assets/custom-icons/checkmark.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z M402.207,182.625
+			L217.75,367.083c-4.167,4.167-9.625,6.25-15.083,6.25c-5.458,0-10.917-2.083-15.083-6.25L88.46,267.958
+			c-4.167-4.165-4.167-10.919,0-15.085l15.081-15.082c4.167-4.165,10.919-4.165,15.086,0l84.04,84.042L372.04,152.458
+			c4.167-4.165,10.919-4.165,15.086,0l15.081,15.082C406.374,171.706,406.374,178.46,402.207,182.625z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom-icons/close.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M300.188,246L484.14,62.04c5.06-5.064,7.852-11.82,7.86-19.024c0-7.208-2.792-13.972-7.86-19.028L468.02,7.872
+			c-5.068-5.076-11.824-7.856-19.036-7.856c-7.2,0-13.956,2.78-19.024,7.856L246.008,191.82L62.048,7.872
+			c-5.06-5.076-11.82-7.856-19.028-7.856c-7.2,0-13.96,2.78-19.02,7.856L7.872,23.988c-10.496,10.496-10.496,27.568,0,38.052
+			L191.828,246L7.872,429.952c-5.064,5.072-7.852,11.828-7.852,19.032c0,7.204,2.788,13.96,7.852,19.028l16.124,16.116
+			c5.06,5.072,11.824,7.856,19.02,7.856c7.208,0,13.968-2.784,19.028-7.856l183.96-183.952l183.952,183.952
+			c5.068,5.072,11.824,7.856,19.024,7.856h0.008c7.204,0,13.96-2.784,19.028-7.856l16.12-16.116
+			c5.06-5.064,7.852-11.824,7.852-19.028c0-7.204-2.792-13.96-7.852-19.028L300.188,246z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom-icons/down-arrow.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 407.437 407.437" style="enable-background:new 0 0 407.437 407.437;" xml:space="preserve">
+<polygon points="386.258,91.567 203.718,273.512 21.179,91.567 0,112.815 203.718,315.87 407.437,112.815 "/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

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;