Revert "Fix scrollbar for "traffic" card"

This reverts commit b00da0d260.
This commit is contained in:
eugene-sinitsyn 2020-03-11 14:13:52 +03:00 committed by Maksim Karatkevich
parent c9207edcb6
commit 077fdaf0c2
6 changed files with 39 additions and 38 deletions

View file

@ -1,5 +1,6 @@
<ngx-traffic-bar-chart <nb-card-body>
[data]="trafficBarData.data" <ngx-traffic-bar-chart [data]="trafficBarData.data"
[labels]="trafficBarData.labels" [labels]="trafficBarData.labels"
[formatter]="trafficBarData.formatter" [formatter]="trafficBarData.formatter">
></ngx-traffic-bar-chart> </ngx-traffic-bar-chart>
</nb-card-body>

View file

@ -1,10 +1,16 @@
@import '../../../../@theme/styles/themes'; @import '../../../../@theme/styles/themes';
@include nb-install-component() { @include nb-install-component() {
display: block; display: flex;
height: 100%; flex-direction: column;
overflow: hidden; flex: 1;
position: relative;
nb-card-body {
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
}
ngx-traffic-bar-chart { ngx-traffic-bar-chart {
flex: 1; flex: 1;

View file

@ -1,4 +1,6 @@
<span>Traffic</span> <nb-card-header>
<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)"> <span>Traffic</span>
<nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option> <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
</nb-select> <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
</nb-select>
</nb-card-header>

View file

@ -1,5 +1,14 @@
:host { @import '../../../../@theme/styles/themes';
display: flex;
align-items: center; @include nb-install-component() {
justify-content: space-between; nb-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: nb-theme(card-header-with-select-padding-top);
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
@include nb-ltr(padding-right, 4rem);
@include nb-rtl(padding-left, 4rem);
}
} }

View file

@ -1,25 +1,15 @@
<nb-reveal-card [showToggleButton]="false" [revealed]="revealed"> <nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
<nb-card-front> <nb-card-front>
<nb-card size="small"> <nb-card size="small">
<nb-card-header> <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"> <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
</ngx-traffic-cards-header>
</nb-card-header>
<nb-card-body>
<ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
</nb-card-body>
<nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon> <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
</nb-card> </nb-card>
</nb-card-front> </nb-card-front>
<nb-card-back> <nb-card-back>
<nb-card size="small"> <nb-card size="small">
<nb-card-header> <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"> <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
</ngx-traffic-cards-header>
</nb-card-header>
<nb-card-body>
<ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
</nb-card-body>
<nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon> <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
</nb-card> </nb-card>
</nb-card-back> </nb-card-back>

View file

@ -9,11 +9,4 @@
@include nb-rtl(left, 1.25rem); @include nb-rtl(left, 1.25rem);
cursor: pointer; cursor: pointer;
} }
nb-card-header {
padding-top: nb-theme(card-header-with-select-padding-top);
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
@include nb-ltr(padding-right, 4rem);
@include nb-rtl(padding-left, 4rem);
}
} }