kj
/
lms-app
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

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

master
kj1352 il y a 5 ans
Parent
dcf2147deb
révision
111e627a7c
3 fichiers modifiés avec 112 ajouts et 148 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  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 Voir le fichier

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

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

<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 Voir le fichier

@@ -139,7 +139,7 @@
.schedule-details {
background-color: white;
padding: 0 5% 100px;
overflow: auto;
overflow: hidden;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
position: relative;
@@ -167,6 +167,20 @@
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 {
display: flex;
width: 100%;


+ 7
- 3
src/app/calendar/calendar.component.ts Voir le fichier

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

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

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