hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Implement new award showcase

pull/38/head
HardiReady 2018-08-09 22:07:47 +02:00
parent 8e70ca831f
commit 88861e595c
10 changed files with 109 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

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

@ -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>

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

@ -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);
}
}

89
static/src/app/pub/decoration-overview/decoration-overview.component.css
View File

@ -1,7 +1,6 @@
:host { :host {
display: flow-root; display: flow-root;
height: 100%; height: 100%;
min-height: 100vh;
width: 100%; width: 100%;
margin-top: -23px; margin-top: -23px;
padding-top: 23px; padding-top: 23px;
@ -15,44 +14,80 @@
h1 { h1 {
margin-bottom: 30px; 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; text-align: center;
} }
.decoration-overview-container { .decoration-overview-container {
max-width: 1396px;
min-width: 850px;
position: relative; 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; 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;
} }

36
static/src/app/pub/decoration-overview/decoration-overview.component.html
View File

@ -1,24 +1,28 @@
<div class="decoration-overview-container"> <div class="decoration-overview-container">
<h1>Übersicht über alle Auszeichnungen</h1> <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>
<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>
<cc-decoration-panel *ngFor="let decoration of medals"
[decoration]="decoration"
(select)="select($event)"> (select)="select($event)">
</cc-decoration-navigation> </cc-decoration-panel>
</div> </ng-template>
</mat-tab>
<div style="clear:both;"> <mat-tab label="Ordensbänder">
<h3 style="color: #dedede">Global</h3> <ng-template matTabContent>
<cc-decoration-navigation [decorations]="decorationsGlobal" <cc-decoration-panel *ngFor="let decoration of ribbons"
[decoration]="decoration"
(select)="select($event)"> (select)="select($event)">
</cc-decoration-navigation> </cc-decoration-panel>
</div> </ng-template>
</mat-tab>
</mat-tab-group>
</div> </div>

19
static/src/app/pub/decoration-overview/decoration-overview.component.ts
View File

@ -15,13 +15,13 @@ import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.compone
}) })
export class DecorationOverviewComponent implements OnInit { export class DecorationOverviewComponent implements OnInit {
decorationsBlufor: Decoration[]; decorations: Decoration[];
decorationsGlobal: Decoration[]; medals: Decoration[];
decorationsOpfor: Decoration[]; ribbons: Decoration[];
hasFixedTableHeader = false; active: string;
readonly fraction = Fraction; readonly fraction = Fraction;
@ -35,12 +35,17 @@ export class DecorationOverviewComponent implements OnInit {
// init decoration data // init decoration data
this.decorationService.findDecorations() this.decorationService.findDecorations()
.subscribe(decorations => { .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) { select(decoration: Decoration) {
this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}}); this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
} }

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

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

3
static/src/app/pub/public.module.ts
View File

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

3
static/src/app/pub/public.routing.ts
View File

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

5
static/src/app/pub/rank-overview/rank-overview.component.css
View File

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