From 762dc4b0f686107a6d608027a270e7bdaee6f777 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 19 Jul 2019 11:42:22 +0200
Subject: [PATCH] MOBILE-3021 calendar: Add styling to monthly view

---
 .../calendar/addon-calendar-calendar.html     | 22 +++---
 .../components/calendar/calendar.scss         | 76 ++++++++++++++++++-
 src/addon/calendar/pages/day/day.html         |  4 +-
 src/addon/calendar/pages/day/day.scss         |  9 +++
 4 files changed, 96 insertions(+), 15 deletions(-)
 create mode 100644 src/addon/calendar/pages/day/day.scss

diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
index 1cc977fdf..679b0996e 100644
--- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
@@ -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>
 
diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss
index b764187e4..f96cba14d 100644
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/src/addon/calendar/components/calendar/calendar.scss
@@ -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;
         }
diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html
index 134def736..e6db57d36 100644
--- a/src/addon/calendar/pages/day/day.html
+++ b/src/addon/calendar/pages/day/day.html
@@ -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">
diff --git a/src/addon/calendar/pages/day/day.scss b/src/addon/calendar/pages/day/day.scss
new file mode 100644
index 000000000..4918c1312
--- /dev/null
+++ b/src/addon/calendar/pages/day/day.scss
@@ -0,0 +1,9 @@
+page-addon-calendar-day {
+    .addon-calendar-period {
+        flex-grow: 3;
+        h3 {
+            margin-top: 10px;
+            font-size: 1.6rem;
+        }
+    }
+}
\ No newline at end of file