peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-21 13:55:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve agenda timeline

Browse Source
This commit is contained in:
Peter Maquiran
2021-03-17 20:45:57 +01:00
parent 5ca0f71d65
commit 307335ef7b
4 changed files with 82 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/agenda/agenda.page.html
+41 -20
View File
@@ -6,7 +6,7 @@
<div class="d-flex bg-blue container-wrapper">
<div class="calendar-timeline bg-blue">
<div class="calendar-timeline d-flex flex-column height-100 bg-blue">
<div class="calendar-wrapper">
<div class="main-content">
@@ -230,10 +230,10 @@
<!-- Calendar currente date -->
<ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
<ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien pb-5">
<ion-row class="timeline-date align-center">
<ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="!showCalendar" (click)="calendarHeight='430.5px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="!showCalendar" (click)="calendarHeight='333px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
</ion-row>
<ion-row class="timeline-date align-center">
<span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
@@ -250,11 +250,23 @@
</ul>
</ion-row>
</ion-row>
<div class="d-flex pb-5 d-none d-md-flex">
<div class="flex-grow-1 text-grey d-flex justify-center align-center">
<div>Prória</div>
</div>
<div class="flex-grow-1 text-black">
<div class="flex-grow-1 text-grey d-flex justify-center align-center">
<div>Presidente da Republica</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="timeline-wrapper" [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
<div class="timeline-wrapper flex-grow-1" [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
<!-- Progress bar -->
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content>
@@ -262,24 +274,33 @@
</ion-refresher>
<!-- Timeline -->
<div class="timeline-container" *ngIf="showTimeline">
<mwl-demo-utils-calendar-header class="timeline"
[(view)]="view"
[(viewDate)]="viewDate"
[dayStartHour]="0"
[dayEndHour]="23">
</mwl-demo-utils-calendar-header>
<div [ngSwitch]="view">
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
(eventClicked)="eventClicked($event)"
>
</mwl-calendar-day-view>
<div>
<div class="timeline-container d-flex" *ngIf="showTimeline">
<div [ngSwitch]="view" class="timeline-mobile flex-grow-1">
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
(eventClicked)="eventClicked($event)"
>
</mwl-calendar-day-view>
</div>
<div [ngSwitch]="view" class="flex-grow-1 d-none d-md-block timeline-md">
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
(eventClicked)="eventClicked($event)"
>
</mwl-calendar-day-view>
</div>
</div>
</div>
</div>
</div>
src/app/pages/agenda/agenda.page.scss
+7 -3
View File
@@ -501,7 +501,6 @@ td.monthview-primary-with-event {
.container-wrapper{
height: 100%;
.calendar-timeline{
flex-wrap: wrap;
border-top-right-radius: 24px;
width: calc(100%);
@@ -535,10 +534,14 @@ td.monthview-primary-with-event {
height: 100%;
.calendar-timeline{
flex-wrap: wrap;
border-top-right-radius: 0px;
width: calc(100% - 40%);
border-right: 1px solid #d8d8d8;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: unset;
}
}
.event-details{
@@ -600,4 +603,5 @@ app-approve-event{
display: flex;
align-items: center;
height: 100%;
}
}
src/app/pages/agenda/agenda.page.ts
+1 -2
View File
@@ -127,7 +127,7 @@ export class AgendaPage implements OnInit {
private sanitizer: DomSanitizer
) {
this.calendarHeight = "347px";
this.calendarHeight = '333px';
this.showCalendar = true;
this.timelineDate = momentG(new Date(),'dd MMMM yyyy');
@@ -161,7 +161,6 @@ export class AgendaPage implements OnInit {
if( window.innerWidth <= 1024){
console.log('mobile')
this.cloneAllmobileComponent();
}
};