Implement new award showcase
parent
8e70ca831f
commit
88861e595c
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
display: inline-block;
|
||||
:host /deep/ .mat-tab-header {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.fraction-global > h3 {
|
||||
color: #222222;
|
||||
:host /deep/ .mat-tab-list {
|
||||
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%;
|
||||
padding-right: 81px;
|
||||
margin-bottom: 70px;
|
||||
width: 10%;
|
||||
min-width: 100px;
|
||||
height: calc(100vh - 188px);
|
||||
background: #222222;;
|
||||
}
|
||||
|
||||
.fraction-right {
|
||||
float: right;
|
||||
width: 50%;
|
||||
padding-left: 81px;
|
||||
margin-bottom: 70px;
|
||||
.fraction-side-bar > div {
|
||||
text-align: center;
|
||||
padding: 12px 25px;
|
||||
margin-bottom: 15px;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,28 @@
|
|||
<div class="decoration-overview-container">
|
||||
<h1>Übersicht über alle Auszeichnungen</h1>
|
||||
|
||||
<div>
|
||||
<h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
|
||||
<cc-decoration-navigation [decorations]="decorationsBlufor"
|
||||
(select)="select($event)">
|
||||
</cc-decoration-navigation>
|
||||
<div class="fraction-side-bar">
|
||||
<div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
|
||||
<div [ngClass]="{active: active === 'OPFOR'}" (click)="switchFraction('OPFOR')">{{fraction.OPFOR}}</div>
|
||||
<div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>
|
||||
</div>
|
||||
|
||||
<div style="clear:both;">
|
||||
<h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
|
||||
<cc-decoration-navigation [decorations]="decorationsOpfor"
|
||||
(select)="select($event)">
|
||||
</cc-decoration-navigation>
|
||||
</div>
|
||||
|
||||
<div style="clear:both;">
|
||||
<h3 style="color: #dedede">Global</h3>
|
||||
<cc-decoration-navigation [decorations]="decorationsGlobal"
|
||||
(select)="select($event)">
|
||||
</cc-decoration-navigation>
|
||||
</div>
|
||||
<mat-tab-group>
|
||||
<mat-tab label="Orden">
|
||||
<ng-template matTabContent>
|
||||
<cc-decoration-panel *ngFor="let decoration of medals"
|
||||
[decoration]="decoration"
|
||||
(select)="select($event)">
|
||||
</cc-decoration-panel>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab label="Ordensbänder">
|
||||
<ng-template matTabContent>
|
||||
<cc-decoration-panel *ngFor="let decoration of ribbons"
|
||||
[decoration]="decoration"
|
||||
(select)="select($event)">
|
||||
</cc-decoration-panel>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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.decorationsGlobal = decorations.filter(d => d.fraction === 'GLOBAL');
|
||||
this.decorationsOpfor = decorations.filter(d => d.fraction === 'OPFOR');
|
||||
this.decorations = decorations;
|
||||
this.switchFraction('BLUFOR');
|
||||
});
|
||||
};
|
||||
|
||||
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}});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.decoration-card {
|
||||
background: rgba(255, 255, 255, 0.87);
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
margin: 6px;
|
||||
width: 229px;
|
||||
height: 258px;
|
||||
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%;
|
||||
width: 70%;
|
||||
padding-top: 10%;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.gradient {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue