From dfb8985e2fa2a32ddf3d88f7ba846420f8252ea5 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 17 Feb 2019 20:25:57 +0100 Subject: [PATCH 1/9] Improve chart labels for flag chart (CC-72) --- .../war/fraction-stats/fraction-stats.component.html | 1 + .../war/fraction-stats/fraction-stats.component.ts | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html index c171625..498b206 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html @@ -37,6 +37,7 @@ [legendTitle]="legendTitle" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" + [yAxisLabel]="chartYAxisLabel" [animations]="barAnimations" [barPadding]="barPadding" [xAxisTickFormatting]="axisFormatX" diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts index a2fc238..bbe213e 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts @@ -134,9 +134,9 @@ export class FractionStatsComponent implements OnInit, OnChanges { selectChart(newSelection) { this.activeChartSelect = newSelection; + this.setChartYAxisLabel(this.activeChartSelect); if (this.activeChartSelect !== this.labels.flag) { this.showLineChart = true; - this.setChartYAxisLabel(this.activeChartSelect); switch (this.activeChartSelect) { case this.labels.points: this.lineChartData = this.tmpPointData; @@ -506,6 +506,12 @@ export class FractionStatsComponent implements OnInit, OnChanges { } axisFormatY(val) { + if (val === 1) { + return Fraction.BLUFOR; + } + if (val === -1) { + return Fraction.OPFOR; + } return ''; } } -- 2.25.1 From 6f0428ea6633a5d27fba2b7554a5e018ae49d276 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Mon, 25 Feb 2019 23:36:46 +0100 Subject: [PATCH 2/9] mobile ready decoration overview --- static/src/app/app.component.scss | 4 +- .../navigation-header.component.html | 2 +- .../decoration-overview.component.scss | 72 ++++++++++++++----- .../decoration-panel.component.scss | 5 ++ .../campaign-navigation.component.scss | 4 ++ .../overview/campaign-overview.component.html | 3 +- .../overview/campaign-overview.component.scss | 15 ++++ static/src/app/statistic/stats.component.ts | 4 ++ .../war/war-list/war-list.component.scss | 6 ++ static/src/app/style/background-image.scss | 2 +- static/src/styles.scss | 5 ++ 11 files changed, 99 insertions(+), 23 deletions(-) diff --git a/static/src/app/app.component.scss b/static/src/app/app.component.scss index 0a1a3e7..0c4c9ea 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 - 65px); + min-height: fit-content; display: inline; - background: #fdfdfd; } mat-sidenav { 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/pub/decoration-overview/decoration-overview.component.scss b/static/src/app/pub/decoration-overview/decoration-overview.component.scss index 29d73fe..db1cab3 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.scss +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.scss @@ -9,10 +9,28 @@ h1 { position: relative; z-index: 0; margin: auto 140px 30px; +} - @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,40 @@ 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; -} + @media all and (max-width: 959px) { + width: 100%; + height: 50px + } -.fraction-side-bar > div:first-child { - margin-top: 100%; -} + > 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.active { - background-color: #080808; - color: white; + @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-panel/decoration-panel.component.scss b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.scss index 82c279f..18b42d1 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 { 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..1499fdd 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 @@ -36,6 +36,10 @@ float: left; background: #424242; color: #9d9d9d; + + @media all and (max-width: 959px) { + min-width: 33%; + } } .active { 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..47af01c 100644 --- a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss +++ b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss @@ -4,6 +4,21 @@ height: 650px; margin: auto; padding-left: 5%; + + @media all and (max-width: 959px) { + width: 100%; + min-width: unset; + padding-top: 105px; + } +} + +.chart-select-group { + @media all and (max-width: 959px) { + display: inline-grid; + width: 70%; + text-align: center; + margin-left: 10%; + } } mat-button-toggle.mat-button-toggle-checked { diff --git a/static/src/app/statistic/stats.component.ts b/static/src/app/statistic/stats.component.ts index a0d3625..c605542 100644 --- a/static/src/app/statistic/stats.component.ts +++ b/static/src/app/statistic/stats.component.ts @@ -40,6 +40,10 @@ export class StatisticComponent implements OnInit { this.resolveCampaignFromUrl(); }); + if (window.innerWidth <= BaseConfig.responsive.breakpointPx) { + this.collapsed = true; + this.collapseBtnVisible = false; + } Observable.fromEvent(window, 'resize').subscribe(event => { if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) { this.collapsed = true; 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..5f9f2e6 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,6 +90,12 @@ position: fixed; border-right: 1px solid #dadada; height: 100vh; + top: 0; + z-index: -1; + + @media all and (max-width: 959px) { + display: none; + } } /* Table Scrollbar BEGIN */ 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 */ -- 2.25.1 From 1938d74b0846da877621f21d870ad76a7462533a Mon Sep 17 00:00:00 2001 From: HardiReady Date: Tue, 26 Feb 2019 00:23:21 +0100 Subject: [PATCH 3/9] mobile ready rank overview --- .../decoration-overview.component.scss | 2 +- .../decoration-overview.component.ts | 1 - .../rank-overview.component.html | 2 +- .../rank-overview.component.scss | 47 +++++++++++++++++++ 4 files changed, 49 insertions(+), 3 deletions(-) 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 db1cab3..2dff247 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.scss +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.scss @@ -90,7 +90,7 @@ h1 { @media all and (max-width: 959px) { width: 33%; - float:left; + float: left; } &.active { 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/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..36016f6 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,52 @@ @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: 100vw; + } + + div.column-container { + width: 49vw; + } + + h1 { + font-size: 26px; + margin: 0.5em 0; + } + + h3 { + margin-top: 0; + } + + .mat-column-picture { + max-width: 4vw; + } + + .mat-column-name { + max-width: 7.5vw; + } + + td.mat-cell:first-child { + padding-left: 1vw; + } + + td > img { + height: 13vh !important; + max-height: 120px; + padding: 4px; + } + + :host { + margin-bottom: -50vh; + } +} + table { width: 100%; } -- 2.25.1 From 5d6e3fc0897ca468f2326c294a03a7cd88da0073 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Tue, 26 Feb 2019 15:42:06 +0100 Subject: [PATCH 4/9] Make army oveview mobile responsive --- static/src/app/app.config.ts | 1 + .../army/army-squad/army-squad.component.scss | 17 +++++- static/src/app/army/army.component.html | 22 ++++++-- static/src/app/army/army.component.scss | 55 +++++++++++++++++++ static/src/app/army/army.component.ts | 17 +++++- .../rank-overview.component.scss | 4 +- 6 files changed, 107 insertions(+), 9 deletions(-) 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..771a292 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 { + width: 100vw; + padding: 1vh 1vw; + } + + img { + right: 3vw; + } + + 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 } 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/pub/rank-overview/rank-overview.component.scss b/static/src/app/pub/rank-overview/rank-overview.component.scss index 36016f6..dc92687 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.scss +++ b/static/src/app/pub/rank-overview/rank-overview.component.scss @@ -8,11 +8,11 @@ @media all and (max-width: 959px) { .rank-overview-container { - width: 100vw; + width: 100%; } div.column-container { - width: 49vw; + width: 49%; } h1 { -- 2.25.1 From b386d595085e194c7aded22973b5db4b9e5b731e Mon Sep 17 00:00:00 2001 From: HardiReady Date: Tue, 26 Feb 2019 17:22:07 +0100 Subject: [PATCH 5/9] Make army oveview & login mobile responsive --- .../army/army-squad/army-squad.component.scss | 8 +++++--- static/src/app/army/army.component.scss | 18 ++++++++++++------ static/src/app/login/login.component.scss | 5 +++-- 3 files changed, 20 insertions(+), 11 deletions(-) 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 771a292..e5ca46b 100644 --- a/static/src/app/army/army-squad/army-squad.component.scss +++ b/static/src/app/army/army-squad/army-squad.component.scss @@ -5,7 +5,6 @@ @media all and (max-width: 599px) { .squad-layout { - width: 100vw; padding: 1vh 1vw; } @@ -61,7 +60,10 @@ img { position: absolute; margin-top: 8px; - margin-left: 25px; + margin-left: 2%; + @media all and (max-width: 959px) { + margin-left: 0; + } } .title { @@ -72,7 +74,7 @@ img { .name-cell { display: inherit; - margin-left: 200px; + margin-left: 38%; } diff --git a/static/src/app/army/army.component.scss b/static/src/app/army/army.component.scss index fa4ea0d..1718803 100644 --- a/static/src/app/army/army.component.scss +++ b/static/src/app/army/army.component.scss @@ -1,15 +1,12 @@ @import url('../style/background-image.scss'); .army-content-container { - width: 1100px; + width: 90%; + max-width: 1100px; margin: auto; position: relative; } -.army-column-right { - float: right; -} - @media all and (max-width: 599px) { h1 { font-size: 26px; @@ -21,7 +18,7 @@ } div.army-column { - width: 100%; + width: 100%!important; h3 { background: #222; @@ -51,6 +48,15 @@ } } +@media all and (max-width: 959px) { + div.army-column { + width: 49%; + } + .army-content-container { + width: 98%; + } +} + .army-column { width: 45%; } 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 { -- 2.25.1 From 04ff22fafc8a2a161a7ab403febd159b27a1a288 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Wed, 27 Feb 2019 16:38:46 +0100 Subject: [PATCH 6/9] Improve responsive layout --- static/src/app/app.component.html | 2 +- .../app/army/army-squad/army-squad.component.scss | 1 + static/src/app/army/army.component.scss | 7 ++++--- .../pub/rank-overview/rank-overview.component.scss | 5 +---- static/src/app/statistic/stats.component.html | 14 ++++++++------ 5 files changed, 15 insertions(+), 14 deletions(-) diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 8393bea..1cc35d7 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/army/army-squad/army-squad.component.scss b/static/src/app/army/army-squad/army-squad.component.scss index e5ca46b..f150a4b 100644 --- a/static/src/app/army/army-squad/army-squad.component.scss +++ b/static/src/app/army/army-squad/army-squad.component.scss @@ -10,6 +10,7 @@ img { right: 3vw; + max-width: 27%; } div.name-cell { diff --git a/static/src/app/army/army.component.scss b/static/src/app/army/army.component.scss index 1718803..20a97a1 100644 --- a/static/src/app/army/army.component.scss +++ b/static/src/app/army/army.component.scss @@ -22,12 +22,13 @@ h3 { background: #222; + font-size: 18px; margin: 0.2em 0; padding: 1.5vh 0; button { position: absolute; - margin-top: -7px; + margin-top: -10px; display: inline-block; &.switch-btn-blufor { @@ -40,8 +41,8 @@ } mat-icon { - width: 3em; - height: 3em; + width: 2.5em; + height: 2.5em; } } } 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 dc92687..4f3cfea 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.scss +++ b/static/src/app/pub/rank-overview/rank-overview.component.scss @@ -39,12 +39,9 @@ td > img { height: 13vh !important; max-height: 120px; + max-width: 100%; padding: 4px; } - - :host { - margin-bottom: -50vh; - } } table { diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html index f82158e..f40f096 100644 --- a/static/src/app/statistic/stats.component.html +++ b/static/src/app/statistic/stats.component.html @@ -1,9 +1,11 @@ - - +
+ + +
Date: Wed, 27 Feb 2019 22:42:03 +0100 Subject: [PATCH 7/9] 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}); } } -- 2.25.1 From 0fa09b56dccbe2d54e2e8b1ba58f26c71e26d696 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Wed, 27 Feb 2019 22:53:24 +0100 Subject: [PATCH 8/9] Improve responsive view --- .../campaign/overview/campaign-overview.component.scss | 3 ++- .../src/app/statistic/war/scoreboard/scoreboard.component.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) 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 244827d..d30640d 100644 --- a/static/src/app/statistic/campaign/overview/campaign-overview.component.scss +++ b/static/src/app/statistic/campaign/overview/campaign-overview.component.scss @@ -10,7 +10,8 @@ .slide-chart-container { width: 100%; min-width: unset; - padding-top: 105px; + margin-top: 105px; + margin-bottom: 35px; } .chart-select-group { diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts index 6fb53a7..e7e0138 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.ts +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.ts @@ -49,7 +49,7 @@ export class ScoreboardComponent implements OnChanges { } ngOnChanges(changes: SimpleChanges) { - if (changes['isSmallLayout'] && changes['isSmallLayout'].previousValue != changes['isSmallLayout'].currentValue) { + if (changes['isSmallLayout'] && changes['isSmallLayout'].previousValue !== changes['isSmallLayout'].currentValue) { const colIdxFraction = this.displayedColumns.findIndex(c => c === 'fraction'); if (this.isSmallLayout) { this.displayedColumns.splice(colIdxFraction, 1); -- 2.25.1 From a0e86c14c9dbfca9e81d4528449186114eeb892f Mon Sep 17 00:00:00 2001 From: HardiReady Date: Wed, 27 Feb 2019 23:03:09 +0100 Subject: [PATCH 9/9] clean up --- static/src/app/app.component.html | 2 +- static/src/app/app.component.scss | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 1cc35d7..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 831ec73..1af4253 100644 --- a/static/src/app/app.component.scss +++ b/static/src/app/app.component.scss @@ -1,7 +1,7 @@ @import "style/load-indicator.scss"; mat-sidenav-container, mat-sidenav-content, mat-sidenav { - height: calc(100vh - 65px); + height: calc(100vh - 50px); min-height: fit-content; display: inline; } @@ -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; -- 2.25.1