diff --git a/package-lock.json b/package-lock.json index df000ad..88bf83c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7651,6 +7651,11 @@ "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==", "dev": true }, + "ngx-scroll-event": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/ngx-scroll-event/-/ngx-scroll-event-1.0.8.tgz", + "integrity": "sha512-P7fHHgYsPFhDOwIhAtQVFJb+VtGuCDA/mZYgk3s6kyBccQjBaPe2qQ/EdNLXg1noppUbq68TOqACuzfiLZyh8w==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index 0fa704e..507ac3c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@angular/router": "~9.1.1", "@angular/service-worker": "~9.1.1", "angular-svg-icon": "^9.2.0", + "ngx-scroll-event": "^1.0.8", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 56ec6d4..2fb0173 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularSvgIconModule } from 'angular-svg-icon'; import { HttpClientModule } from '@angular/common/http'; +import { ScrollEventModule } from 'ngx-scroll-event'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -38,6 +39,7 @@ import { ProfileComponent } from './profile/profile.component'; BrowserModule, AppRoutingModule, HttpClientModule, + ScrollEventModule, AngularSvgIconModule.forRoot(), ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) ], diff --git a/src/app/tabs/courses/courses.component.html b/src/app/tabs/courses/courses.component.html index 89a5b26..9ded3fc 100644 --- a/src/app/tabs/courses/courses.component.html +++ b/src/app/tabs/courses/courses.component.html @@ -4,8 +4,8 @@

ENG

-
English
-

Chapter: 21

+
Chapter: 21
+

50% complete

@@ -14,8 +14,8 @@

KAN

-
Kannada
-

Chapter: 21

+
Chapter: 21
+

50% complete

@@ -24,8 +24,8 @@

BIO

-
Biology
-

Chapter: 21

+
Chapter: 21
+

50% complete

@@ -34,8 +34,8 @@

PHY

-
Physics
-

Chapter: 21

+
Chapter: 21
+

50% complete

@@ -44,8 +44,8 @@

CHEM

-
Chemistry
-

Chapter: 21

+
Chapter: 21
+

50% complete

diff --git a/src/app/tabs/courses/courses.component.scss b/src/app/tabs/courses/courses.component.scss index 4edc453..c5a35ac 100644 --- a/src/app/tabs/courses/courses.component.scss +++ b/src/app/tabs/courses/courses.component.scss @@ -43,13 +43,14 @@ ul { } h5 { - color: var(--black); + color: var(--dark-grey); font-weight: 500; font-size: 14px; + margin-bottom: 3px; } p { - color: var(--dark-grey); + color: var(--light-grey); font-size: 12px; } @@ -60,7 +61,7 @@ ul { border-radius: 30px; overflow: hidden; width: 100%; - margin-top: 10px; + margin-top: 3px; .progress { background-color: var(--green); diff --git a/src/app/tabs/home/home.component.html b/src/app/tabs/home/home.component.html index f6d15e2..cdd2252 100644 --- a/src/app/tabs/home/home.component.html +++ b/src/app/tabs/home/home.component.html @@ -1,151 +1,154 @@ -
- - - - -
- -
-
-

English Class

-

Starts in

-
00:00:59
-
- - - - Dwayne the Rock - -
- - + + diff --git a/src/app/tabs/home/home.component.scss b/src/app/tabs/home/home.component.scss index 8943601..4d45376 100644 --- a/src/app/tabs/home/home.component.scss +++ b/src/app/tabs/home/home.component.scss @@ -1,3 +1,8 @@ +.page-container { + height: 100%; + overflow: auto; +} + .header-bar { display: flex; align-items: center; @@ -46,6 +51,11 @@ position: -webkit-sticky; top: 0; z-index: 1; + transition: width 0.5s; + + &.expand { + width: 100%; + } .tutor { position: absolute; diff --git a/src/app/tabs/home/home.component.ts b/src/app/tabs/home/home.component.ts index 73acf06..b8933e5 100644 --- a/src/app/tabs/home/home.component.ts +++ b/src/app/tabs/home/home.component.ts @@ -1,15 +1,35 @@ import { Component, OnInit } from '@angular/core'; +import { ScrollEvent } from 'ngx-scroll-event'; + @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { + expandVideo: boolean = false; + + constructor() { } + + ngOnInit(): void { + } + + public handleScroll(event: ScrollEvent) { + let container: any = event.originalEvent.srcElement; + + if (event.isReachingTop || container.scrollTop < 100) { + this.expandVideo = false; + } + + if (event.isReachingBottom || container.scrollTop >= 100) { + this.expandVideo = true; + } - constructor() { } + // if (event.isWindowEvent) { + // console.log(`This event is fired on Window not on an element.`); + // } - ngOnInit(): void { - } + } }