fix: adjust code to overcome the breaking changes (ionic 4 to 5)

Closes #70

src/app/modules/data/data.html

@@ -13,6 +13,6 @@
 </ion-header>
 
 
-<ion-content padding>
+<ion-content class="ion-padding">
 
 </ion-content>

src/app/modules/data/detail/data-detail.html

@@ -4,10 +4,10 @@
   <ion-back-button></ion-back-button>
   <ion-menu-button></ion-menu-button>
   </ion-buttons>
-    <ion-title text-center>{{'data.detail.TITLE' | translate}}</ion-title>
+    <ion-title class="ion-text-center">{{'data.detail.TITLE' | translate}}</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content padding>
+<ion-content class="ion-padding">
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
     <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="{{'data.REFRESH_ACTION' | translate}}"
       refreshingText="{{'data.REFRESHING' | translate}}">

src/app/modules/data/list/data-list-item.html

@@ -1,4 +1,4 @@
-<ion-item text-wrap button="true" lines="inset" [routerLink]="['/data-detail', item.uid]">
+<ion-item class="ion-text-wrap" button="true" lines="inset" [routerLink]="['/data-detail', item.uid]">
   <ion-thumbnail slot="start">
     <img class="stapps-{{item.type}}-thumbnail" src="{{item.image}}" onError="this.src='../../assets/imgs/logo.png';" alt="{{item.name}}" />
   </ion-thumbnail>

src/app/modules/data/list/data-list.html

@@ -17,7 +17,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
+<ion-content id="data-list">
   <ion-list *ngIf="items">
     <stapps-data-list-item [item]="item" *ngFor="let item of items"></stapps-data-list-item>
   </ion-list>

src/app/modules/menu/context/context-menu.html

@@ -1,9 +1,6 @@
-<ion-menu type="overlay" menuId="context" side="end">
+<ion-menu type="overlay" menuId="context" contentId="data-list" side="end">
   <ion-card-header>
     <ion-toolbar>
-      <ion-buttons slot="right">
-        <ion-back-button></ion-back-button>
-      </ion-buttons>
       <ion-title>{{'menu.context.title' | translate | titlecase}}</ion-title>
     </ion-toolbar>
   </ion-card-header>
@@ -42,10 +39,12 @@
                 *ngFor="let facet of !filterOption.compact ?
                 filterOption.options.slice(0, compactFilterOptionCount) : filterOption.options">
         <ion-list-header class="h3">
-          {{(facet.onlyOnType ?
-          getTranslatedPropertyName(facet.field, facet.onlyOnType)
-          : (getTranslatedPropertyName(facet.field))) | titlecase}}
-          {{facet.onlyOnType? ' | ' + (getTranslatedType(facet.onlyOnType) | titlecase) : ''}}
+          <ion-label>
+            {{(facet.onlyOnType ?
+              getTranslatedPropertyName(facet.field, facet.onlyOnType)
+              : (getTranslatedPropertyName(facet.field))) | titlecase}}
+              {{facet.onlyOnType? ' | ' + (getTranslatedType(facet.onlyOnType) | titlecase) : ''}}
+          </ion-label>
         </ion-list-header>
         <div *ngIf="facet.buckets.length > 0">
           <ion-item
@@ -77,4 +76,3 @@
     </div>
   </ion-content>
 </ion-menu>
-<ion-router-outlet main></ion-router-outlet>

src/app/modules/menu/navigation/navigation.html

@@ -1,5 +1,5 @@
-<ion-split-pane>
-  <ion-menu>
+<ion-split-pane contentId="main">
+  <ion-menu menuId="main" contentId="main" type="overlay" side="start">
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
@@ -11,7 +11,11 @@
     <ion-content>
       <ion-list *ngFor="let category of menu">
         <ion-list-header
-          *ngIf="category.name !== ''">{{category.translations[language].name | titlecase}}</ion-list-header>
+          *ngIf="category.name !== ''">
+          <ion-label>
+            {{category.translations[language].name | titlecase}}
+          </ion-label>
+        </ion-list-header>
         <ion-menu-toggle auto-hide="false" *ngFor="let item of category.items">
           <ion-item [routerDirection]="'root'" [routerLink]="[item.route]">
             <ion-icon slot="end" [name]="item.icon"></ion-icon>
@@ -21,7 +25,7 @@
           </ion-item>
         </ion-menu-toggle>
       </ion-list>
-    </ion-content>
+    </ion-content>  
   </ion-menu>
-  <ion-router-outlet main></ion-router-outlet>
+  <ion-router-outlet id="main"></ion-router-outlet>
 </ion-split-pane>

src/app/modules/settings/page/settings-page.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018, 2019 StApps
+ * Copyright (C) 2018, 2019, 2020 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -80,7 +80,7 @@ export class SettingsPageComponent {
    */
   private async presentSettingsResetToast() {
     const toast = await this.toastController.create({
-      cssClass: 'text-center',
+      cssClass: 'ion-text-center',
       duration: 2000,
       message: this.translateService.instant('settings.resetToast.message'),
     });