diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 8393bea..3c61242 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -14,7 +14,7 @@ -
+
diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index 0a1a3e7..1af4253 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -1,9 +1,9 @@ @import "style/load-indicator.scss"; mat-sidenav-container, mat-sidenav-content, mat-sidenav { - height: 100vh; + height: calc(100vh - 50px); + min-height: fit-content; display: inline; - background: #fdfdfd; } mat-sidenav { @@ -12,6 +12,12 @@ mat-sidenav { width: 250px; } +.app-content-container { + overflow-x: auto; + position: relative; + min-height: calc(100vh - 50px) +} + #scrollTopBtn { position: fixed; bottom: 20px; @@ -22,4 +28,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/app.config.ts b/static/src/app/app.config.ts index 9499120..ec695f6 100644 --- a/static/src/app/app.config.ts +++ b/static/src/app/app.config.ts @@ -44,6 +44,7 @@ export const RouteConfig = { export const BaseConfig = { responsive: { + breakpointSmallPx: 599, breakpointPx: 959, }, i18n: { diff --git a/static/src/app/army/army-squad/army-squad.component.scss b/static/src/app/army/army-squad/army-squad.component.scss index d00e68e..f150a4b 100644 --- a/static/src/app/army/army-squad/army-squad.component.scss +++ b/static/src/app/army/army-squad/army-squad.component.scss @@ -3,6 +3,21 @@ padding: 6px 0; } +@media all and (max-width: 599px) { + .squad-layout { + padding: 1vh 1vw; + } + + img { + right: 3vw; + max-width: 27%; + } + + div.name-cell { + margin-left: 2vw; + } +} + .squad-layout > div { clear: both; } @@ -24,7 +39,7 @@ } .squad-member-count { - float:left; + float: left; color: whitesmoke; margin-left: 42px } @@ -46,7 +61,10 @@ img { position: absolute; margin-top: 8px; - margin-left: 25px; + margin-left: 2%; + @media all and (max-width: 959px) { + margin-left: 0; + } } .title { @@ -57,7 +75,7 @@ img { .name-cell { display: inherit; - margin-left: 200px; + margin-left: 38%; } diff --git a/static/src/app/army/army.component.html b/static/src/app/army/army.component.html index 3caa90b..92b49aa 100644 --- a/static/src/app/army/army.component.html +++ b/static/src/app/army/army.component.html @@ -1,8 +1,14 @@ -
+

{{'public.army.headline' | translate}}

-
-

{{fraction.BLUFOR}}

+
+

+ {{fraction.BLUFOR}} + +

{{'public.army.members' | translate}} {{army[0].memberCount}}
-
-

{{fraction.OPFOR}}

+
+

+ + {{fraction.OPFOR}} +

{ this.army = army; }); + + this.isSmallLayout = (window.innerWidth <= BaseConfig.responsive.breakpointSmallPx); + Observable.fromEvent(window, 'resize').subscribe(event => { + this.isSmallLayout = event.target['innerWidth'] <= BaseConfig.responsive.breakpointSmallPx; + }); }; select(memberId) { this.router.navigate(['member', memberId], {relativeTo: this.route}); } + + singleViewSwitch(switchFraction: Fraction) { + this.singleViewSelected = switchFraction; + } } diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html index e4c3638..68f411e 100644 --- a/static/src/app/common/navigation/navigation-header.component.html +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -1,5 +1,5 @@ -
+
diff --git a/static/src/app/login/login.component.scss b/static/src/app/login/login.component.scss index db7dcd7..479de01 100644 --- a/static/src/app/login/login.component.scss +++ b/static/src/app/login/login.component.scss @@ -1,11 +1,12 @@ .form-signin { - max-width: 330px; + width: 100%; padding: 15px; margin: 0 auto; } .form-signin > .row { - width: 400px; + max-width: 400px; + margin: auto; } .form-signin-heading { 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 29d73fe..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,11 +8,29 @@ h1 { .decoration-overview-container { position: relative; z-index: 0; - margin: auto 140px 30px; + margin: auto 4vw 0; +} - @media all and (max-width: 959px) { +@media all and (max-width: 959px) { + .decoration-overview-container { margin: auto; } + + h1 { + font-size: 26px; + margin: 0.5em 0; + } + + :host { + margin-bottom: -50vh; + } +} + +:host /deep/ .mat-tab-group { + @media all and (max-width: 959px) { + float: left; + width: 100vw; + } } :host /deep/ .mat-tab-header { @@ -41,6 +59,10 @@ h1 { height: calc(100vh - 241px); min-width: 560px; padding: 1em 1.5em; + + @media all and (max-width: 959px) { + padding: 0; + } } .fraction-side-bar { @@ -50,26 +72,44 @@ h1 { height: calc(100vh - 192px); background: #222222;; box-shadow: #666666 2px 2px 8px; -} -.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; -} + & > div:hover { + color: #ffffff; + } -.fraction-side-bar > div:first-child { - margin-top: 100%; -} + @media all and (max-width: 959px) { + width: 100%; + height: 50px + } -.fraction-side-bar > div.active { - background-color: #080808; - color: white; + > 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; + + @media all and (max-width: 959px) { + width: 33%; + float: left; + } + + &.active { + background-color: #080808; + color: white; + } + + &:first-child { + margin-top: 100%; + + @media all and (max-width: 959px) { + margin-top: 0; + } + } + } } /* SCROLL BAR */ diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts index 1d5e5b4..1a9f236 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts @@ -1,6 +1,5 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; - import {Fraction} from '../../utils/fraction.enum'; import {Decoration} from '../../models/model-interfaces'; import {DecorationService} from '../../services/army-management/decoration.service'; 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 82c279f..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 @@ -7,6 +7,11 @@ overflow: hidden; float: left; cursor: pointer; + + @media all and (max-width: 959px) { + width: 45vw; + margin: 1vh 2vw; + } } .decoration-card:hover { @@ -47,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.html b/static/src/app/pub/rank-overview/rank-overview.component.html index 1df56cb..1e52cd1 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.html +++ b/static/src/app/pub/rank-overview/rank-overview.component.html @@ -1,4 +1,4 @@ -
+

{{'public.ranks.headline' | translate}}

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 6d06b56..00573b8 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.scss +++ b/static/src/app/pub/rank-overview/rank-overview.component.scss @@ -1,5 +1,51 @@ @import url('../../style/background-image.scss'); +.rank-overview-container { + width: 1000px; + margin: auto; + position: relative; +} + +@media all and (max-width: 959px) { + .rank-overview-container { + width: 100%; + } + + div.column-container { + width: 49%; + } + + h1 { + font-size: 26px; + margin: 0.5em 0; + } + + h3 { + margin-top: 0; + font-size: 18px; + } + + .mat-column-picture { + max-width: 4vw; + } + + .mat-column-name { + max-width: 7.5vw; + overflow: hidden; + } + + td.mat-cell:first-child { + padding-left: 1vw; + } + + td > img { + height: 13vh !important; + max-height: 120px; + max-width: 100%; + padding: 4px; + } +} + table { width: 100%; } 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 affab38..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); } @@ -47,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.html b/static/src/app/statistic/campaign/overview/campaign-overview.component.html index 780a3d4..bdea590 100644 --- a/static/src/app/statistic/campaign/overview/campaign-overview.component.html +++ b/static/src/app/statistic/campaign/overview/campaign-overview.component.html @@ -1,5 +1,6 @@
- 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 cba6aac..d30640d 100644 --- a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss +++ b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss @@ -6,6 +6,26 @@ padding-left: 5%; } +@media all and (max-width: 959px) { + .slide-chart-container { + width: 100%; + min-width: unset; + margin-top: 105px; + margin-bottom: 35px; + } + + .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 { background: #ffffff; } diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html index f82158e..4a1dfb3 100644 --- a/static/src/app/statistic/stats.component.html +++ b/static/src/app/statistic/stats.component.html @@ -1,18 +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 e63c328..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 @@ -90,8 +90,32 @@ position: fixed; border-right: 1px solid #dadada; height: 100vh; + top: 0; + z-index: -1; + + @media all and (max-width: 959px) { + display: none; + } } +.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}); } } diff --git a/static/src/app/style/background-image.scss b/static/src/app/style/background-image.scss index 61a435c..e9e667a 100644 --- a/static/src/app/style/background-image.scss +++ b/static/src/app/style/background-image.scss @@ -1,7 +1,7 @@ :host { display: flow-root; height: 100%; - min-height: 100vh; + min-height: calc(100vh - 50px); width: 100%; min-width: fit-content; padding-bottom: 23px; diff --git a/static/src/styles.scss b/static/src/styles.scss index 7dd1afd..377fd26 100644 --- a/static/src/styles.scss +++ b/static/src/styles.scss @@ -62,6 +62,11 @@ form { #right { display: flow-root; + + @media all and (max-width: 959px) { + display: inline-block; + width: 100%; + } } /* MATERIAL */