static/src/app/app.component.css

@@ -49,15 +49,23 @@ li {
 }
 
 #scrollTopBtn {
-  position: fixed;
+  position: fixed; /* Fixed/sticky position */
   bottom: 20px;
   right: 30px;
   z-index: 99;
-  background: rgba(16, 16, 16, 0.8);
+  border: none;
+  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: rgba(16, 16, 16);
+  background-color: rgba(25, 142, 25, 1);
 }
 
 .unprocessed {

static/src/app/app.component.html

@@ -133,11 +133,4 @@
 
 <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 
-<button mat-icon-button
+<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</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,8 +43,7 @@ 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/army/army-member/army-member.component.css

@@ -39,7 +39,3 @@ tbody {
 .cell-outline {
   outline: 1px solid #D4D4D4;
 }
-
-tr.cell-outline:hover {
-  background-color: #ffffff;
-}

static/src/app/army/army-member/army-member.component.html

@@ -21,33 +21,33 @@
 
     <div class="pull-left" style="margin-top:20px;">
       <div class="table-container" style="min-width: 500px">
-        <table class="table">
+        <table class="table table-hover">
           <thead>
-            <tr class="table-head">
+          <tr class="table-head">
-              <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
+            <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
-              <th class="col-sm-2">Bezeichnung</th>
+            <th class="col-sm-2">Bezeichnung</th>
-              <th class="col-sm-2">Begründung</th>
+            <th class="col-sm-2">Begründung</th>
-              <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
+            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
-            </tr>
+          </tr>
           </thead>
           <tbody *ngFor="let award of awards">
-            <tr *ngIf="award.confirmed === 1" class="cell-outline">
+          <tr *ngIf="award.confirmed === 1" class="cell-outline">
-              <td class="text-center" *ngIf="award.decorationId.isMedal">
+            <td class="text-center" *ngIf="award.decorationId.isMedal">
-                <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
+              <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
-              </td>
+            </td>
-              <td class="text-center" *ngIf="!award.decorationId.isMedal">
+            <td class="text-center" *ngIf="!award.decorationId.isMedal">
-                <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
+              <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
-              </td>
+            </td>
-              <td style="font-weight: bold">
+            <td style="font-weight: bold">
-                {{award.decorationId.name}}
+              {{award.decorationId.name}}
-              </td>
+            </td>
-              <td>
+            <td>
-                {{award.reason}}
+              {{award.reason}}
-              </td>
+            </td>
-              <td class="text-right">
+            <td class="text-right">
-                <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
+              <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
-              </td>
+            </td>
-            </tr>
+          </tr>
           </tbody>
         </table>
       </div>

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

@@ -9,32 +9,3 @@ 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 class="decoration-overview-container">
+<div style="width: 1100px; margin:auto; position: relative;">
   <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <div class="fraction-global">
+  <div style="float:left;">
-    <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 class="fraction-right">
+  <div style="float:left; margin-left: 2.5%;">
+    <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,62 +1,4 @@
 .decoration-card {
-  background: rgba(255, 255, 255, 0.87);
+  max-width: 338px;
-  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,18 +1,16 @@
 <mat-card class="decoration-card">
-  <div class="image-head">
+  <mat-card-header>
-    <img src="resource/decoration/{{decoration._id}}.png"
+    <mat-card-title>{{decoration.name}}</mat-card-title>
-         alt="{{decoration.name}}"
+    <mat-card-subtitle
-         [class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
+      [style.color]="decoration.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
-  </div>
+      {{decoration.fraction === 'BLUFOR'? fraction.BLUFOR : decoration.fraction === 'OPFOR' ? fraction.OPFOR : 'GLOBAL'}}
+    </mat-card-subtitle>
+  </mat-card-header>
   <mat-card-content>
-    <div [style.background]="decoration.fraction === 'BLUFOR' ?
+    <img src="resource/decoration/{{decoration._id}}.png"
-    fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+         alt="{{decoration.name}}">
-      {{decoration.name}}
+    <p>
-    </div>
-    <div class="decoration-description">
       {{decoration.description}}
-    </div>
+    </p>
-    <div class="gradient">
-    </div>
   </mat-card-content>
 </mat-card>

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

@@ -6,10 +6,6 @@ table {
   background: rgba(255, 255, 255, 0.6);
 }
 
-:host /deep/ tr.mat-row:hover {
-  background: #ffffff;
-}
-
 td > img {
   height: 120px;
   padding: 8px;
@@ -21,7 +17,6 @@ h1, h3 {
 
 h3 {
   font-weight: bolder;
-  margin-bottom: 20px;
 }
 
 .column-container {

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

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

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

@@ -1,4 +0,0 @@
-<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>