feat: apply new layout overhaul

src/app/modules/schedule/page/schedule-page.html

@@ -14,13 +14,35 @@
   -->
 
 <ion-header>
-  <ion-toolbar color="primary">
+  <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-      <ion-menu-button></ion-menu-button>
+      <ion-back-button
+        [defaultHref]="'..'"
+        [text]="'back' | translate | titlecase"
+      ></ion-back-button>
     </ion-buttons>
-
-    <ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
+    <ion-title *ngIf="tabChoreographer.currentValue === 'calendar'">{{
+      'schedule.calendar' | translate | titlecase
+    }}</ion-title>
+    <ion-title *ngIf="tabChoreographer.currentValue === 'recurring'">{{
+      'schedule.recurring' | translate | titlecase
+    }}</ion-title>
+    <ion-title *ngIf="tabChoreographer.currentValue === 'single'">{{
+      'schedule.single' | translate | titlecase
+    }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="onTodayClick()">
+        {{ 'schedule.view.today' | translate | uppercase }}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+  <ion-toolbar color="primary" mode="md" class="tabs-toolbar">
+    <ion-segment
+      #segment
+      class="tabs"
+      value="calendar"
+      (ionChange)="onSegmentChange()"
+    >
       <ion-segment-button value="calendar">
         <ion-label>{{ 'schedule.calendar' | translate }}</ion-label>
       </ion-segment-button>
@@ -34,35 +56,43 @@
   </ion-toolbar>
 </ion-header>
 
-<div
-  [ngSwitch]="tabChoreographer.currentValue"
-  [@materialSharedAxisX]="tabChoreographer.animationState"
-  (@materialSharedAxisX.done)="tabChoreographer.animationDone()"
->
-  <stapps-calendar-view
-    *ngSwitchCase="'calendar'"
-    [layout]="layout"
-  ></stapps-calendar-view>
-  <!-- Schedule view needs full week -->
-  <stapps-schedule-view
-    *ngSwitchCase="'recurring'"
-    [layout]="layout"
-  ></stapps-schedule-view>
-  <stapps-single-events *ngSwitchCase="'single'"></stapps-single-events>
-</div>
+<ion-content scroll-y="false">
+  <div
+    [ngSwitch]="tabChoreographer.currentValue"
+    [@materialSharedAxisX]="tabChoreographer.animationState"
+    (@materialSharedAxisX.done)="tabChoreographer.animationDone()"
+  >
+    <stapps-calendar-view
+      *ngSwitchCase="'calendar'"
+      [layout]="layout"
+    ></stapps-calendar-view>
+    <!-- Schedule view needs full week -->
+    <stapps-schedule-view
+      *ngSwitchCase="'recurring'"
+      [layout]="layout"
+    ></stapps-schedule-view>
+    <stapps-single-events *ngSwitchCase="'single'"></stapps-single-events>
+  </div>
 
-<ion-fab id="add-events-fab" vertical="bottom" horizontal="end" slot="fixed">
-  <ion-fab-button>
-    <ion-icon name="add"></ion-icon>
-  </ion-fab-button>
-</ion-fab>
+  <ion-fab
+    vertical="bottom"
+    horizontal="end"
+    slot="fixed"
+    (click)="onFABClick()"
+  >
+    <ion-fab-button>
+      <ion-icon name="plus"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 
-<ion-modal
-  trigger="add-events-fab"
-  swipeToClose="true"
-  [presentingElement]="routerOutlet.nativeEl"
->
-  <ng-template>
-    <modal-event-creator style="height: 100%"></modal-event-creator>
-  </ng-template>
-</ion-modal>
+  <ion-modal
+    swipeToClose="true"
+    [presentingElement]="routerOutlet.nativeEl"
+    [isOpen]="isModalOpen"
+    (ionModalWillDismiss)="onModalDismiss()"
+  >
+    <ng-template>
+      <modal-event-creator></modal-event-creator>
+    </ng-template>
+  </ion-modal>
+</ion-content>