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

Use scroll navigation for public decoration overview

pull/38/head
HardiReady 2018-08-04 16:53:58 +02:00
parent cdc2fb35ae
commit 447925b44f
11 changed files with 148 additions and 28 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 Normal file
View File

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

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

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

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

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

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

@ -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;
min-width: 927px;
max-width: 1396px;
min-width: 850px;
position: relative;
margin: auto auto 25px;
}

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

@ -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"
[decoration]="decoration"
<cc-decoration-navigation [decorations]="decorationsBlufor"
(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"
[decoration]="decoration"
<cc-decoration-navigation [decorations]="decorationsOpfor"
(select)="select($event)">
</cc-decoration-panel>
</cc-decoration-navigation>
</div>
<div class="fraction-global">
<h3>Global</h3>
<cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
[decoration]="decoration"
<div style="clear:both;">
<h3 style="color: #dedede">Global</h3>
<cc-decoration-navigation [decorations]="decorationsGlobal"
(select)="select($event)">
</cc-decoration-panel>
</cc-decoration-navigation>
</div>
</div>

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

@ -1,7 +1,7 @@
.decoration-card {
background: rgba(255, 255, 255, 0.87);
width: 150px;
height: 250px;
width: 200px;
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 {

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

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

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

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

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

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

2
static/src/app/statistic/war/war-list/war-list.component.css
View File

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

2
static/src/app/statistic/war/war-list/war-list.component.html
View File

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