kj
/
lms-app
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Class list card integration with Home page

master
kj1352 5 年前
父节点
84c1970d78
当前提交
b3c1adc077
共有 7 个文件被更改，包括 140 次插入 和 150 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +9
    -1
      src/app/reusable-components/class-card-list/class-card-list.component.html
  2. +1
    -0
      src/app/reusable-components/class-card-list/class-card-list.component.ts
  3. +9
    -145
      src/app/tabs/home/home.component.html
  4. +20
    -0
      src/app/tabs/home/home.component.scss
  5. +98
    -1
      src/app/tabs/home/home.component.ts
  6. +1
    -1
      src/app/welcome/welcome.component.html
  7. +2
    -2
      src/app/welcome/welcome.component.ts

+ 9
- 1
src/app/reusable-components/class-card-list/class-card-list.component.html 查看文件

@@ -1,5 +1,7 @@
<ul class="subject-list"> <ul class="subject-list">
<li *ngFor="let class of classes">
<li *ngFor="let class of classes" [ngClass]="{'late' : class.attendanceStatus && class.attendanceStatus === 'LATE',
'attended' : class.attendanceStatus && class.attendanceStatus === 'PRESENT',
'absent' : class.attendanceStatus && class.attendanceStatus === 'ABSENT'}">
<div class="schedule"> <div class="schedule">
<label> {{ class.time }} </label> <label> {{ class.time }} </label>
<p> {{ class.duration }} </p> <p> {{ class.duration }} </p>
@@ -11,5 +13,11 @@
<span> {{ class.teacher.name }} </span> <span> {{ class.teacher.name }} </span>
</p> </p>
</div> </div>
<span *ngIf="class.classUrl">
<button class="view-button"
[routerLink]="[class.classUrl, class.classId]">
Watch
</button>
</span>
</li> </li>
</ul> </ul>

+ 1
- 0
src/app/reusable-components/class-card-list/class-card-list.component.ts 查看文件

@@ -11,6 +11,7 @@ export class ClassCardListComponent implements OnInit {
constructor() { } constructor() { }


ngOnInit(): void { ngOnInit(): void {
} }


} }

+ 9
- 145
src/app/tabs/home/home.component.html 查看文件

@@ -5,7 +5,7 @@
</header> </header>


<section class="video-section" [ngClass]="{'expand' : expandVideo }"> <section class="video-section" [ngClass]="{'expand' : expandVideo }">
<iframe src="https://player.vimeo.com/video/393975453?title=0&portrait=0&byline=0&autoplay=1" frameborder="0"></iframe>
<!-- <iframe src="https://player.vimeo.com/video/393975453?title=0&portrait=0&byline=0&autoplay=1" frameborder="0"></iframe> -->


<div class="topic-name"> <div class="topic-name">
<h2> English Class </h2> <h2> English Class </h2>
@@ -99,149 +99,13 @@
</div> </div>
</section> </section>


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

<li class="absent">
<div class="schedule">
<label> 9:30 PM </label>
<p> 1hr 40 Minutes </p>
</div>
<div class="subject">
<label> Science </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> 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>

</li>

<li class="attended">
<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>

</li>

<header> <h5> Tomorrow: </h5> </header>

<li>
<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>

</li>

<li>
<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>

</li>

<header> <h5> Mon, June 29: </h5> </header>

<li>
<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>

</li>

<li>
<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>

</li>

<header> <h5> Sat, June 30: </h5> </header>

<li>
<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>

</li>

<li>
<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>

</li>
</ul>
<div class="card-list-holder">
<div class="card-list" *ngFor="let class of studentClassList">
<header>
<h5> {{ class.date }} </h5>
</header>
<app-class-card-list [classes]="class.classes"></app-class-card-list>
</div>
</div>


</div> </div>

+ 20
- 0
src/app/tabs/home/home.component.scss 查看文件

@@ -63,6 +63,8 @@
transition: width 0.5s, border-radius 0.5s; transition: width 0.5s, border-radius 0.5s;
overflow: hidden; overflow: hidden;
height: 30vh; height: 30vh;
background-color: var(--dark-grey);
flex-direction: column;


@media screen and (min-width: 1023px) { @media screen and (min-width: 1023px) {
justify-content: space-between; justify-content: space-between;
@@ -73,6 +75,7 @@
width: 100%; width: 100%;
padding: 0px 5%; padding: 0px 5%;
z-index: 1; z-index: 1;
flex-direction: row;
} }


iframe { iframe {
@@ -371,3 +374,20 @@
} }
} }
} }


.card-list-holder {
width: 90%;
margin: 0 auto;

header {
color: var(--dark-grey);
position: relative;

h5 {
font-size: 14px;
margin-top: 30px;
font-weight: 500;
}
}
}

+ 98
- 1
src/app/tabs/home/home.component.ts 查看文件

@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ScrollEvent } from 'ngx-scroll-event'; import { ScrollEvent } from 'ngx-scroll-event';
import * as moment from 'moment';


@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@@ -12,6 +12,103 @@ export class HomeComponent implements OnInit {
showClassDetails: boolean; showClassDetails: boolean;
selectedSegment: string = 'transcript'; selectedSegment: string = 'transcript';


studentClassList = [{
date: moment(new Date()).format('MMM, DD 2020'),
classes: [{
time: '10:00 AM',
duration: '45 Mins',
subject: 'Mathematics',
teacher: {
name: 'Mr Kashinath Kashyap',
profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
},
classUrl: '/video-chapter',
classId: 'topic1',
attendanceStatus: 'LATE'
}, {
time: '11:00 AM',
duration: '45 Mins',
subject: 'Physics',
teacher: {
name: 'Dr Meghana',
profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
},
classUrl: '/chapter-notes',
classId: 'topic1',
attendanceStatus: 'ABSENT'
}, {
time: '12:00 PM',
duration: '45 Mins',
subject: 'Chemistry',
teacher: {
name: 'Mr Kashinath Kashyap',
profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
},
classUrl: '/chapter-notes',
classId: 'topic1',
attendanceStatus: 'PRESENT'
}, {
time: '2:00 PM',
duration: '45 Mins',
subject: 'EVS',
teacher: {
name: 'Mr Kashinath Kashyap',
profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
}
}, {
time: '3:00 PM',
duration: '45 Mins',
subject: 'Biology',
teacher: {
name: 'Dr Meghana',
profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
}
}]
}, {
date: moment(new Date()).subtract(1, 'day').format('MMM, DD 2020'),
classes: [{
time: '10:00 AM',
duration: '45 Mins',
subject: 'Mathematics',
teacher: {
name: 'Mr Kashinath Kashyap',
profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
}
}, {
time: '11:00 AM',
duration: '45 Mins',
subject: 'Physics',
teacher: {
name: 'Dr Meghana',
profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
}
}, {
time: '12:00 PM',
duration: '45 Mins',
subject: 'Chemistry',
teacher: {
name: 'Mr Kashinath Kashyap',
profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
}
}, {
time: '2:00 PM',
duration: '45 Mins',
subject: 'EVS',
teacher: {
name: 'Mr Kashinath Kashyap',
profile_image: 'https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg'
}
}, {
time: '3:00 PM',
duration: '45 Mins',
subject: 'Biology',
teacher: {
name: 'Dr Meghana',
profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
}
}]
}];

constructor() { } constructor() { }


ngOnInit(): void { ngOnInit(): void {


+ 1
- 1
src/app/welcome/welcome.component.html 查看文件

@@ -10,7 +10,7 @@
</section> </section>


<div class="card-list-holder"> <div class="card-list-holder">
<div class="card-list" *ngFor="let class of classList">
<div class="card-list" *ngFor="let class of studentClassList">
<header> <header>
<h5> {{ class.date }} </h5> <h5> {{ class.date }} </h5>
</header> </header>


+ 2
- 2
src/app/welcome/welcome.component.ts 查看文件

@@ -7,7 +7,7 @@ import * as moment from 'moment';
styleUrls: ['./welcome.component.scss'] styleUrls: ['./welcome.component.scss']
}) })
export class WelcomeComponent implements OnInit { export class WelcomeComponent implements OnInit {
classList = [{
studentClassList = [{
date: moment(new Date()).format('MMM, DD 2020'), date: moment(new Date()).format('MMM, DD 2020'),
classes: [{ classes: [{
time: '10:00 AM', time: '10:00 AM',
@@ -93,7 +93,7 @@ export class WelcomeComponent implements OnInit {
profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg' profile_image: 'https://pbs.twimg.com/profile_images/416884752377843712/MW2qg7-f.jpeg'
} }
}] }]
}]
}];


constructor() { } constructor() { }