Switch to basic card layout for decorations

static/src/app/pub/decoration-overview/decoration-overview.component.css

@@ -1,42 +1,11 @@
-table {
-  width: 100%;
-  margin-bottom: 20px;
-}
-
-:host /deep/ table.mat-table {
-  background: rgba(255, 255, 255, 0.6);
-}
-
 h1 {
-  text-align: center;
   margin-bottom: 30px;
 }
 
-td > img {
+h3 {
-  margin: 5px 2px;
+  font-weight: bolder;
 }
 
-.mat-column-image {
+h1, h3 {
-  width: 160px;
+  text-align: center;
-}
-
-.mat-column-fraction {
-  width: 90px;
-  text-indent: 10px;
-}
-
-.mat-column-description {
-  width: 55%;
-}
-
-tr.mat-row:hover {
-  background: rgba(231, 231, 231, 0.6);
-}
-
-:host /deep/ table.fixed-header-table > thead {
-  position: fixed;
-  display: inherit;
-  width: 1100px;
-  background: white;
-  top: 50px;
 }

static/src/app/pub/decoration-overview/decoration-overview.component.html

@@ -1,44 +1,24 @@
 <div style="width: 1100px; margin:auto; position: relative;">
   <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <table mat-table
+  <div style="float:left;">
-         [dataSource]="rows"
+    <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
-         [class.fixed-header-table]="hasFixedTableHeader"
+    <cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
-         class="mat-elevation-z8">
+                         [decoration]="decoration">
-
+    </cc-decoration-panel>
-    <ng-container matColumnDef="{{columnMap[0].prop}}">
+  </div>
-      <th mat-header-cell *matHeaderCellDef>{{columnMap[0].head}}</th>
+
-      <td mat-cell *matCellDef="let element">
+  <div style="float:left; margin-left: 2.5%;">
-        <img src="resource/decoration/{{element._id}}.png"
+    <h3 style="color: #666666">Global</h3>
-             matTooltip="{{element.name}}"
+    <cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
-             alt="{{element.name}}">
+                         [decoration]="decoration">
-      </td>
+    </cc-decoration-panel>
-    </ng-container>
+  </div>
-
+
-    <ng-container matColumnDef="{{columnMap[1].prop}}">
+  <div style="float:right;">
-      <th mat-header-cell *matHeaderCellDef>{{columnMap[1].head}}</th>
+    <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
-      <td mat-cell *matCellDef="let element">{{element[columnMap[1].prop]}}</td>
+    <cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
-    </ng-container>
+                         [decoration]="decoration">
-
+    </cc-decoration-panel>
-    <ng-container matColumnDef="{{columnMap[2].prop}}">
+  </div>
-      <th mat-header-cell *matHeaderCellDef>{{columnMap[2].head}}</th>
-      <td mat-cell *matCellDef="let element"
-          [style.color]="element['fraction'] === 'BLUFOR' ?
-           fraction.COLOR_BLUFOR :
-            element['fraction'] === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
-        {{element[columnMap[2].prop] === 'BLUFOR'?
-        'NATO' :
-        element[columnMap[2].prop] === 'OPFOR' ? 'CSAT' : 'GLOBAL'}}
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="{{columnMap[3].prop}}">
-      <th mat-header-cell *matHeaderCellDef>{{columnMap[3].head}}</th>
-      <td mat-cell *matCellDef="let element">{{element[columnMap[3].prop]}}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
-
 </div>

static/src/app/pub/decoration-overview/decoration-overview.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 import {DOCUMENT} from '@angular/common';
@@ -16,18 +16,11 @@ import {DecorationService} from '../../services/army-management/decoration.servi
 })
 export class DecorationOverviewComponent implements OnInit, OnDestroy {
 
-  rows: Decoration[];
+  decorationsBlufor: Decoration[];
 
-  columnMap = [
+  decorationsGlobal: Decoration[];
-    {prop: 'image', head: 'Abbildung'},
-    {prop: 'name', head: 'Bezeichnung'},
-    {prop: 'fraction', head: 'Fraktion'},
-    {prop: 'description', head: 'Beschreibung'}
-    ];
 
-  displayedColumns = this.columnMap.map(col => col.prop);
+  decorationsOpfor: Decoration[];
-
-  tableHeaderFixedVal = 100;
 
   hasFixedTableHeader = false;
 
@@ -46,16 +39,12 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
     // init decoration data
     this.decorationService.findDecorations()
         .subscribe(decorations => {
-          this.rows = decorations;
+          this.decorationsBlufor = decorations.filter(d => d.fraction === 'BLUFOR');
+          this.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
+          this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
         });
   };
 
-  @HostListener('window:scroll', [])
-  onWindowScroll() {
-    this.hasFixedTableHeader = document.body.scrollTop > this.tableHeaderFixedVal
-      || document.documentElement.scrollTop > this.tableHeaderFixedVal;
-  }
-
   ngOnDestroy() {
     if (!this.router.url.includes(RouteConfig.overviewPath)) {
       this.document.getElementById('right').setAttribute('style', '');

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css

@@ -0,0 +1,4 @@
+.decoration-card {
+  max-width: 338px;
+  margin: 6px;
+}

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html

@@ -0,0 +1,16 @@
+<mat-card class="decoration-card">
+  <mat-card-header>
+    <mat-card-title>{{decoration.name}}</mat-card-title>
+    <mat-card-subtitle
+      [style.color]="decoration.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+      {{decoration.fraction === 'BLUFOR'? fraction.BLUFOR : decoration.fraction === 'OPFOR' ? fraction.OPFOR : 'GLOBAL'}}
+    </mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <img src="resource/decoration/{{decoration._id}}.png"
+         alt="{{decoration.name}}">
+    <p>
+      {{decoration.description}}
+    </p>
+  </mat-card-content>
+</mat-card>

static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+
+import {Decoration} from '../../../models/model-interfaces';
+import {Fraction} from '../../../utils/fraction.enum';
+
+
+@Component({
+  selector: 'cc-decoration-panel',
+  templateUrl: './decoration-panel.component.html',
+  styleUrls: ['./decoration-panel.component.css']
+})
+export class DecorationPanelComponent {
+
+   @Input() decoration: Decoration;
+
+  readonly fraction = Fraction;
+
+  constructor() {
+  }
+}

static/src/app/pub/public.module.ts

@@ -5,12 +5,11 @@ import {RankService} from '../services/army-management/rank.service';
 import {pubRouterModule, pubRoutingComponents} from './public.routing';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {MatTableModule} from '@angular/material/table';
-import {MatSortModule} from '@angular/material';
+import {MatCardModule} from '@angular/material/card';
-
 
 @NgModule({
   declarations: pubRoutingComponents,
-  imports: [CommonModule, SharedModule, MatTableModule, pubRouterModule],
+  imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, pubRouterModule],
   providers: [DecorationService, RankService]
 })
 export class PublicModule {

static/src/app/pub/public.routing.ts

@@ -3,6 +3,7 @@ import {RankOverviewComponent} from './rank-overview/rank-overview.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
 import {PublicComponent} from './public.component';
+import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
 
 export const publicRoutes: Routes = [
   {
@@ -19,5 +20,6 @@ export const publicRoutes: Routes = [
 
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
-export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent];
+export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
+  DecorationPanelComponent];