forked from EVOgeek/Vmeda.Online
MOBILE-3021 calendar: Add styling to monthly view
This commit is contained in:
Pau Ferrer Ocaña
Dani Palou
parent
d7d565086b
commit
762dc4b0f6
@ -7,8 +7,8 @@
|
||||
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
|
||||
</a>
|
||||
</ion-col>
|
||||
<ion-col text-center>
|
||||
<p>{{ periodName }}</p>
|
||||
<ion-col text-center class="addon-calendar-period">
|
||||
<h3>{{ periodName }}</h3>
|
||||
</ion-col>
|
||||
<ion-col text-end *ngIf="canNavigate">
|
||||
<a ion-button icon-only clear (click)="loadNext()" [title]="'core.next' | translate">
|
||||
@ -19,22 +19,22 @@
|
||||
</ion-grid>
|
||||
|
||||
<!-- Calendar view. -->
|
||||
<ion-grid padding-horizontal>
|
||||
<ion-grid class="addon-calendar-months">
|
||||
<!-- List of days. -->
|
||||
<ion-row>
|
||||
<ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekdays">
|
||||
<ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekday">
|
||||
<p>{{ day.shortname | translate }}</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<!-- Weeks. -->
|
||||
<ion-row *ngFor="let week of weeks">
|
||||
<ion-col *ngFor="let value of week.prepadding" class="dayblank"></ion-col> <!-- Empty slots (first week). -->
|
||||
<ion-col text-center *ngFor="let day of week.days" [ngClass]='{"hasevents": day.hasevents, "today": day.istoday, "weekend": day.isweekend, "duration_finish": day.haslastdayofevent}' >
|
||||
<ion-row *ngFor="let week of weeks" class="addon-calendar-week">
|
||||
<ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day"></ion-col> <!-- Empty slots (first week). -->
|
||||
<ion-col text-center *ngFor="let day of week.days" [ngClass]='{"hasevents": day.hasevents, "today": day.istoday, "weekend": day.isweekend, "duration_finish": day.haslastdayofevent}' class="addon-calendar-day">
|
||||
<p class="addon-calendar-day-number" (click)="dayClicked(day.mday)">{{ day.mday }}</p>
|
||||
|
||||
<!-- In phone, display some dots to indicate the type of events. -->
|
||||
<p class="hidden-tablet"><span *ngFor="let type of day.calendareventtypes" class="calendar_event_type calendar_event_{{type}}"></span></p>
|
||||
<p class="hidden-tablet addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes" class="calendar_event_type calendar_event_{{type}}"></span></p>
|
||||
|
||||
<!-- In tablet, display list of events. -->
|
||||
<div class="hidden-phone addon-calendar-day-events">
|
||||
@ -44,14 +44,14 @@
|
||||
<ion-icon *ngIf="event.offline && !event.deleted" name="time"></ion-icon>
|
||||
<ion-icon *ngIf="event.deleted" name="trash"></ion-icon>
|
||||
<img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" alt="" role="presentation" class="core-module-icon">
|
||||
{{ event.timestart * 1000 | coreFormatDate: timeFormat }}
|
||||
{{event.name}}
|
||||
<span class="addon-calendar-event-time">{{ event.timestart * 1000 | coreFormatDate: timeFormat }}</span>
|
||||
<span class="addon-calendar-event-name">{{event.name}}</span>
|
||||
</p>
|
||||
</ng-container>
|
||||
<p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more" (click)="dayClicked(day.mday)"><b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b></p>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col *ngFor="let value of week.postpadding" class="dayblank"></ion-col> <!-- Empty slots (last week). -->
|
||||
<ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day"></ion-col> <!-- Empty slots (last week). -->
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
|
||||
@ -4,11 +4,81 @@ $calendar-event-course-color: $red !default; // Red.
|
||||
$calendar-event-group-color: $yellow !default; // Yellow.
|
||||
$calendar-event-user-color: $blue !default; // Blue.
|
||||
$calendar-event-site-color: $green !default; // Green.
|
||||
$calendar-today-bgcolor: $core-color !default;
|
||||
$calendar-today-color: $white !default;
|
||||
$calendar-border-color: $gray !default;
|
||||
|
||||
ion-app.app-root addon-calendar-calendar {
|
||||
|
||||
.addon-calendar-weekdays {
|
||||
opacity: 0.4;
|
||||
.addon-calendar-months {
|
||||
background-color: white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.addon-calendar-day {
|
||||
border-bottom: 1px solid $calendar-border-color;
|
||||
@include border-end(1px, solid, $calendar-border-color);
|
||||
overflow: hidden;
|
||||
min-height: 70px;
|
||||
|
||||
&:first-child {
|
||||
@include padding(null, null, null, 10px);
|
||||
}
|
||||
&:last-child {
|
||||
@include border-end(0, null, null);
|
||||
@include padding(null, 8px, null, null);
|
||||
}
|
||||
.addon-calendar-day-number {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: max-content;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
margin: 3px;
|
||||
}
|
||||
&.today .addon-calendar-day-number {
|
||||
background-color: $calendar-today-bgcolor;
|
||||
color: $calendar-today-color;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.dayblank {
|
||||
background-color: $gray-lighter;
|
||||
}
|
||||
|
||||
.addon-calendar-event {
|
||||
margin-top: 0.6em;
|
||||
margin-bottom: 0.6em;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.addon-calendar-event-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-calendar-day-more {
|
||||
@include margin(0.6em, null, 0.6em, 4px);
|
||||
}
|
||||
|
||||
.addon-calendar-dot-types {
|
||||
@include margin(0.6em, null, 0.6em, null);
|
||||
}
|
||||
}
|
||||
|
||||
.addon-calendar-period {
|
||||
flex-grow: 3;
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.addon-calendar-weekday {
|
||||
color: $gray-dark;
|
||||
border-bottom: 1px solid $list-md-border-color;
|
||||
}
|
||||
|
||||
.addon-calendar-day-events {
|
||||
@ -32,6 +102,8 @@ ion-app.app-root addon-calendar-calendar {
|
||||
border: 1px solid white;
|
||||
@include margin-horizontal(1px, 1px);
|
||||
|
||||
|
||||
|
||||
&.calendar_event_category {
|
||||
background-color: $calendar-event-category-color;
|
||||
}
|
||||
|
||||
@ -24,8 +24,8 @@
|
||||
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
|
||||
</a>
|
||||
</ion-col>
|
||||
<ion-col text-center>
|
||||
<p>{{ periodName }}</p>
|
||||
<ion-col text-center class="addon-calendar-period">
|
||||
<h3>{{ periodName }}</h3>
|
||||
</ion-col>
|
||||
<ion-col text-end *ngIf="currentMoment">
|
||||
<a ion-button icon-only clear (click)="loadNext()" [title]="'addon.calendar.daynext' | translate">
|
||||
|
||||
9
src/addon/calendar/pages/day/day.scss
Normal file
9
src/addon/calendar/pages/day/day.scss
Normal file
@ -0,0 +1,9 @@
|
||||
page-addon-calendar-day {
|
||||
.addon-calendar-period {
|
||||
flex-grow: 3;
|
||||
h3 {
|
||||
margin-top: 10px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user