Implement new award showcase

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

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

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

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

@@ -1,7 +1,6 @@
 :host {
   display: flow-root;
   height: 100%;
-  min-height: 100vh;
   width: 100%;
   margin-top: -23px;
   padding-top: 23px;
@@ -15,44 +14,80 @@
 
 h1 {
   margin-bottom: 30px;
-}
-
-h3 {
-  font-weight: bolder;
-  background: rgba(34, 34, 34, 0.87);
-  padding: 4px 0;
-  border-radius: 7px;
-}
-
-h1, h3 {
   text-align: center;
 }
 
 .decoration-overview-container {
-  max-width: 1396px;
-  min-width: 850px;
   position: relative;
-  margin: auto auto 25px;
+  margin: auto 140px 30px;
 }
 
-.fraction-global {
+:host /deep/ .mat-tab-header {
-  display: inline-block;
+  background-color: #222222;
 }
 
-.fraction-global > h3 {
+:host /deep/ .mat-tab-list {
-  color: #222222;
+  margin-left: 10%;
 }
 
-.fraction-left {
+:host /deep/ .mat-tab-label {
+  font-size: 16px;
+  color: #dadada;
+}
+
+:host /deep/ .mat-tab-group.mat-primary .mat-ink-bar {
+  background-color: #ffd740;
+}
+
+:host /deep/ .mat-tab-group.mat-primary .mat-tab-label:not(.mat-tab-disabled):focus {
+  background-color: #222222;
+}
+
+:host /deep/ .mat-tab-body-content {
+  background-color: rgba(255, 255, 255, 0.35);
+  height: calc(100vh - 241px);
+  min-width: 560px;
+  padding: 1em 1.5em;
+}
+
+.fraction-side-bar {
   float: left;
-  width: 50%;
+  width: 10%;
-  padding-right: 81px;
+  min-width: 100px;
-  margin-bottom: 70px;
+  height: calc(100vh - 188px);
+  background: #222222;;
 }
 
-.fraction-right {
+.fraction-side-bar > div {
-  float: right;
+  text-align: center;
-  width: 50%;
+  padding: 12px 25px;
-  padding-left: 81px;
+  margin-bottom: 15px;
-  margin-bottom: 70px;
+  font-size: 16px;
+  color: #666;
+  cursor: pointer;
+  border-top: 1px solid #666666;
+  border-bottom: 1px solid #666666;
+}
+
+.fraction-side-bar > div:first-child {
+  margin-top: 100%;
+}
+
+.fraction-side-bar > div.active {
+  background-color: #080808;
+  color: white;
+}
+
+/* SCROLL BAR */
+
+:host /deep/ .mat-tab-body-content::-webkit-scrollbar {
+  width: 12px;
+}
+
+:host /deep/ .mat-tab-body-content::-webkit-scrollbar-track {
+  border-left: 1px solid #080808;
+}
+
+:host /deep/ .mat-tab-body-content::-webkit-scrollbar-thumb {
+  background: #222222;
 }

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

@@ -1,24 +1,28 @@
 <div class="decoration-overview-container">
   <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <div>
+  <div class="fraction-side-bar">
-    <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+    <div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
-    <cc-decoration-navigation [decorations]="decorationsBlufor"
+    <div [ngClass]="{active: active === 'OPFOR'}" (click)="switchFraction('OPFOR')">{{fraction.OPFOR}}</div>
-                              (select)="select($event)">
+    <div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>
-    </cc-decoration-navigation>
   </div>
 
-  <div style="clear:both;">
+  <mat-tab-group>
-    <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+    <mat-tab label="Orden">
-    <cc-decoration-navigation [decorations]="decorationsOpfor"
+      <ng-template matTabContent>
-                              (select)="select($event)">
+        <cc-decoration-panel *ngFor="let decoration of medals"
-    </cc-decoration-navigation>
+                             [decoration]="decoration"
-  </div>
+                             (select)="select($event)">
-
+        </cc-decoration-panel>
-  <div style="clear:both;">
+      </ng-template>
-    <h3 style="color: #dedede">Global</h3>
+    </mat-tab>
-    <cc-decoration-navigation [decorations]="decorationsGlobal"
+    <mat-tab label="Ordensbänder">
-                              (select)="select($event)">
+      <ng-template matTabContent>
-    </cc-decoration-navigation>
+        <cc-decoration-panel *ngFor="let decoration of ribbons"
-  </div>
+                             [decoration]="decoration"
+                             (select)="select($event)">
+        </cc-decoration-panel>
+      </ng-template>
+    </mat-tab>
+  </mat-tab-group>
 </div>

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

@@ -15,13 +15,13 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
 })
 export class DecorationOverviewComponent implements OnInit {
 
-  decorationsBlufor: Decoration[];
+  decorations: Decoration[];
 
-  decorationsGlobal: Decoration[];
+  medals: Decoration[];
 
-  decorationsOpfor: Decoration[];
+  ribbons: Decoration[];
 
-  hasFixedTableHeader = false;
+  active: string;
 
   readonly fraction = Fraction;
 
@@ -35,12 +35,17 @@ export class DecorationOverviewComponent implements OnInit {
     // init decoration data
     this.decorationService.findDecorations()
         .subscribe(decorations => {
-          this.decorationsBlufor = decorations.filter(d => d.fraction === 'BLUFOR');
+          this.decorations = decorations;
-          this.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
+          this.switchFraction('BLUFOR');
-          this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
         });
   };
 
+  switchFraction(value: string) {
+    this.medals = this.decorations.filter(d => d.fraction === value && d.isMedal);
+    this.ribbons = this.decorations.filter(d => d.fraction === value && !d.isMedal);
+    this.active = value;
+  }
+
   select(decoration: Decoration) {
     this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
   }

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

@@ -1,8 +1,8 @@
 .decoration-card {
   background: rgba(255, 255, 255, 0.87);
-  width: 200px;
+  width: 229px;
-  height: 300px;
+  height: 258px;
-  margin: 6px;
+  margin: 7px 12px;
   padding: 0;
   overflow: hidden;
   float: left;
@@ -26,7 +26,7 @@
 }
 
 .image-head {
-  height: 110px;
+  height: 100px;
   text-align: center;
   padding: 12px;
 }
@@ -47,8 +47,8 @@ img.img-medal {
 }
 
 img.img-ribbon {
-  padding-top: 20%;
+  padding-top: 10%;
-  width: 70%;
+  width: 55%;
 }
 
 .gradient {

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

@@ -8,13 +8,14 @@ import {MatTableModule} from '@angular/material/table';
 import {MatCardModule} from '@angular/material/card';
 import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
 import {MatListModule} from '@angular/material/list';
+import {MatTabsModule} from '@angular/material/tabs';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
 
 @NgModule({
   declarations: pubRoutingComponents,
   entryComponents: [UserListSheetComponent],
   imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, MatBottomSheetModule, MatListModule,
-    pubRouterModule],
+    MatTabsModule, pubRouterModule],
   providers: [DecorationService, RankService]
 })
 export class PublicModule {

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

@@ -5,7 +5,6 @@ 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 = [
   {
@@ -26,5 +25,5 @@ export const publicRoutes: Routes = [
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
 export const pubRoutingComponents = [RankOverviewComponent, DecorationOverviewComponent, DecorationPanelComponent,
-  RankPanelComponent, UserListSheetComponent, DecorationNavigationComponent];
+  RankPanelComponent, UserListSheetComponent];
 

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

@@ -37,7 +37,10 @@ h1, h3 {
 
 h3 {
   font-weight: bolder;
-  margin-bottom: 20px;
+  padding-bottom: 14px;
+  padding-top: 11px;
+  margin-bottom: 0;
+  background: #222222;
 }
 
 .column-container {