MOBILE-3811 calendar: Improve calendar visualization

src/addons/calendar/calendar-common.scss

@@ -6,11 +6,7 @@
         > ion-icon {
             color: white;
             border-radius: 50%;
-            padding: 6px;
+            padding: 0.7rem;
-        }
-
-        > core-mod-icon {
-            padding: 6px;
         }
 
         &.addon-calendar-eventtype-category > ion-icon {

src/addons/calendar/components/calendar/addon-calendar-calendar.html

@@ -81,13 +81,10 @@
                                         <span class="addon-calendar-event-time">
                                             {{ event.timestart * 1000 | coreFormatDate: timeFormat }}
                                         </span>
-                                        <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false"
-                                            [modname]="event.modulename" [componentId]="event.instance">
-                                        </core-mod-icon>
                                         <!-- Add the icon title so accessibility tools read it. -->
                                         <span class="sr-only">
                                             {{ 'addon.calendar.type' + event.formattedType | translate }}
-                                            <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">
+                                            <span class="sr-only" *ngIf="event.iconTitle">
                                                 {{ event.iconTitle }}
                                             </span>
                                         </span>

src/addons/calendar/components/calendar/calendar.scss

@@ -148,17 +148,6 @@
         }
     }
 
-    core-mod-icon {
-        margin-right: 1px;
-        margin-left: 1px;
-        --size: 16px;
-        display: inline-block;
-        vertical-align: bottom;
-        ::ng-deep img {
-            display: block;
-        }
-    }
-
     ion-slide {
         display: block;
         font-size: inherit;

src/addons/calendar/pages/day/day.html

@@ -68,7 +68,7 @@
                                 (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
                                 [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
                                 <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
-                                    [modname]="event.modname" [componentId]="event.instance">
+                                    [modname]="event.modulename" [componentId]="event.instance">
                                 </core-mod-icon>
                                 <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
                                     aria-hidden="true">

src/addons/calendar/pages/event/event.html

@@ -1,18 +1,10 @@
-<ion-header>
+<ion-header collapsible>
     <ion-toolbar>
         <ion-buttons slot="start">
             <ion-back-button [text]="'core.back' | translate"></ion-back-button>
         </ion-buttons>
         <ion-title>
             <h1 *ngIf="event">
-                <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
-                    [componentId]="event.instance"></core-mod-icon>
-                <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true"></ion-icon>
-                <!-- Add the icon title so accessibility tools read it. -->
-                <span class="sr-only">
-                    {{ 'addon.calendar.type' + event.formattedType | translate }}
-                    <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
-                </span>
                 <core-format-text [text]="event.name" [contextLevel]="event.contextLevel" [contextInstanceId]="event.contextInstanceId">
                 </core-format-text>
             </h1>
@@ -47,8 +39,26 @@
             </ion-item>
         </ion-card>
 
-        <ion-card>
+        <ion-list *ngIf="event">
-            <ion-card-content *ngIf="event">
+            <ion-item class="collapsible-title ion-text-wrap addon-calendar-event"
+                [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
+                <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
+                    [componentId]="event.instance" slot="start"></core-mod-icon>
+                <ion-icon *ngIf=" event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true" slot="start">
+                </ion-icon>
+                <ion-label>
+                    <!-- Add the icon title so accessibility tools read it. -->
+                    <span class="sr-only">
+                        {{ 'addon.calendar.type' + event.formattedType | translate }}
+                        <span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
+                    </span>
+                    <h1>
+                        <core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
+                            [contextInstanceId]="event.contextInstanceId">
+                        </core-format-text>
+                    </h1>
+                </ion-label>
+            </ion-item>
             <ion-item>
                 <ion-label>
                     <h2>{{ 'addon.calendar.when' | translate }}</h2>
@@ -116,10 +126,9 @@
                     </ion-button>
                 </ion-label>
             </ion-item>
-            </ion-card-content>
+        </ion-list>
-        </ion-card>
 
-        <ion-card list *ngIf="notificationsEnabled && event">
+        <ion-card *ngIf="notificationsEnabled && event">
             <ion-item>
                 <ion-label>
                     <h2>{{ 'addon.calendar.reminders' | translate }}</h2>

src/addons/calendar/pages/event/event.page.ts

@@ -46,7 +46,7 @@ import { AddonCalendarReminderTimeModalComponent } from '@addons/calendar/compon
 @Component({
     selector: 'page-addon-calendar-event',
     templateUrl: 'event.html',
-    styleUrls: ['event.scss'],
+    styleUrls: ['../../calendar-common.scss', 'event.scss'],
 })
 export class AddonCalendarEventPage implements OnInit, OnDestroy {
 

src/addons/calendar/pages/event/event.scss

@@ -2,9 +2,4 @@
     ion-card ion-note {
         font-size: 1.6rem;
     }
-    h1 ion-icon, h1 img, h1 core-mod-icon {
-        margin-left: 10px;
-        margin-right: 10px;
-        display: inline-block;
-    }
 }