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

refactor(orders): prevent legend content overflow

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-22 17:07:30 +03:00
parent e6762c2f38
commit 22a78f71a3
6 changed files with 33 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.html
View file

@ -1,9 +1,7 @@
<div class="chart-header">
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
<ngx-legend-chart [legendItems]="chartLegend"></ngx-legend-chart>
<nb-select [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period">
{{ period }}
</nb-option>
</nb-select>
</div>
<nb-select class="period-select" [selected]="type" (selectedChange)="changePeriod($event)">
<nb-option *ngFor="let period of types" [value]="period">
{{ period }}
</nb-option>
</nb-select>

45
src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
View file

@ -3,38 +3,23 @@
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.chart-header {
display: flex;
justify-content: space-between;
margin-bottom: 2.125rem;
align-items: center;
padding: 1.5rem 4.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
margin: -1rem;
ngx-legend-chart,
.period-select {
padding-top: 1rem;
@include nb-ltr(padding-left, 0.5rem);
@include nb-rtl(padding-right, 0.5rem);
}
.dropdown {
min-width: 8.125rem;
}
@include media-breakpoint-down(is) {
.chart-header {
flex-direction: column-reverse;
}
ngx-legend-chart {
align-self: flex-start;
::ng-deep .legends {
padding-left: 0;
}
::ng-deep .legend {
margin-left: 1rem;
}
}
.dropdown {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
align-self: flex-end;
@include media-breakpoint-up(md) {
.period-select {
@include nb-ltr(margin-left, auto);
@include nb-rtl(margin-right, auto);
}
}
}

2
src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
View file

@ -3,11 +3,11 @@
@include nb-install-component() {
.summary-container {
display: flex;
flex-wrap: wrap;
flex: 1;
background-color: nb-theme(background-basic-color-2);
justify-content: space-between;
padding: 1.5rem 4rem 1rem;
margin-bottom: 1rem;
border: 1px solid nb-theme(border-basic-color-3);
border-left: none;
border-right: none;

1
src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
View file

@ -34,7 +34,6 @@ $legend-canceled-color: #3f4fda;
overflow: hidden;
}
ngx-chart-panel-header,
ngx-profit-chart,
ngx-orders-chart {
padding: 0 1.25rem;

10
src/app/pages/e-commerce/legend-chart/legend-chart.component.html
View file

@ -1,7 +1,5 @@
<div class="legends">
<div *ngFor="let legend of legendItems" class="legend">
<div class="legend-item-color"
[style.background]="legend.iconColor"></div>
<div class="legend-title">{{ legend.title }}</div>
</div>
<div *ngFor="let legend of legendItems" class="legend">
<div class="legend-item-color"
[style.background]="legend.iconColor"></div>
<div class="legend-title">{{ legend.title }}</div>
</div>

21
src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
View file

@ -3,19 +3,17 @@
@import '~@nebular/theme/styles/global/breakpoints';
@include nb-install-component() {
.legends {
display: flex;
padding: 0 0 0 2.85rem;
}
display: flex;
flex-wrap: wrap;
.legend {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 4rem;
&:first-child {
margin-left: 0;
&:not(:last-child) {
@include nb-ltr(margin-right, 1rem);
@include nb-rtl(margin-left, 1rem);
}
}
@ -26,13 +24,8 @@
}
.legend-title {
padding: 0 0.75rem;
@include nb-ltr(padding-left, 0.75rem);
@include nb-rtl(padding-right, 0.75rem);
white-space: nowrap;
}
@include media-breakpoint-down(md) {
.legend {
margin-left: 1.5rem;
}
}
}