Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix scrollbar for "traffic" card

Browse source
This commit is contained in:
eugene-sinitsyn 2020-03-11 13:20:11 +03:00 • committed by Maksim Karatkevich
parent 7d2f1fec2c
commit 8f19fa96a3
6 changed files with 84 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html Normal file
View file

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

25
src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss Normal file
View file

@ -0,0 +1,25 @@
@import '../../../../@theme/styles/themes';
@include nb-install-component() {
display: block;
height: 100%;
overflow: hidden;
position: relative;
ngx-traffic-bar-chart {
flex: 1;
position: relative;
::ng-deep {
canvas {
border-bottom-left-radius: nb-theme(card-border-radius);
border-bottom-right-radius: nb-theme(card-border-radius);
}
.echart {
height: 100%;
width: 100%;
}
}
}
}

8
src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html
View file

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

5
src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss Normal file
View file

@ -0,0 +1,5 @@
:host {
display: flex;
align-items: center;
justify-content: space-between;
}

26
src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html Normal file
View file

@ -0,0 +1,26 @@
<nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
<nb-card-front>
<nb-card size="small">
<nb-card-header>
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
</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-card>
</nb-card-front>
<nb-card-back>
<nb-card size="small">
<nb-card-header>
<ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
</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-card>
</nb-card-back>
</nb-reveal-card>

19
src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss Normal file
View file

@ -0,0 +1,19 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
.toggle-icon {
position: absolute;
top: 1rem;
right: 1.25rem;
@include nb-rtl(right, auto);
@include nb-rtl(left, 1.25rem);
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);
}
}