feat: apply new layout overhaul

src/app/modules/data/detail/data-detail-content.component.ts

@@ -15,6 +15,7 @@
 import {Component, Input, TemplateRef} from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {DataListContext} from '../list/data-list.component';
+import {ModalController} from '@ionic/angular';
 
 /**
  * TODO
@@ -31,4 +32,10 @@ export class DataDetailContentComponent {
   @Input() item: SCThings;
 
   @Input() contentTemplateRef?: TemplateRef<DataListContext<SCThings>>;
+
+  @Input() openAsModal = false;
+
+  @Input() showModalHeader = false;
+
+  constructor(readonly modalController: ModalController) {}
 }

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

@@ -1,4 +1,15 @@
-<stapps-title-card [item]="item"> </stapps-title-card>
+<ion-header *ngIf="showModalHeader" translucent>
+  <ion-toolbar color="primary" mode="ios">
+    <ion-title>{{ 'name' | thingTranslate: item }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="modalController.dismiss()">{{
+        'app.ui.CLOSE' | translate
+      }}</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<stapps-title-card *ngIf="!showModalHeader" [item]="item"> </stapps-title-card>
 <ng-container
   *ngTemplateOutlet="
     contentTemplateRef || defaultContent;
@@ -60,6 +71,7 @@
     ></stapps-place-detail-content>
     <stapps-place-detail-content
       [item]="$any(item)"
+      [openAsModal]="openAsModal"
       *ngSwitchCase="'room'"
     ></stapps-place-detail-content>
     <stapps-semester-detail-content
@@ -73,10 +85,7 @@
     <ng-container *ngSwitchDefault>
       <ion-item class="ion-text-wrap" lines="inset">
         <ion-thumbnail slot="start" class="ion-margin-end">
-          <ion-icon
-            color="medium"
-            [attr.name]="item.type | dataIcon"
-          ></ion-icon>
+          <ion-icon color="dark" [attr.name]="item.type | dataIcon"></ion-icon>
         </ion-thumbnail>
         <ion-grid>
           <ion-row>

src/app/modules/data/detail/data-detail-content.scss

@@ -31,4 +31,22 @@
     padding-top: 0;
     padding-bottom: 0;
   }
+
+  > div {
+    padding: 0 var(--spacing-md);
+    background-color: var(--ion-color-light);
+
+    & > * {
+      display: block;
+      border-radius: var(--border-radius-default);
+      overflow: hidden;
+      position: relative;
+      top: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
+      background-color: var(--ion-color-primary-contrast);
+
+      & > ion-thumbnail {
+        background: var(--ion-color-primary);
+      }
+    }
+  }
 }

src/app/modules/data/detail/data-detail.component.ts

@@ -123,7 +123,7 @@ export class DataDetailComponent implements ViewWillEnter {
 
     this.isDisconnected = new Promise(async resolve => {
       const isConnected = (await Network.getStatus()).connected;
-      resolve(isConnected);
+      resolve(!isConnected);
     });
   }
 
@@ -167,7 +167,7 @@ export class DataDetailComponent implements ViewWillEnter {
         .get(uid)
         .pipe(take(1))
         .subscribe(item => {
-          if (typeof item !== undefined) {
+          if (typeof item !== 'undefined') {
             this.item = item;
           }
         });

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

@@ -14,18 +14,12 @@
   -->
 
 <ion-header *ngIf="defaultHeader">
-  <ion-toolbar color="primary">
+  <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start" *ngIf="!isModal">
       <ion-back-button
-        [defaultHref]="
-          item?.superCatalog
-            ? ['/data-detail', item.superCatalog.uid]
-            : item?.catalogs && item?.catalogs.length === 1
-            ? ['/data-detail', item.catalogs[0].uid]
-            : undefined
-        "
+        [defaultHref]="'..'"
+        [text]="'back' | translate | titlecase"
       ></ion-back-button>
-      <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons [slot]="isModal ? 'start' : 'primary'">