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 */