From 9dc21dd6c7a4fff20fe38627dd49d73dbb4ee8c8 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Wed, 27 Feb 2019 22:42:03 +0100 Subject: [PATCH] Reimplement selector components for stats to go responsive --- static/src/app/app.component.scss | 10 ++ .../decoration-overview.component.scss | 6 +- .../decoration-panel.component.scss | 5 +- .../rank-overview.component.scss | 2 + .../campaign-navigation.component.html | 72 +++++++---- .../campaign-navigation.component.scss | 24 +++- .../campaign-navigation.component.ts | 26 ++-- .../highscore/highscore.component.scss | 1 + .../overview/campaign-overview.component.scss | 12 +- static/src/app/statistic/stats.component.html | 12 +- static/src/app/statistic/stats.component.scss | 20 +-- static/src/app/statistic/stats.component.ts | 14 +-- static/src/app/statistic/stats.module.ts | 5 +- .../fraction-stats.component.scss | 15 +++ .../fraction-stats.component.ts | 2 + .../war/scoreboard/scoreboard.component.scss | 16 +++ .../war/scoreboard/scoreboard.component.ts | 12 +- .../server-stats/server-stats.component.scss | 9 ++ .../war/war-header/war-header.component.html | 12 +- .../war/war-header/war-header.component.scss | 39 ++++++ .../war/war-header/war-header.component.ts | 9 ++ .../war/war-list/war-list.component.html | 118 +++++++++++------- .../war/war-list/war-list.component.scss | 18 +++ .../war/war-list/war-list.component.ts | 21 ++++ 24 files changed, 356 insertions(+), 124 deletions(-) diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index 0c4c9ea..831ec73 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -22,4 +22,14 @@ mat-sidenav { &:hover { background: #101010; } + + @media all and (max-width: 959px) { + bottom: 0; + left: 0; + width: 100vw; + border-radius: 3px 3px 0 0; + background: #101010; + min-height: 34px; + height: 3vw; + } } diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.scss b/static/src/app/pub/decoration-overview/decoration-overview.component.scss index 2dff247..b2d32ad 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.scss +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.scss @@ -8,7 +8,7 @@ h1 { .decoration-overview-container { position: relative; z-index: 0; - margin: auto 140px 30px; + margin: auto 4vw 0; } @media all and (max-width: 959px) { @@ -73,6 +73,10 @@ h1 { background: #222222;; box-shadow: #666666 2px 2px 8px; + & > div:hover { + color: #ffffff; + } + @media all and (max-width: 959px) { width: 100%; height: 50px diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.scss b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.scss index 18b42d1..f3aa9a7 100644 --- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.scss +++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.scss @@ -52,8 +52,9 @@ img.img-medal { } img.img-ribbon { - padding-top: 10%; - width: 55%; + padding-top: 20px; + width: 60%; + max-width: 130px; } .gradient { diff --git a/static/src/app/pub/rank-overview/rank-overview.component.scss b/static/src/app/pub/rank-overview/rank-overview.component.scss index 4f3cfea..00573b8 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.scss +++ b/static/src/app/pub/rank-overview/rank-overview.component.scss @@ -22,6 +22,7 @@ h3 { margin-top: 0; + font-size: 18px; } .mat-column-picture { @@ -30,6 +31,7 @@ .mat-column-name { max-width: 7.5vw; + overflow: hidden; } td.mat-cell:first-child { diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html index 2d808ce..83a11d5 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.html @@ -1,23 +1,24 @@ -
- -
- -
-
- {{'stats.campaign.title.all.time.overview' | translate}} +
+
+
-
- {{campaign.title}} - + +
+
+ {{'stats.campaign.title.all.time.overview' | translate}} +
+
+ {{campaign.title}} +
+
+ +
+
-
- -
+
+ +
+ {{'stats.campaign.title.all.time.overview' | translate}} + {{selectedCampaign.title}} + +
+ + + + + + +
diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss index 1499fdd..d4f1a4a 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.scss @@ -6,7 +6,7 @@ } .scroll-btn-right { - top: 50px; + top: 0; left: calc(100vw - 50px); } @@ -36,10 +36,6 @@ float: left; background: #424242; color: #9d9d9d; - - @media all and (max-width: 959px) { - min-width: 33%; - } } .active { @@ -51,3 +47,21 @@ .campaign-entry:hover { border-bottom: 3px solid #ffd740; } + +.campaign-select-small { + background: #424242; + height: 3em; + color: #9d9d9d; + text-align: center; + border-bottom: 1px solid #9d9d9d; + + .select-menu-text { + font-size: 16px; + } +} + +:host /deep/ div.mat-list-item-content { + height: 100%; + padding: 10px; + cursor: pointer; +} diff --git a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts index 1884c34..aa511e1 100644 --- a/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts +++ b/static/src/app/statistic/campaign/campaign-navigation/campaign-navigation.component.ts @@ -1,12 +1,4 @@ -import { - Component, - ElementRef, - EventEmitter, - Input, - OnInit, - Output, - ViewChild -} from '@angular/core'; +import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild} from '@angular/core'; import {Campaign} from '../../../models/model-interfaces'; import {LoginService} from '../../../services/app-user-service/login-service'; import {Observable} from 'rxjs'; @@ -17,12 +9,14 @@ import {CampaignService} from '../../../services/logs/campaign.service'; templateUrl: './campaign-navigation.component.html', styleUrls: ['./campaign-navigation.component.scss'] }) -export class CampaignNavigationComponent implements OnInit { +export class CampaignNavigationComponent implements OnInit, OnChanges { campaigns$: Observable; @Input() selectedCampaignId; + @Input() isSmallLayout; + @Output() campaignSelect = new EventEmitter(); @Output() campaignEdit = new EventEmitter(); @@ -31,6 +25,8 @@ export class CampaignNavigationComponent implements OnInit { @ViewChild('horizontalList', {read: ElementRef}) public panel: ElementRef; + selectedCampaign; + isLeftScrollVisible = false; isRightScrollVisible = true; @@ -48,8 +44,18 @@ export class CampaignNavigationComponent implements OnInit { }); } + ngOnChanges() { + this.campaigns$.subscribe(campaigns => { + const campaignIdx = campaigns.findIndex(c => c._id === this.selectedCampaignId); + if (campaignIdx !== -1) { + this.selectedCampaign = campaigns[campaignIdx]; + } + }); + } + select(campaign) { if (campaign && campaign._id) { + this.selectedCampaign = campaign; this.selectedCampaignId = campaign._id; this.campaignSelect.emit(campaign); } diff --git a/static/src/app/statistic/campaign/highscore/highscore.component.scss b/static/src/app/statistic/campaign/highscore/highscore.component.scss index 4948a27..ad3685e 100644 --- a/static/src/app/statistic/campaign/highscore/highscore.component.scss +++ b/static/src/app/statistic/campaign/highscore/highscore.component.scss @@ -14,6 +14,7 @@ h2 { .search-field { width: 40%; + min-width: $highscore-table-width; margin: 50px 0 50px 8%; } diff --git a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss index 47af01c..244827d 100644 --- a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss +++ b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss @@ -4,21 +4,25 @@ height: 650px; margin: auto; padding-left: 5%; +} - @media all and (max-width: 959px) { +@media all and (max-width: 959px) { + .slide-chart-container { width: 100%; min-width: unset; padding-top: 105px; } -} -.chart-select-group { - @media all and (max-width: 959px) { + .chart-select-group { display: inline-grid; width: 70%; text-align: center; margin-left: 10%; } + + .chart-select-group /deep/ button.mat-button-toggle-button { + width: 100%; + } } mat-button-toggle.mat-button-toggle-checked { diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html index f40f096..4a1dfb3 100644 --- a/static/src/app/statistic/stats.component.html +++ b/static/src/app/statistic/stats.component.html @@ -1,20 +1,22 @@
-
+
+ [campaign]="selectedCampaign" + [isSmallLayout]="isSmallLayout"> -
+
-
+

{{'stats.scoreboard.participants' | translate}}

-
+
{{'stats.scoreboard.show.logs' | translate}} @@ -83,7 +83,9 @@ {{fraction.OPFOR}} - + {{'stats.scoreboard.download.csv' | translate}}
@@ -97,12 +99,14 @@ #scoreboard [war]="war" [fractionFilterSelected]="fractionFilterSelected" + [isSmallLayout]="isSmallLayout" (playerTabSwitch)="switchToPlayerTab($event)"> + [logData]="logData" + [isSmallLayout]="isSmallLayout"> li:last-child { + margin-left: 25px; + } + + div.btn-clean-log { + padding-left: 57px; + } +} diff --git a/static/src/app/statistic/war/war-header/war-header.component.ts b/static/src/app/statistic/war/war-header/war-header.component.ts index 9bcacc3..32bb852 100644 --- a/static/src/app/statistic/war/war-header/war-header.component.ts +++ b/static/src/app/statistic/war/war-header/war-header.component.ts @@ -6,6 +6,8 @@ import {ChartUtils} from '../../../utils/chart-utils'; import {Fraction} from '../../../utils/fraction.enum'; import {LogsService} from '../../../services/logs/logs.service'; import {ScoreboardComponent} from '../scoreboard/scoreboard.component'; +import {BaseConfig} from '../../../app.config'; +import {Observable} from 'rxjs'; @Component({ @@ -37,6 +39,8 @@ export class WarHeaderComponent implements OnInit { fractionFilterSelected: string; + isSmallLayout = false; + playerChart: any[] = []; colorScheme = { @@ -64,6 +68,11 @@ export class WarHeaderComponent implements OnInit { ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor); Object.assign(this, [this.playerChart]); }); + + this.isSmallLayout = window.innerWidth <= BaseConfig.responsive.breakpointPx; + Observable.fromEvent(window, 'resize').subscribe(event => { + this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx; + }); } switchTab(index: number) { 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 be50ca0..d09ccad 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,53 +1,79 @@ -
- - -
- -
-
-
+
+
+ +
- - {{'stats.sidebar.overview' | translate}} -
-
-
-
+
+
+
+
+ + {{'stats.sidebar.overview' | translate}}
- - {{'stats.sidebar.highscore' | translate}} -
-
- - {{'stats.sidebar.battles' | translate}} -
- -
-
- - +
+
+
+
+ + {{'stats.sidebar.highscore' | translate}}
-
+ +
+ + {{'stats.sidebar.battles' | translate}} +
+ +
+
+ + +
+
+
+ +
+ +
+ {{'stats.sidebar.highscore' | translate}} + {{'stats.sidebar.overview' | translate}} + {{selectedWar.title}} + +
+ + + + + + + +
diff --git a/static/src/app/statistic/war/war-list/war-list.component.scss b/static/src/app/statistic/war/war-list/war-list.component.scss index 5f9f2e6..da22424 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.scss +++ b/static/src/app/statistic/war/war-list/war-list.component.scss @@ -98,6 +98,24 @@ } } +.war-select-small { + background: #424242; + height: 3em; + color: #9d9d9d; + text-align: center; + + .select-menu-text { + font-size: 16px; + } +} + +:host /deep/ div.mat-list-item-content { + height: 100%; + padding: 10px; + cursor: pointer; +} + + /* Table Scrollbar BEGIN */ .battle-list::-webkit-scrollbar { diff --git a/static/src/app/statistic/war/war-list/war-list.component.ts b/static/src/app/statistic/war/war-list/war-list.component.ts index a97ccd7..fe6e749 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.ts +++ b/static/src/app/statistic/war/war-list/war-list.component.ts @@ -18,8 +18,12 @@ export class WarListComponent implements OnChanges { @Input() collapsed: boolean; + @Input() isSmallLayout: boolean; + selectedWarId: string | number; + selectedWar: War; + changeCount = 0; toolTipTranslation = {}; @@ -65,15 +69,30 @@ export class WarListComponent implements OnChanges { } else if (changes.campaign) { this.selectOverview(this.campaign._id); } + + this.fetchSelectedWar(this.selectedWarId); + } + + fetchSelectedWar(newSelect) { + this.campaign.wars$.subscribe(wars => { + const warIdx = wars.findIndex(w => w._id === newSelect); + if (warIdx !== -1) { + this.selectedWar = wars[warIdx]; + } else { + this.selectedWar = null; + } + }); } selectNewCampaign() { this.selectedWarId = null; + this.selectedWar = null; this.router.navigate([{outlets: {'right': ['campaign']}}], {relativeTo: this.route}); } selectWar(warId) { if (this.selectedWarId !== warId) { + this.fetchSelectedWar(warId); this.selectedWarId = warId; this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route}); } @@ -82,6 +101,7 @@ export class WarListComponent implements OnChanges { selectOverview(campaignId) { if (this.selectedWarId !== campaignId) { this.selectedWarId = campaignId; + this.selectedWar = null; this.router.navigate([{outlets: {'right': ['overview', campaignId]}}], {relativeTo: this.route}); } } @@ -89,6 +109,7 @@ export class WarListComponent implements OnChanges { selectHighscore(campaignId) { if (this.selectedWarId !== campaignId + this.highscore) { this.selectedWarId = campaignId + this.highscore; + this.selectedWar = null; this.router.navigate([{outlets: {'right': ['highscore', campaignId]}}], {relativeTo: this.route}); } }