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

refactor(traffic): align content

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-22 19:56:53 +03:00
parent 082f72b441
commit c2f6c03ae6
4 changed files with 59 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.html
View file

@ -1,16 +1,9 @@
<div class="traffic-bar">
<div class="period-from">{{ barData.prevDate }}</div>
<div class="vertical-progress-bar">
<div class="progress-line"
[style.height.%]="barData.prevValue">
</div>
</div>
<div class="vertical-progress-bar">
<div class="progress-line"
[style.height.%]="barData.nextValue"
[class.success]="successDelta"
[class.failure]="!successDelta">
</div>
</div>
<div class="period-to">{{ barData.nextDate }}</div>
<span class="value-prev caption">{{ barData.prevDate }}</span>
<div class="progress-line-container" [style.height.%]="barData.prevValue">
<div class="progress-line-prev"></div>
</div>
<div class="progress-line-container" [style.height.%]="barData.nextValue">
<div class="progress-line-now" [class.success]="successDelta" [class.failure]="!successDelta">
</div>
</div>
<span class="value-now caption">{{ barData.nextDate }}</span>

77
src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
View file

@ -1,49 +1,54 @@
@import '../../../../../@theme/styles/themes';
@include nb-install-component() {
height: 100%;
display: flex;
align-items: flex-end;
height: nb-theme(list-item-line-height);
max-width: 7rem;
.traffic-bar {
display: flex;
align-self: stretch;
position: relative;
.value-prev,
.value-now {
flex: 1;
}
.progress-line-container {
flex: 1;
margin-bottom: 0.1875rem;
}
.progress-line-prev,
.progress-line-now {
height: 100%;
width: 0.7rem;
}
> * {
margin-left: 0.5rem;
.progress-line-prev {
background-color: nb-theme(border-basic-color-3);
@include nb-ltr {
margin-left: auto;
margin-right: 0.25rem;
}
@include nb-rtl {
margin-left: 0.25rem;
margin-right: auto;
}
}
.period-from, .period-to {
align-self: flex-end;
font-size: 1rem;
line-height: 0.8;
}
.progress-line-now {
@include nb-ltr {
margin-left: 0.25rem;
margin-right: auto;
}
@include nb-rtl {
margin-left: auto;
margin-right: 0.25rem;
}
.period-from {
position: absolute;
@include nb-ltr(right, 100%);
@include nb-rtl(left, 100%);
bottom: 0;
white-space: nowrap;
}
.vertical-progress-bar {
height: 100%;
width: 0.7rem;
transform: rotate(180deg);
.progress-line {
background-color: nb-theme(border-basic-color-3);
width: 100%;
&.success {
background-color: nb-theme(color-success-default);
}
&.failure {
background-color: nb-theme(color-danger-default);
}
&.success {
background-color: nb-theme(color-success-default);
}
&.failure {
background-color: nb-theme(color-danger-default);
}
}
}

4
src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html
View file

@ -1,7 +1,7 @@
<nb-list>
<nb-list-item class="item" *ngFor="let item of frontCardData; trackBy: trackByDate">
<span class="caption">{{ item.date }}</span>
<span>{{ item.value }}</span>
<span>{{ item.date }}</span>
<span clsas="value">{{ item.value }}</span>
<span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
<nb-icon [icon]="item.delta.up ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
{{ item.delta.value }}%

26
src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
View file

@ -5,29 +5,23 @@
@include nb-install-component() {
overflow: auto;
nb-card-body {
padding: 0;
display: flex;
flex-direction: column;
}
.item {
display: flex;
justify-content: space-between;
align-items: center;
height: 4.5rem;
> * {
flex: 1;
}
&:first-child {
border-top: none;
}
}
> * {
flex: 2;
}
ngx-traffic-bar {
flex: 1;
}
.value,
.delta {
text-align: center;
}
.delta {
@ -41,10 +35,6 @@
&.up {
color: nb-theme(color-success-default);
}
nb-icon ::ng-deep svg {
vertical-align: top;
}
}
@include media-breakpoint-down(is) {