mobile ready decoration overview
parent
983b1a21f0
commit
6f0428ea66
|
@ -1,9 +1,9 @@
|
||||||
@import "style/load-indicator.scss";
|
@import "style/load-indicator.scss";
|
||||||
|
|
||||||
mat-sidenav-container, mat-sidenav-content, mat-sidenav {
|
mat-sidenav-container, mat-sidenav-content, mat-sidenav {
|
||||||
height: 100vh;
|
height: calc(100vh - 65px);
|
||||||
|
min-height: fit-content;
|
||||||
display: inline;
|
display: inline;
|
||||||
background: #fdfdfd;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
mat-sidenav {
|
mat-sidenav {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<mat-toolbar color="primary">
|
<mat-toolbar color="primary">
|
||||||
<div fxHide.gt-sm style="position:absolute;">
|
<div fxHide.gt-sm>
|
||||||
<button mat-icon-button (click)="onToggleSidenav()">
|
<button mat-icon-button (click)="onToggleSidenav()">
|
||||||
<mat-icon svgIcon="menu"></mat-icon>
|
<mat-icon svgIcon="menu"></mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -9,10 +9,28 @@ h1 {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
margin: auto 140px 30px;
|
margin: auto 140px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 959px) {
|
@media all and (max-width: 959px) {
|
||||||
|
.decoration-overview-container {
|
||||||
margin: auto;
|
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 {
|
:host /deep/ .mat-tab-header {
|
||||||
|
@ -41,6 +59,10 @@ h1 {
|
||||||
height: calc(100vh - 241px);
|
height: calc(100vh - 241px);
|
||||||
min-width: 560px;
|
min-width: 560px;
|
||||||
padding: 1em 1.5em;
|
padding: 1em 1.5em;
|
||||||
|
|
||||||
|
@media all and (max-width: 959px) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fraction-side-bar {
|
.fraction-side-bar {
|
||||||
|
@ -50,9 +72,13 @@ h1 {
|
||||||
height: calc(100vh - 192px);
|
height: calc(100vh - 192px);
|
||||||
background: #222222;;
|
background: #222222;;
|
||||||
box-shadow: #666666 2px 2px 8px;
|
box-shadow: #666666 2px 2px 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.fraction-side-bar > div {
|
@media all and (max-width: 959px) {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px
|
||||||
|
}
|
||||||
|
|
||||||
|
> div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 12px 25px;
|
padding: 12px 25px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
@ -61,15 +87,25 @@ h1 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-top: 1px solid #666666;
|
border-top: 1px solid #666666;
|
||||||
border-bottom: 1px solid #666666;
|
border-bottom: 1px solid #666666;
|
||||||
}
|
|
||||||
|
|
||||||
.fraction-side-bar > div:first-child {
|
@media all and (max-width: 959px) {
|
||||||
margin-top: 100%;
|
width: 33%;
|
||||||
}
|
float:left;
|
||||||
|
}
|
||||||
|
|
||||||
.fraction-side-bar > div.active {
|
&.active {
|
||||||
background-color: #080808;
|
background-color: #080808;
|
||||||
color: white;
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 100%;
|
||||||
|
|
||||||
|
@media all and (max-width: 959px) {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SCROLL BAR */
|
/* SCROLL BAR */
|
||||||
|
|
|
@ -7,6 +7,11 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
float: left;
|
float: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media all and (max-width: 959px) {
|
||||||
|
width: 45vw;
|
||||||
|
margin: 1vh 2vw;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.decoration-card:hover {
|
.decoration-card:hover {
|
||||||
|
|
|
@ -36,6 +36,10 @@
|
||||||
float: left;
|
float: left;
|
||||||
background: #424242;
|
background: #424242;
|
||||||
color: #9d9d9d;
|
color: #9d9d9d;
|
||||||
|
|
||||||
|
@media all and (max-width: 959px) {
|
||||||
|
min-width: 33%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<div class="slide-chart-container" style="height: 100px;padding-top: 20px; margin-top: 10px;">
|
<div class="slide-chart-container" style="height: 100px;padding-top: 20px; margin-top: 10px;">
|
||||||
<mat-button-toggle-group #viewToggle="matButtonToggleGroup"
|
<mat-button-toggle-group class="chart-select-group"
|
||||||
|
#viewToggle="matButtonToggleGroup"
|
||||||
[value]="this.id !== 'all' ? '0' : '1'"
|
[value]="this.id !== 'all' ? '0' : '1'"
|
||||||
(change)="goToSlide(viewToggle.value)">
|
(change)="goToSlide(viewToggle.value)">
|
||||||
<mat-button-toggle *ngIf="id != 'all'" value="0">
|
<mat-button-toggle *ngIf="id != 'all'" value="0">
|
||||||
|
|
|
@ -4,6 +4,21 @@
|
||||||
height: 650px;
|
height: 650px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding-left: 5%;
|
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 {
|
mat-button-toggle.mat-button-toggle-checked {
|
||||||
|
|
|
@ -40,6 +40,10 @@ export class StatisticComponent implements OnInit {
|
||||||
this.resolveCampaignFromUrl();
|
this.resolveCampaignFromUrl();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (window.innerWidth <= BaseConfig.responsive.breakpointPx) {
|
||||||
|
this.collapsed = true;
|
||||||
|
this.collapseBtnVisible = false;
|
||||||
|
}
|
||||||
Observable.fromEvent(window, 'resize').subscribe(event => {
|
Observable.fromEvent(window, 'resize').subscribe(event => {
|
||||||
if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
|
if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) {
|
||||||
this.collapsed = true;
|
this.collapsed = true;
|
||||||
|
|
|
@ -90,6 +90,12 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
border-right: 1px solid #dadada;
|
border-right: 1px solid #dadada;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
@media all and (max-width: 959px) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table Scrollbar BEGIN */
|
/* Table Scrollbar BEGIN */
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
:host {
|
:host {
|
||||||
display: flow-root;
|
display: flow-root;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
min-height: 100vh;
|
min-height: calc(100vh - 50px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: fit-content;
|
min-width: fit-content;
|
||||||
padding-bottom: 23px;
|
padding-bottom: 23px;
|
||||||
|
|
|
@ -62,6 +62,11 @@ form {
|
||||||
|
|
||||||
#right {
|
#right {
|
||||||
display: flow-root;
|
display: flow-root;
|
||||||
|
|
||||||
|
@media all and (max-width: 959px) {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MATERIAL */
|
/* MATERIAL */
|
||||||
|
|
Loading…
Reference in New Issue