feat: apply new layout overhaul

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

@@ -14,7 +14,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/hebis/hebis-detail/hebis-detail.html

@@ -1,31 +1,48 @@
+<!--
+  ~ Copyright (C) 2022 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.
+  ~
+  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~  more details.
+  ~
+  ~  You should have received a copy of the GNU General Public License along with
+  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
 <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-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons slot="primary">
       <stapps-favorite-button
         *ngIf="item"
-        [item]="item"
+        [item]="$any(item)"
       ></stapps-favorite-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
 <ion-content class="ion-no-padding">
   <div [ngSwitch]="true">
-    <ng-container *ngSwitchCase="!item && isDisconnected | async">
-      <div class="notFoundContainer">
-        <ion-icon name="no-connection"> </ion-icon>
+    <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
+      <div class="centeredMessageContainer">
+        <ion-icon name="no-connection"></ion-icon>
         <ion-label>
           {{ 'data.detail.COULD_NOT_CONNECT' | translate }}
         </ion-label>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="item === null">
-      <div class="notFoundContainer">
-        <ion-icon name="broken-link"> </ion-icon>
+      <div class="centeredMessageContainer">
+        <ion-icon name="broken-link"></ion-icon>
         <ion-label>
           {{ 'data.detail.NOT_FOUND' | translate }}
         </ion-label>

src/app/modules/hebis/hebis-routing.module.ts

@@ -19,6 +19,7 @@ import {HebisSearchPageComponent} from './list/hebis-search-page.component';
 
 const hebisRoutes: Routes = [
   {path: 'hebis-search', component: HebisSearchPageComponent},
+  {path: 'hebis-search/:term', component: HebisSearchPageComponent},
   {path: 'hebis-detail/:uid', component: HebisDetailComponent},
 ];
 

src/app/modules/hebis/list/hebis-search-page.component.ts

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input, OnInit, OnDestroy} from '@angular/core';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {AlertController} from '@ionic/angular';
 import {NGXLogger} from 'ngx-logger';
 import {combineLatest} from 'rxjs';
@@ -24,6 +24,7 @@ import {DataRoutingService} from '../../data/data-routing.service';
 import {SearchPageComponent} from '../../data/list/search-page.component';
 import {HebisDataProvider} from '../hebis-data.provider';
 import {PositionService} from '../../map/position.service';
+import {ConfigProvider} from '../../config/config.provider';
 
 /**
  * HebisSearchPageComponent queries things and shows list of things as search results and filter as context menu
@@ -31,6 +32,7 @@ import {PositionService} from '../../map/position.service';
 @Component({
   selector: 'stapps-hebissearch-page',
   templateUrl: 'hebis-search-page.html',
+  styleUrls: ['../../data/list/search-page.scss'],
 })
 export class HebisSearchPageComponent
   extends SearchPageComponent
@@ -56,7 +58,9 @@ export class HebisSearchPageComponent
    * @param logger An angular logger
    * @param dataRoutingService DataRoutingService
    * @param router Router
+   * @param route Active Route
    * @param positionService PositionService
+   * @param configProvider ConfigProvider
    */
   constructor(
     protected readonly alertController: AlertController,
@@ -66,7 +70,9 @@ export class HebisSearchPageComponent
     protected readonly logger: NGXLogger,
     protected dataRoutingService: DataRoutingService,
     protected router: Router,
+    route: ActivatedRoute,
     protected positionService: PositionService,
+    configProvider: ConfigProvider,
   ) {
     super(
       alertController,
@@ -76,7 +82,9 @@ export class HebisSearchPageComponent
       logger,
       dataRoutingService,
       router,
+      route,
       positionService,
+      configProvider,
     );
   }
 

src/app/modules/hebis/list/hebis-search-page.html

@@ -1,19 +1,19 @@
-<stapps-context contentId="data-list"></stapps-context>
 <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-buttons>
-    <ion-buttons slot="end">
-      <ion-menu-button menu="context" auto-hide="false">
-        <ion-icon name="options"></ion-icon>
-      </ion-menu-button>
+      <ion-back-button
+        [defaultHref]="'..'"
+        [text]="'back' | translate | titlecase"
+      ></ion-back-button>
     </ion-buttons>
+    <ion-title>{{ 'hebisSearch.title' | translate }}</ion-title>
+  </ion-toolbar>
+  <ion-toolbar color="primary" mode="ios">
     <ion-searchbar
       (ngModelChange)="searchStringChanged($event)"
       (keyup.enter)="hideKeyboard()"
       [(ngModel)]="queryText"
+      mode="md"
       placeholder="{{ 'hebisSearch.search_bar.placeholder' | translate }}"
       showClearButton="always"
       type="search"
@@ -21,6 +21,19 @@
     >
     </ion-searchbar>
   </ion-toolbar>
+  <ion-toolbar color="primary" class="category-tab" mode="ios">
+    <ion-buttons class="ion-justify-content-between">
+      <ion-button
+        [routerLink]="['/search/' + (queryText || '')]"
+        fill="outline"
+        size="large"
+        >{{ 'search.type' | translate }}
+      </ion-button>
+      <ion-button class="button-active" size="large">{{
+        'hebisSearch.type' | translate
+      }}</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
 </ion-header>
 
 <ion-content>