kj
/
lms-app
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

Make the video extend to the edges upon scrolling

master
kj1352 vor 5 Jahren
Ursprung
0cfcec91b9
Commit
4165a12b46
8 geänderte Dateien mit 201 neuen und 159 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +5
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +2
    -0
      src/app/app.module.ts
  4. +10
    -10
      src/app/tabs/courses/courses.component.html
  5. +4
    -3
      src/app/tabs/courses/courses.component.scss
  6. +143
    -140
      src/app/tabs/home/home.component.html
  7. +10
    -0
      src/app/tabs/home/home.component.scss
  8. +26
    -6
      src/app/tabs/home/home.component.ts

+ 5
- 0
package-lock.json Datei anzeigen

@@ -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",


+ 1
- 0
package.json Datei anzeigen

@@ -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"


+ 2
- 0
src/app/app.module.ts Datei anzeigen

@@ -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 })
],


+ 10
- 10
src/app/tabs/courses/courses.component.html Datei anzeigen

@@ -4,8 +4,8 @@
<h2> ENG </h2>

<div class="details" [routerLink]="['/course-details/English']">
<h5> English </h5>
<p> Chapter: 21 </p>
<h5> Chapter: 21 </h5>
<p> 50% complete </p>
<div class="progress-holder"> <span class="progress"></span> </div>
</div>
</li>
@@ -14,8 +14,8 @@
<h2> KAN </h2>

<div class="details">
<h5> Kannada </h5>
<p> Chapter: 21 </p>
<h5> Chapter: 21 </h5>
<p> 50% complete </p>
<div class="progress-holder"> <span class="progress"></span> </div>
</div>
</li>
@@ -24,8 +24,8 @@
<h2> BIO </h2>

<div class="details">
<h5> Biology </h5>
<p> Chapter: 21 </p>
<h5> Chapter: 21 </h5>
<p> 50% complete </p>
<div class="progress-holder"> <span class="progress"></span> </div>
</div>
</li>
@@ -34,8 +34,8 @@
<h2> PHY </h2>

<div class="details">
<h5> Physics </h5>
<p> Chapter: 21 </p>
<h5> Chapter: 21 </h5>
<p> 50% complete </p>
<div class="progress-holder"> <span class="progress"></span> </div>
</div>
</li>
@@ -44,8 +44,8 @@
<h2> CHEM </h2>

<div class="details">
<h5> Chemistry </h5>
<p> Chapter: 21 </p>
<h5> Chapter: 21 </h5>
<p> 50% complete </p>
<div class="progress-holder"> <span class="progress"></span> </div>
</div>
</li>


+ 4
- 3
src/app/tabs/courses/courses.component.scss Datei anzeigen

@@ -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);


+ 143
- 140
src/app/tabs/home/home.component.html Datei anzeigen

@@ -1,151 +1,154 @@
<header class="header-bar">
<button class="profile-button" [routerLink]="['/profile']">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
</button>

<button [routerLink]="['/calendar']"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/calendar.svg"></svg-icon> </button>
<button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bell.svg"></svg-icon> </button>
</header>

<section class="video-section">
<div>
<h2> English Class </h2>
<p> Starts in </p>
<div class="counter"> 00:00:59 </div>
</div>

<span class="tutor">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</span>
</section>

<ul class="subject-list">
<header> <h5> Today's Classes: </h5> </header>

<li class="attended">
<div class="schedule">
<label> 3:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
<div class="page-container" detect-scroll (onScroll)="handleScroll($event)">
<header class="header-bar">
<button class="profile-button" [routerLink]="['/profile']">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
</button>

<li class="absent">
<div class="schedule">
<label> 4:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
<button [routerLink]="['/calendar']"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/calendar.svg"></svg-icon> </button>
<button> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bell.svg"></svg-icon> </button>
</header>

<section class="video-section" [ngClass]="{'expand' : expandVideo }">
<div>
<h2> English Class </h2>
<p> Starts in </p>
<div class="counter"> 00:00:59 </div>
</div>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Yesterday: </h5> </header>
<span class="tutor">
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</span>
</section>

<li class="late">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
<ul class="subject-list">
<header> <h5> Today's Classes: </h5> </header>

<li class="attended">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
<li class="attended">
<div class="schedule">
<label> 3:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Mon, March 29: </h5> </header>
<li class="absent">
<div class="schedule">
<label> 4:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<li class="attended">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
<header> <h5> Yesterday: </h5> </header>

<li class="late">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
<li class="late">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Sat, March 27: </h5> </header>
<li class="attended">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<li class="absent">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
<header> <h5> Mon, March 29: </h5> </header>

<li class="absent">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
</ul>
<li class="attended">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<li class="late">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<header> <h5> Sat, March 27: </h5> </header>

<li class="absent">
<div class="schedule">
<label> 5:30 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> Mathematics </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>

<li class="absent">
<div class="schedule">
<label> 6:20 PM </label>
<p> 40 Minutes </p>
</div>
<div class="subject">
<label> English </label>
<p>
<img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
<span> Dwayne the Rock </span>
</p>
</div>
<button class="view-button"> Watch </button>
</li>
</ul>

</div>

+ 10
- 0
src/app/tabs/home/home.component.scss Datei anzeigen

@@ -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;


+ 26
- 6
src/app/tabs/home/home.component.ts Datei anzeigen

@@ -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 {
}
}

}