Use scroll navigation for public decoration overview

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

@@ -0,0 +1,28 @@
+.scroll-btn {
+  cursor: pointer;
+  float: left;
+}
+
+.scroll-btn mat-icon {
+  height: 314px;
+  width: 63px;
+  color: white;
+}
+
+.scroll-btn-placeholder {
+  display: block;
+  height: 314px;
+  width: 62px;
+}
+
+.decoration-horizontal-list {
+  height: 314px;
+  width: 95%;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  float: left;
+  background: rgba(193, 193, 193, 0.29);
+  box-shadow: #666666 1px 1px 4px;
+}

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

@@ -0,0 +1,28 @@
+<div style="width: 100%; display:flex;">
+  <div class="scroll-btn-placeholder"
+       *ngIf="!isLeftScrollVisible">
+  </div>
+  <div class="scroll-btn"
+       *ngIf="isLeftScrollVisible"
+       (mouseenter)="setRepeater(-10)"
+       (mouseleave)="clearRepeater()">
+    <mat-icon svgIcon="chevron-left"></mat-icon>
+  </div>
+
+  <div class="decoration-horizontal-list" #horizontalList>
+    <cc-decoration-panel *ngFor="let decoration of decorations"
+                         [decoration]="decoration"
+                         (select)="selectDecoration($event)">
+    </cc-decoration-panel>
+  </div>
+
+  <div class="scroll-btn"
+       *ngIf="isRightScrollVisible"
+       (mouseenter)="setRepeater(10)"
+       (mouseleave)="clearRepeater()">
+    <mat-icon svgIcon="chevron-right"></mat-icon>
+  </div>
+  <div class="scroll-btn-placeholder"
+       *ngIf="!isRightScrollVisible">
+  </div>
+</div>

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

@@ -0,0 +1,63 @@
+import {Component, ElementRef, EventEmitter, Input, OnChanges, Output, ViewChild} from '@angular/core';
+
+import {Decoration} from '../../../models/model-interfaces';
+
+
+@Component({
+  selector: 'cc-decoration-navigation',
+  templateUrl: './decoration-navigation.component.html',
+  styleUrls: ['./decoration-navigation.component.css']
+})
+export class DecorationNavigationComponent implements OnChanges {
+
+  @Input() decorations: Decoration[];
+
+  @Output() select = new EventEmitter();
+
+  @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef<any>;
+
+  isLeftScrollVisible = false;
+
+  isRightScrollVisible = true;
+
+  repeater;
+
+  ngOnChanges() {
+    this.isRightScrollVisible = this.decorations.length > 6;
+  }
+
+  public scrollList(scrollValue: number): void {
+    const prevScrollLeftValue = this.panel.nativeElement.scrollLeft;
+
+    this.panel.nativeElement.scrollLeft += scrollValue;
+
+    const updatedScrollLeftValue = this.panel.nativeElement.scrollLeft;
+
+    if (scrollValue < 0) {
+      this.isRightScrollVisible = true;
+    }
+
+    if (updatedScrollLeftValue > 0) {
+      if (prevScrollLeftValue === updatedScrollLeftValue) {
+        this.isRightScrollVisible = false;
+        this.clearRepeater();
+      }
+      this.isLeftScrollVisible = true;
+    } else {
+      this.isLeftScrollVisible = false;
+      this.clearRepeater();
+    }
+  }
+
+  setRepeater(value: number) {
+    this.repeater = setInterval(() => this.scrollList(value), 20);
+  }
+
+  clearRepeater() {
+    clearInterval(this.repeater)
+  }
+
+  selectDecoration($event) {
+    this.select.emit($event);
+  }
+}

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

@@ -19,6 +19,9 @@ h1 {
 
 h3 {
   font-weight: bolder;
+  background: rgba(34, 34, 34, 0.87);
+  padding: 4px 0;
+  border-radius: 7px;
 }
 
 h1, h3 {
@@ -26,8 +29,8 @@ h1, h3 {
 }
 
 .decoration-overview-container {
-  max-width: 1782px;
+  max-width: 1396px;
-  min-width: 927px;
+  min-width: 850px;
   position: relative;
   margin: auto auto 25px;
 }

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

@@ -1,27 +1,24 @@
 <div class="decoration-overview-container">
   <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <div class="fraction-left">
+  <div>
     <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
-    <cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
+    <cc-decoration-navigation [decorations]="decorationsBlufor"
-                         [decoration]="decoration"
                               (select)="select($event)">
-    </cc-decoration-panel>
+    </cc-decoration-navigation>
   </div>
 
-  <div class="fraction-right">
+  <div style="clear:both;">
     <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
-    <cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
+    <cc-decoration-navigation [decorations]="decorationsOpfor"
-                         [decoration]="decoration"
                               (select)="select($event)">
-    </cc-decoration-panel>
+    </cc-decoration-navigation>
   </div>
 
-  <div class="fraction-global">
+  <div style="clear:both;">
-    <h3>Global</h3>
+    <h3 style="color: #dedede">Global</h3>
-    <cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
+    <cc-decoration-navigation [decorations]="decorationsGlobal"
-                         [decoration]="decoration"
                               (select)="select($event)">
-    </cc-decoration-panel>
+    </cc-decoration-navigation>
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 .decoration-card {
   background: rgba(255, 255, 255, 0.87);
-  width: 150px;
+  width: 200px;
-  height: 250px;
+  height: 300px;
   margin: 6px;
   padding: 0;
   overflow: hidden;
@@ -48,7 +48,7 @@ img.img-medal {
 
 img.img-ribbon {
   padding-top: 20%;
-  width: 100%;
+  width: 70%;
 }
 
 .gradient {

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

@@ -5,6 +5,7 @@ import {DecorationOverviewComponent} from './decoration-overview/decoration-over
 import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
 import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
+import {DecorationNavigationComponent} from './decoration-overview/decoration-navigation/decoration-navigation.component';
 
 export const publicRoutes: Routes = [
   {
@@ -25,5 +26,5 @@ export const publicRoutes: Routes = [
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
 export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
-  RankPanelComponent, UserListSheetComponent];
+  RankPanelComponent, UserListSheetComponent, DecorationNavigationComponent];
 

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

@@ -1,9 +1,6 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from '../../utils/global.helpers';
-import {RouteConfig} from '../../app.config';
 import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {MatBottomSheet} from '@angular/material';
@@ -41,6 +38,6 @@ export class RankOverviewComponent implements OnInit {
   };
 
   selectRow(rank: Rank) {
-    this.bottomSheet.open(UserListSheetComponent, {data: { rank: rank }});
+    this.bottomSheet.open(UserListSheetComponent, {data: {rank: rank}});
   }
 }

static/src/app/statistic/war/war-list/war-item.component.css

@@ -27,6 +27,7 @@
   background: -moz-linear-gradient(45deg, white 50%, transparent 50%);
   background: -webkit-linear-gradient(45deg, white 50%, transparent 50%);
   background: linear-gradient(45deg, white 50%, transparent 50%);
+  box-shadow: inset 8px -6px 5px -7px #a5a5a5;
   cursor: default;
   border-left: 1px solid #dadada;
   border-bottom: 1px solid #dadada;

static/src/app/statistic/war/war-list/war-list.component.css

@@ -1,6 +1,7 @@
 .list-header {
   border-bottom: 1px solid #dadada;
   border-right: 1px solid #dadada;
+  border-left: 4px solid transparent;
   padding: 25px;
   font-size: 16px;
   text-transform: uppercase;
@@ -28,6 +29,7 @@
   background: -moz-linear-gradient(45deg, white 50%, transparent 50%);
   background: -webkit-linear-gradient(45deg, white 50%, transparent 50%);
   background: linear-gradient(45deg, white 50%, transparent 50%);
+  box-shadow: inset 8px -6px 5px -7px #a5a5a5;
   cursor: default;
   border-left: 1px solid #dadada;
   border-bottom: 1px solid #dadada;

static/src/app/statistic/war/war-list/war-list.component.html

@@ -1,4 +1,4 @@
-<div class="war-list-header" *ngIf="loginService.hasPermission(3)">
+<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
   <button mat-stroked-button (click)="selectNewWar()">
     Schlacht hinzufügen
   </button>