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

When “show all” is clicked, scroll a little and fade in the text - Calendar Page

master
kj1352 5 年前
父节点
dcf2147deb
当前提交
111e627a7c
共有 3 个文件被更改，包括 112 次插入 和 148 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +90
    -144
      src/app/calendar/calendar.component.html
  2. +15
    -1
      src/app/calendar/calendar.component.scss
  3. +7
    -3
      src/app/calendar/calendar.component.ts

+ 90
- 144
src/app/calendar/calendar.component.html 查看文件

@@ -1,4 +1,4 @@
<div class="page" #scrollMe>
<div class="page">
<header class="nav-header"> <header class="nav-header">
<button class="close-button" (click)="back()"> <button class="close-button" (click)="back()">
<svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -82,157 +82,103 @@
</li> </li>
</ul> </ul>


<div class="preceeding-days-progress" *ngIf="showAllSchedules">
<header> {{ selectedDate - 1 }}, {{ selectedMonth }} {{ selectedYear }} </header>
<ul>
<li class="attended">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Mathematics class </label>
<p> 8:00 AM to 10:00 AM </p>
<section class="preceeding-days-progress" [ngClass]="{'active' : showAllSchedules}">
<div *ngIf="showAllSchedules">
<header class="first-header"> {{ selectedDate - 1 }}, {{ selectedMonth }} {{ selectedYear }} </header>
<ul>
<li class="attended" [routerLink]="['/quiz']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Social Science class </label>
<p> 4:00 PM to 5:00 PM </p>
</div>
<span class="status"> In Progress </span>
</div> </div>
<span class="status"> Attended </span>
</div>
</li>

<li class="absent">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Physics class </label>
<p> 11:00 AM to 1:00 PM </p>
</div>
<span class="status"> Absent </span>
</div>

</li>

<li class="late">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Chemistry class </label>
<p> 2:00 PM to 3:00 PM </p>
</div>
<span class="status"> Late by 10 mins </span>
</div>

</li>

<li class="progress">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Social Science class </label>
<p> 4:00 AM to 5:00 PM </p>
</div>
<span class="status"> Progress </span>
</div>

</li>
</ul>

<header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }} </header>
<ul>
<li class="attended">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Mathematics class </label>
<p> 8:00 AM to 10:00 AM </p>
</li>

<li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Chemistry class </label>
<p> 2:00 PM to 3:00 PM </p>
</div>
<span class="status"> Late by 10 mins </span>
</div> </div>
<span class="status"> Attended </span>
</div>
</li>

<li class="absent">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Physics class </label>
<p> 11:00 AM to 1:00 PM </p>
</div>
<span class="status"> Absent </span>
</div>

</li>

<li class="late">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Chemistry class </label>
<p> 2:00 PM to 3:00 PM </p>
</li>

<li class="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Physics class </label>
<p> 11:00 AM to 1:00 PM </p>
</div>
<span class="status"> Absent </span>
</div> </div>
<span class="status"> Late by 10 mins </span>
</div>

</li>

<li class="progress">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Social Science class </label>
<p> 4:00 AM to 5:00 PM </p>
</li>

<li class="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Mathematics class </label>
<p> 8:00 AM to 10:00 AM </p>
</div>
<span class="status"> Attended </span>
</div> </div>
<span class="status"> Progress </span>
</div>

</li>
</ul>

<header> {{ selectedDate - 3 }}, {{ selectedMonth }} {{ selectedYear }} </header>
<ul>
<li class="attended">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Mathematics class </label>
<p> 8:00 AM to 10:00 AM </p>
</li>
</ul>

<header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }} </header>
<ul>
<li class="absent" [routerLink]="['/quiz']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Social Science class </label>
<p> 4:00 PM to 5:00 PM </p>
</div>
<span class="status"> In Progress </span>
</div> </div>
<span class="status"> Attended </span>
</div>
</li>
<li class="absent">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Physics class </label>
<p> 11:00 AM to 1:00 PM </p>
</li>

<li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Chemistry class </label>
<p> 2:00 PM to 3:00 PM </p>
</div>
<span class="status"> Late by 10 mins </span>
</div> </div>
<span class="status"> Absent </span>
</div>

</li>

<li class="late">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Chemistry class </label>
<p> 2:00 PM to 3:00 PM </p>
</li>

<li class="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Physics class </label>
<p> 11:00 AM to 1:00 PM </p>
</div>
<span class="status"> Absent </span>
</div> </div>
<span class="status"> Late by 10 mins </span>
</div>

</li>

<li class="progress">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Social Science class </label>
<p> 4:00 AM to 5:00 PM </p>
</li>

<li class="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
<svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
<div class="content-holder">
<div class="content">
<label> Mathematics class </label>
<p> 8:00 AM to 10:00 AM </p>
</div>
<span class="status"> Attended </span>
</div> </div>
<span class="status"> Progress </span>
</div>

</li>
</ul>
</div>
</li>
</ul>
</div>
</section>
</section> </section>


<button class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button> <button class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>


+ 15
- 1
src/app/calendar/calendar.component.scss 查看文件

@@ -139,7 +139,7 @@
.schedule-details { .schedule-details {
background-color: white; background-color: white;
padding: 0 5% 100px; padding: 0 5% 100px;
overflow: auto;
overflow: hidden;
border-top-left-radius: 30px; border-top-left-radius: 30px;
border-top-right-radius: 30px; border-top-right-radius: 30px;
position: relative; position: relative;
@@ -167,6 +167,20 @@
list-style: none; list-style: none;
} }


.preceeding-days-progress {
opacity: 0;
transition: opacity 0.5s, transform 0.5s;
transition-delay: 0.5s;
transform: translateY(20vh);
margin: 0;

&.active {
opacity: 1;
transform: translateY(0vh);
}
}


li { li {
display: flex; display: flex;
width: 100%; width: 100%;


+ 7
- 3
src/app/calendar/calendar.component.ts 查看文件

@@ -1,4 +1,4 @@
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common'; import { Location } from '@angular/common';


@Component({ @Component({
@@ -7,7 +7,6 @@ import { Location } from '@angular/common';
styleUrls: ['./calendar.component.scss'] styleUrls: ['./calendar.component.scss']
}) })
export class CalendarComponent implements OnInit { export class CalendarComponent implements OnInit {
@ViewChild('scrollMe') private myScrollContainer: ElementRef;
currentDate: number; currentDate: number;
currentMonth: string; currentMonth: string;
currentYear: number; currentYear: number;
@@ -30,7 +29,12 @@ export class CalendarComponent implements OnInit {


if (this.showAllSchedules) { if (this.showAllSchedules) {
try { try {
this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
setTimeout(() => {
document.querySelector('.first-header').scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}, 100);
} catch(err) { } } catch(err) { }
} }
} }