mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-28 05:08:48 +01:00
refactor(e-commerce): profit card
This commit is contained in:
Sergey Andrievskiy
parent
c31ff67052
commit
da3cd140f5
8 changed files with 68 additions and 155 deletions
|
|
@ -16,6 +16,7 @@ $nb-themes: nb-register-theme((
|
|||
font-family-primary: Roboto,
|
||||
font-family-secondary: Exo,
|
||||
|
||||
card-height-tiny: 13.5rem,
|
||||
|
||||
//
|
||||
//switcher-background: #ebeff5,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
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 { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
|
||||
|
|
@ -53,6 +60,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
|
|||
NbCardModule,
|
||||
NbUserModule,
|
||||
NbButtonModule,
|
||||
NbIconModule,
|
||||
NbTabsetModule,
|
||||
ChartModule,
|
||||
NbProgressBarModule,
|
||||
|
|
|
|||
|
|
@ -1,25 +1,19 @@
|
|||
<nb-card-header>
|
||||
<div class="header-container">
|
||||
<div class="icon">
|
||||
<i class="ion-social-usd"></i>
|
||||
</div>
|
||||
<span class="title">Profit</span>
|
||||
</div>
|
||||
<i class="ion-social-usd"></i>
|
||||
<span class="title">Profit</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body class="p-0">
|
||||
<nb-card-body>
|
||||
<div class="info">
|
||||
<div class="period">
|
||||
<span class="time-interval">Jun 1 - Jun 30</span>
|
||||
<div class="value">
|
||||
<span class="currency">$</span>
|
||||
300
|
||||
<div class="caption">Jun 1 - Jun 30</div>
|
||||
<div class="label">
|
||||
<span class="currency">$</span>300
|
||||
</div>
|
||||
</div>
|
||||
<div class="period latest">
|
||||
<span class="time-interval">Jul 1 - Jul 31</span>
|
||||
<div class="value">
|
||||
<span class="currency">$</span>
|
||||
860
|
||||
<div class="caption">Jul 1 - Jul 31</div>
|
||||
<div class="label">
|
||||
<span class="currency">$</span>860
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,80 +5,47 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
::ng-deep nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.title {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
::ng-deep nb-card-body {
|
||||
overflow: hidden;
|
||||
|
||||
nb-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
}
|
||||
.info {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0.75rem 0.5rem;
|
||||
}
|
||||
|
||||
.period {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
.period {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
&.latest {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
ngx-stats-ares-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);
|
||||
}
|
||||
::ng-deep {
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.echart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
canvas {
|
||||
border-bottom-left-radius: nb-theme(card-border-radius);
|
||||
border-bottom-right-radius: nb-theme(card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<nb-card-header>
|
||||
<div class="header-container">
|
||||
<div class="icon">
|
||||
<i class="ion-social-usd"></i>
|
||||
</div>
|
||||
<span class="title">Profit</span>
|
||||
</div>
|
||||
<i class="ion-social-usd"></i>
|
||||
<span class="title">Profit</span>
|
||||
</nb-card-header>
|
||||
<nb-card-body>
|
||||
<ngx-stats-bar-animation-chart [linesData]="linesData"></ngx-stats-bar-animation-chart>
|
||||
|
|
|
|||
|
|
@ -5,74 +5,22 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
::ng-deep nb-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
@include nb-rtl(flex-direction, row-reverse);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.title {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
::ng-deep nb-card-body {
|
||||
display: flex;
|
||||
nb-card-body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.period {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
ngx-stats-bar-animation-chart {
|
||||
position: relative;
|
||||
|
||||
.time-interval {
|
||||
font-size: nb-theme(font-size-sm);
|
||||
color: nb-theme(color-fg);
|
||||
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%;
|
||||
}
|
||||
::ng-deep .echart {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<nb-flip-card [showToggleButton]="false" [flipped]="flipped">
|
||||
<nb-card-front>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<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-front>
|
||||
<nb-card-back>
|
||||
<nb-card size="xsmall">
|
||||
<nb-card size="tiny">
|
||||
<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-back>
|
||||
</nb-flip-card>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
@import '../../../@theme/styles/themes';
|
||||
|
||||
@include nb-install-component() {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
right: 0.625rem;
|
||||
top: 1rem;
|
||||
@include nb-rtl(right, auto);
|
||||
@include nb-rtl(left, 0);
|
||||
padding: 1.5rem;
|
||||
@include nb-rtl(left, 0.625rem);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::ng-deep .flipped {
|
||||
.back-container {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.front-container {
|
||||
.nb-arrow-right {
|
||||
.flip-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue