Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-10 10:24:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(e-commerce): profit card

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-17 12:17:20 +03:00
parent c31ff67052
commit da3cd140f5
8 changed files with 68 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/@theme/styles/themes.scss
View file

@ -16,6 +16,7 @@ $nb-themes: nb-register-theme((
font-family-primary: Roboto, font-family-primary: Roboto,
font-family-secondary: Exo, font-family-secondary: Exo,
card-height-tiny: 13.5rem,
// //
//switcher-background: #ebeff5, //switcher-background: #ebeff5,

10
src/app/pages/e-commerce/e-commerce.module.ts
View file

@ -1,5 +1,12 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { NbButtonModule, NbCardModule, NbProgressBarModule, NbTabsetModule, NbUserModule } from '@nebular/theme'; import {
NbButtonModule,
NbCardModule,
NbProgressBarModule,
NbTabsetModule,
NbUserModule,
NbIconModule,
} from '@nebular/theme';
import { NgxEchartsModule } from 'ngx-echarts'; import { NgxEchartsModule } from 'ngx-echarts';
import { NgxChartsModule } from '@swimlane/ngx-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts';
@ -53,6 +60,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
NbCardModule, NbCardModule,
NbUserModule, NbUserModule,
NbButtonModule, NbButtonModule,
NbIconModule,
NbTabsetModule, NbTabsetModule,
ChartModule, ChartModule,
NbProgressBarModule, NbProgressBarModule,

24
src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html
View file

@ -1,25 +1,19 @@
<nb-card-header> <nb-card-header>
<div class="header-container"> <i class="ion-social-usd"></i>
<div class="icon"> <span class="title">Profit</span>
<i class="ion-social-usd"></i>
</div>
<span class="title">Profit</span>
</div>
</nb-card-header> </nb-card-header>
<nb-card-body class="p-0"> <nb-card-body>
<div class="info"> <div class="info">
<div class="period"> <div class="period">
<span class="time-interval">Jun 1 - Jun 30</span> <div class="caption">Jun 1 - Jun 30</div>
<div class="value"> <div class="label">
<span class="currency">$</span> <span class="currency">$</span>300
300
</div> </div>
</div> </div>
<div class="period latest"> <div class="period latest">
<span class="time-interval">Jul 1 - Jul 31</span> <div class="caption">Jul 1 - Jul 31</div>
<div class="value"> <div class="label">
<span class="currency">$</span> <span class="currency">$</span>860
860
</div> </div>
</div> </div>
</div> </div>

89
src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
View file

@ -5,80 +5,47 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
::ng-deep nb-card-header { .title {
display: flex; padding-left: 0.5rem;
justify-content: space-between;
.header-container {
display: flex;
@include nb-rtl(flex-direction, row-reverse);
}
.title {
padding-left: 1rem;
}
} }
::ng-deep nb-card-body { nb-card-body {
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0;
overflow: hidden;
}
.info { .info {
padding: 0.75rem; display: flex;
padding-bottom: 0.5rem; @include nb-rtl(flex-direction, row-reverse);
display: flex; justify-content: space-between;
@include nb-rtl(flex-direction, row-reverse); padding: 0.75rem 0.75rem 0.5rem;
} }
.period { .period {
display: flex; width: 49%;
flex-direction: column; }
flex: 1;
&.latest { .currency {
padding-left: 0.75rem; padding-right: 0.25rem;
}
}
.time-interval {
color: nb-theme(color-fg);
}
.value {
font-family: nb-theme(font-secondary), serif;
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(card-fg-heading);
@include nb-for-theme(default) {
color: nb-theme(color-success);
}
.currency {
color: nb-theme(color-success);
@include nb-for-theme(corporate) {
color: nb-theme(color-primary);
}
}
}
} }
ngx-stats-ares-chart { ngx-stats-ares-chart {
flex: 1; flex: 1;
position: relative; position: relative;
}
::ng-deep canvas { ::ng-deep {
border-bottom-left-radius: nb-theme(card-border-radius); .echart {
border-bottom-right-radius: nb-theme(card-border-radius); position: absolute;
} height: 100%;
width: 100%;
}
.echart { canvas {
position: absolute; border-bottom-left-radius: nb-theme(card-border-radius);
height: 100%; border-bottom-right-radius: nb-theme(card-border-radius);
width: 100%; }
}
} }
} }

8
src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html
View file

@ -1,10 +1,6 @@
<nb-card-header> <nb-card-header>
<div class="header-container"> <i class="ion-social-usd"></i>
<div class="icon"> <span class="title">Profit</span>
<i class="ion-social-usd"></i>
</div>
<span class="title">Profit</span>
</div>
</nb-card-header> </nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-stats-bar-animation-chart [linesData]="linesData"></ngx-stats-bar-animation-chart> <ngx-stats-bar-animation-chart [linesData]="linesData"></ngx-stats-bar-animation-chart>

70
src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
View file

@ -5,74 +5,22 @@
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
::ng-deep nb-card-header { .title {
display: flex; padding-left: 0.5rem;
justify-content: space-between;
.header-container {
display: flex;
@include nb-rtl(flex-direction, row-reverse);
}
.title {
padding-left: 1rem;
}
} }
::ng-deep nb-card-body { nb-card-body {
display: flex;
position: relative; position: relative;
flex: 1;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
}
.period { ngx-stats-bar-animation-chart {
display: flex; position: relative;
flex-direction: column;
flex: 1;
justify-content: flex-end;
}
.time-interval { ::ng-deep .echart {
font-size: nb-theme(font-size-sm); height: 100%;
color: nb-theme(color-fg); width: 100%;
white-space: nowrap;
}
.value {
font-family: nb-theme(font-secondary), serif;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(card-fg-heading);
.currency {
color: nb-theme(color-success);
@include nb-for-theme(corporate) {
color: nb-theme(color-primary);
}
}
}
.start-period {
.time-interval, .value {
text-align: right;
}
}
.end-period {
.time-interval, .value {
text-align: left;
}
}
ngx-stats-bar-animation-chart {
flex: 1;
position: relative;
.echart {
height: 100%;
width: 100%;
}
} }
} }
} }

8
src/app/pages/e-commerce/profit-card/profit-card.component.html
View file

@ -1,14 +1,14 @@
<nb-flip-card [showToggleButton]="false" [flipped]="flipped"> <nb-flip-card [showToggleButton]="false" [flipped]="flipped">
<nb-card-front> <nb-card-front>
<nb-card size="xsmall"> <nb-card size="tiny">
<ngx-stats-card-front></ngx-stats-card-front> <ngx-stats-card-front></ngx-stats-card-front>
<i class="nb-arrow-right" (click)="toggleView()"></i> <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
</nb-card> </nb-card>
</nb-card-front> </nb-card-front>
<nb-card-back> <nb-card-back>
<nb-card size="xsmall"> <nb-card size="tiny">
<ngx-stats-card-back></ngx-stats-card-back> <ngx-stats-card-back></ngx-stats-card-back>
<i class="nb-arrow-right" (click)="toggleView()"></i> <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
</nb-card> </nb-card>
</nb-card-back> </nb-card-back>
</nb-flip-card> </nb-flip-card>

13
src/app/pages/e-commerce/profit-card/profit-card.component.scss
View file

@ -1,25 +1,24 @@
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@include nb-install-component() { @include nb-install-component() {
.nb-arrow-right { .flip-icon {
position: absolute; position: absolute;
right: 0; right: 0.625rem;
top: 0; top: 1rem;
@include nb-rtl(right, auto); @include nb-rtl(right, auto);
@include nb-rtl(left, 0); @include nb-rtl(left, 0.625rem);
padding: 1.5rem;
cursor: pointer; cursor: pointer;
} }
::ng-deep .flipped { ::ng-deep .flipped {
.back-container { .back-container {
.nb-arrow-right { .flip-icon {
transform: scaleX(-1); transform: scaleX(-1);
} }
} }
.front-container { .front-container {
.nb-arrow-right { .flip-icon {
display: none; display: none;
} }
} }