From 8ae300999679674c231952c77dc59eba70d2a0b8 Mon Sep 17 00:00:00 2001
From: Albert Gasset <albertgasset@fsfe.org>
Date: Wed, 7 Aug 2019 11:41:45 +0200
Subject: [PATCH] MOBILE-3021 calendar: Fit whole calendar in 5 inch phones

---
 .../components/calendar/addon-calendar-calendar.html  |  6 +++---
 src/addon/calendar/components/calendar/calendar.scss  | 11 ++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
index 1bf31b5d0..bf5c29422 100644
--- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
@@ -8,8 +8,8 @@
 
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <!-- Period name and arrows to navigate. -->
-    <ion-grid padding-top>
-        <ion-row>
+    <ion-grid no-padding class="addon-calendar-navigation">
+        <ion-row align-items-center>
             <ion-col text-start *ngIf="canNavigate">
                 <a ion-button icon-only clear (click)="loadPrevious()" [title]="'core.previous' | translate">
                     <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
@@ -31,7 +31,7 @@
         <!-- List of days. -->
         <ion-row>
             <ion-col text-center *ngFor="let day of weekDays" class="addon-calendar-weekday">
-                <p>{{ day.shortname | translate }}</p>
+                {{ day.shortname | translate }}
             </ion-col>
         </ion-row>
 
diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss
index f96cba14d..278e56bcf 100644
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/src/addon/calendar/components/calendar/calendar.scss
@@ -10,6 +10,10 @@ $calendar-border-color: $gray !default;
 
 ion-app.app-root addon-calendar-calendar {
 
+    .addon-calendar-navigation {
+        @include padding(5px, 10px, null, 10px);
+    }
+
     .addon-calendar-months {
         background-color: white;
         padding: 0;
@@ -19,7 +23,7 @@ ion-app.app-root addon-calendar-calendar {
         border-bottom: 1px solid $calendar-border-color;
         @include border-end(1px, solid, $calendar-border-color);
         overflow: hidden;
-        min-height: 70px;
+        min-height: 60px;
 
         &:first-child {
             @include padding(null, null, null, 10px);
@@ -64,7 +68,7 @@ ion-app.app-root addon-calendar-calendar {
         }
 
         .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);
         width: 16px;
         height: 16px;
-        display: inline;
+        display: inline-block;
+        vertical-align: middle;
     }
 }
\ No newline at end of file