mobile ready decoration overview
parent
983b1a21f0
commit
6f0428ea66
|
@ -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 {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<mat-toolbar color="primary">
|
||||
<div fxHide.gt-sm style="position:absolute;">
|
||||
<div fxHide.gt-sm>
|
||||
<button mat-icon-button (click)="onToggleSidenav()">
|
||||
<mat-icon svgIcon="menu"></mat-icon>
|
||||
</button>
|
||||
|
|
|
@ -9,10 +9,28 @@ h1 {
|
|||
position: relative;
|
||||
z-index: 0;
|
||||
margin: auto 140px 30px;
|
||||
}
|
||||
|
||||
@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,9 +72,13 @@ h1 {
|
|||
height: calc(100vh - 192px);
|
||||
background: #222222;;
|
||||
box-shadow: #666666 2px 2px 8px;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
width: 100%;
|
||||
height: 50px
|
||||
}
|
||||
|
||||
.fraction-side-bar > div {
|
||||
> div {
|
||||
text-align: center;
|
||||
padding: 12px 25px;
|
||||
margin-bottom: 15px;
|
||||
|
@ -61,17 +87,27 @@ h1 {
|
|||
cursor: pointer;
|
||||
border-top: 1px solid #666666;
|
||||
border-bottom: 1px solid #666666;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
width: 33%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.fraction-side-bar > div:first-child {
|
||||
margin-top: 100%;
|
||||
}
|
||||
|
||||
.fraction-side-bar > div.active {
|
||||
&.active {
|
||||
background-color: #080808;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 100%;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* SCROLL BAR */
|
||||
|
||||
:host /deep/ .mat-tab-body-content::-webkit-scrollbar {
|
||||
|
|
|
@ -7,6 +7,11 @@
|
|||
overflow: hidden;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
width: 45vw;
|
||||
margin: 1vh 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
.decoration-card:hover {
|
||||
|
|
|
@ -36,6 +36,10 @@
|
|||
float: left;
|
||||
background: #424242;
|
||||
color: #9d9d9d;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
min-width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<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'"
|
||||
(change)="goToSlide(viewToggle.value)">
|
||||
<mat-button-toggle *ngIf="id != 'all'" value="0">
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 */
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -62,6 +62,11 @@ form {
|
|||
|
||||
#right {
|
||||
display: flow-root;
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* MATERIAL */
|
||||
|
|
Loading…
Reference in New Issue