Refurbish card layout and functionalities for pub decoration overview

static/src/app/app.component.css

@@ -49,23 +49,15 @@ li {
 }
 
 #scrollTopBtn {
-  position: fixed; /* Fixed/sticky position */
+  position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
-  border: none;
+  background: rgba(16, 16, 16, 0.8);
-  outline: none;
-  background-color: #101010;
-  color: white;
-  font-weight: bolder;
-  cursor: pointer;
-  padding: 7px 25px 10px 25px;
-  border-radius: 20px;
-  font-size: 22px;
 }
 
 #scrollTopBtn:hover {
-  background-color: rgba(25, 142, 25, 1);
+  background: rgba(16, 16, 16);
 }
 
 .unprocessed {

static/src/app/app.component.html

@@ -133,4 +133,11 @@
 
 <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 
-<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>
+<button mat-icon-button
+        mat-mini-fab
+        id="scrollTopBtn"
+        *ngIf="scrollTopVisible"
+        matTooltip="Zum Seitenanfang"
+        (click)="scrollToTop()">
+  <mat-icon svgIcon="arrow-up"></mat-icon>
+</button>

static/src/app/app.component.ts

@@ -43,7 +43,8 @@ export class AppComponent implements OnInit {
     'delete': 'twotone-delete-24px',
     'stats-detail': 'round-assessment-24px',
     'chevron-left': 'baseline-chevron_left-24px',
-    'chevron-right': 'baseline-chevron_right-24px'
+    'chevron-right': 'baseline-chevron_right-24px',
+    'arrow-up': 'baseline-arrow_upward-24px'
   };
 
   version = 'v'.concat(require('./../../../package.json').version);

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

@@ -9,3 +9,32 @@ h3 {
 h1, h3 {
   text-align: center;
 }
+
+.decoration-overview-container {
+  max-width: 1782px;
+  min-width: 927px;
+  margin:auto;
+  position: relative;
+}
+
+.fraction-global {
+  display: flow-root;
+}
+
+.fraction-global > h3 {
+  color: #666666;
+}
+
+.fraction-left {
+  float: left;
+  width: 50%;
+  padding-right:81px;
+  margin-bottom: 135px;
+}
+
+.fraction-right {
+  float: right;
+  width: 50%;
+  padding-left:81px;
+  margin-bottom: 135px;
+}

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

@@ -1,21 +1,21 @@
-<div style="width: 1100px; margin:auto; position: relative;">
+<div class="decoration-overview-container">
   <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <div style="float:left;">
+  <div class="fraction-global">
+    <h3>Global</h3>
+    <cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
+                         [decoration]="decoration">
+    </cc-decoration-panel>
+  </div>
+
+  <div class="fraction-left">
     <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
     <cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
                          [decoration]="decoration">
     </cc-decoration-panel>
   </div>
 
-  <div style="float:left; margin-left: 2.5%;">
+  <div class="fraction-right">
-    <h3 style="color: #666666">Global</h3>
-    <cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
-                         [decoration]="decoration">
-    </cc-decoration-panel>
-  </div>
-
-  <div style="float:right;">
     <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
     <cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
                          [decoration]="decoration">

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

@@ -1,4 +1,62 @@
 .decoration-card {
-  max-width: 338px;
+  background: rgba(255, 255, 255, 0.87);
+  width: 150px;
+  height: 250px;
   margin: 6px;
+  padding: 0;
+  overflow: hidden;
+  float: left;
+}
+
+.decoration-card:hover {
+  background: #ffffff;
+  overflow: visible;
+  box-shadow: 0 0 18px 2px #666666;
+}
+
+.decoration-card:hover .decoration-description {
+  background: #ffffff;
+  position: relative;
+  z-index: 5;
+}
+
+.image-head {
+  height: 110px;
+  text-align: center;
+  padding: 12px;
+}
+
+.decoration-card .mat-card-content > div {
+  padding: 8px;
+}
+
+.decoration-card .mat-card-content > div:first-child {
+  color: white;
+  display: inherit;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+img.img-medal {
+  height: 100%;
+}
+
+img.img-ribbon {
+  padding-top: 20%;
+  width: 100%;
+}
+
+.gradient {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 24px;
+  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(255, 255, 255, 0.84)));
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
 }

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

@@ -1,16 +1,18 @@
 <mat-card class="decoration-card">
-  <mat-card-header>
+  <div class="image-head">
-    <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}}">
+         alt="{{decoration.name}}"
-    <p>
+         [class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
+  </div>
+  <mat-card-content>
+    <div [style.background]="decoration.fraction === 'BLUFOR' ?
+    fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+      {{decoration.name}}
+    </div>
+    <div class="decoration-description">
       {{decoration.description}}
-    </p>
+    </div>
+    <div class="gradient">
+    </div>
   </mat-card-content>
 </mat-card>

static/src/app/utils/fraction.enum.ts

@@ -1,11 +1,11 @@
 export enum Fraction {
   BLUFOR = 'NATO',
   OPFOR = 'CSAT',
-  COLOR_BLUFOR = '#0000FF',
+  COLOR_BLUFOR = '#3c5fa1',
   COLOR_BLUFOR_LIGHT = '#6666dd',
   COLOR_BLUFOR_DARK = '#0C0CA6',
   COLOR_BLUFOR_GREY = '#515179',
-  COLOR_OPFOR = '#B22222',
+  COLOR_OPFOR = '#a90100',
   COLOR_OPFOR_DARK = '#890F0F',
   COLOR_OPFOR_LIGHT = '#fb5555',
   COLOR_OPFOR_GREY = '#955c5f'

static/src/assets/icon/baseline-arrow_upward-24px.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+</svg>