From 111e627a7c12f17c91ac3a77e5f4e1ada006eb91 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Tue, 23 Jun 2020 12:11:30 +0530 Subject: [PATCH] =?UTF-8?q?When=20=E2=80=9Cshow=20all=E2=80=9D=20is=20clic?= =?UTF-8?q?ked,=20scroll=20a=20little=20and=20fade=20in=20the=20text=20-?= =?UTF-8?q?=20Calendar=20Page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/calendar/calendar.component.html | 234 +++++++++-------------- src/app/calendar/calendar.component.scss | 16 +- src/app/calendar/calendar.component.ts | 10 +- 3 files changed, 112 insertions(+), 148 deletions(-) diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html index 9a4adf5..764870f 100644 --- a/src/app/calendar/calendar.component.html +++ b/src/app/calendar/calendar.component.html @@ -1,4 +1,4 @@ -
+
- - - -
  • - -
    -
    - -

    4:00 AM to 5:00 PM

    +
    • + +
  • + +
    +
    + +

    8:00 AM to 10:00 AM

    +
    + Attended
    - Progress -
    • - - - - -
    {{ selectedDate - 3 }}, {{ selectedMonth }} {{ selectedYear }}
    - + +
    {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }}
    + - + + + + diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss index 147e43b..980d653 100644 --- a/src/app/calendar/calendar.component.scss +++ b/src/app/calendar/calendar.component.scss @@ -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%; diff --git a/src/app/calendar/calendar.component.ts b/src/app/calendar/calendar.component.ts index 2df213b..7b0c46c 100644 --- a/src/app/calendar/calendar.component.ts +++ b/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'; @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) { } } }