EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3021 calendar: Fit whole calendar in 5 inch phones

main
Albert Gasset 2019-08-07 11:41:45 +02:00
parent 0521fda729
commit 8ae3009996
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/addon/calendar/components/calendar/addon-calendar-calendar.html
View File

@ -8,8 +8,8 @@
<core-loading [hideUntil]="loaded" class="core-loading-center"> <core-loading [hideUntil]="loaded" class="core-loading-center">
<!-- Period name and arrows to navigate. --> <!-- Period name and arrows to navigate. -->
<ion-grid padding-top> <ion-grid no-padding class="addon-calendar-navigation">
<ion-row> <ion-row align-items-center>
<ion-col text-start *ngIf="canNavigate"> <ion-col text-start *ngIf="canNavigate">
<a ion-button icon-only clear (click)="loadPrevious()" [title]="'core.previous' | translate"> <a ion-button icon-only clear (click)="loadPrevious()" [title]="'core.previous' | translate">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon> <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
@ -31,7 +31,7 @@
<!-- List of days. --> <!-- List of days. -->
<ion-row> <ion-row>
<ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekday"> <ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekday">
<p>{{ day.shortname | translate }}</p> {{ day.shortname | translate }}
</ion-col> </ion-col>
</ion-row> </ion-row>

11
src/addon/calendar/components/calendar/calendar.scss
View File

@ -10,6 +10,10 @@ $calendar-border-color: $gray !default;
ion-app.app-root addon-calendar-calendar { ion-app.app-root addon-calendar-calendar {
.addon-calendar-navigation {
@include padding(5px, 10px, null, 10px);
}
.addon-calendar-months { .addon-calendar-months {
background-color: white; background-color: white;
padding: 0; padding: 0;
@ -19,7 +23,7 @@ ion-app.app-root addon-calendar-calendar {
border-bottom: 1px solid $calendar-border-color; border-bottom: 1px solid $calendar-border-color;
@include border-end(1px, solid, $calendar-border-color); @include border-end(1px, solid, $calendar-border-color);
overflow: hidden; overflow: hidden;
min-height: 70px; min-height: 60px;
&:first-child { &:first-child {
@include padding(null, null, null, 10px); @include padding(null, null, null, 10px);
@ -64,7 +68,7 @@ ion-app.app-root addon-calendar-calendar {
} }
.addon-calendar-dot-types { .addon-calendar-dot-types {
@include margin(0.6em, null, 0.6em, null); margin: 0;
} }
} }
@ -125,6 +129,7 @@ ion-app.app-root addon-calendar-calendar {
@include margin-horizontal(1px, 1px); @include margin-horizontal(1px, 1px);
width: 16px; width: 16px;
height: 16px; height: 16px;
display: inline; display: inline-block;
vertical-align: middle;
} }
} }