From 447925b44faaef2bbb2e7e66631f9054b30d0aab Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 4 Aug 2018 16:53:58 +0200 Subject: [PATCH] Use scroll navigation for public decoration overview --- .../decoration-navigation.component.css | 28 +++++++++ .../decoration-navigation.component.html | 28 +++++++++ .../decoration-navigation.component.ts | 63 +++++++++++++++++++ .../decoration-overview.component.css | 7 ++- .../decoration-overview.component.html | 29 ++++----- .../decoration-panel.component.css | 6 +- static/src/app/pub/public.routing.ts | 3 +- .../rank-overview/rank-overview.component.ts | 7 +-- .../war/war-list/war-item.component.css | 1 + .../war/war-list/war-list.component.css | 2 + .../war/war-list/war-list.component.html | 2 +- 11 files changed, 148 insertions(+), 28 deletions(-) create mode 100644 static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.css create mode 100644 static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.html create mode 100644 static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.ts diff --git a/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.css b/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.css new file mode 100644 index 0000000..e06517d --- /dev/null +++ b/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; +} diff --git a/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.html b/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.html new file mode 100644 index 0000000..6a2ff3b --- /dev/null +++ b/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.html @@ -0,0 +1,28 @@ +
+
+
+
+ +
+ +
+ + +
+ +
+ +
+
+
+
diff --git a/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.ts b/static/src/app/pub/decoration-overview/decoration-navigation/decoration-navigation.component.ts new file mode 100644 index 0000000..9788a30 --- /dev/null +++ b/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; + + 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); + } +} diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.css b/static/src/app/pub/decoration-overview/decoration-overview.component.css index 9e62152..00abeae 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.css +++ b/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; - min-width: 927px; + max-width: 1396px; + min-width: 850px; position: relative; margin: auto auto 25px; } diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.html b/static/src/app/pub/decoration-overview/decoration-overview.component.html index 4d95372..afdbe33 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.html +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html @@ -1,27 +1,24 @@

Übersicht über alle Auszeichnungen

-
+

{{fraction.BLUFOR}}

- - + +
-
+

{{fraction.OPFOR}}

- - + +
-
-

Global

- - +
+

Global

+ +
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css index ac859f5..0e00af8 100644 --- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css +++ b/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; - 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 { diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts index 8e5837d..e8200f3 100644 --- a/static/src/app/pub/public.routing.ts +++ b/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]; diff --git a/static/src/app/pub/rank-overview/rank-overview.component.ts b/static/src/app/pub/rank-overview/rank-overview.component.ts index 537ca52..293cd2d 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.ts +++ b/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}}); } } diff --git a/static/src/app/statistic/war/war-list/war-item.component.css b/static/src/app/statistic/war/war-list/war-item.component.css index 3c5b7b5..d31d7ab 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.css +++ b/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; diff --git a/static/src/app/statistic/war/war-list/war-list.component.css b/static/src/app/statistic/war/war-list/war-list.component.css index 3468833..29d0fae 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.css +++ b/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; diff --git a/static/src/app/statistic/war/war-list/war-list.component.html b/static/src/app/statistic/war/war-list/war-list.component.html index 2337ff3..5bb9f91 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.html +++ b/static/src/app/statistic/war/war-list/war-list.component.html @@ -1,4 +1,4 @@ -
+