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

refactor(e-commerce): country borders

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-17 20:47:38 +03:00
parent bcffb50ae8
commit fb06ad5b41
4 changed files with 11 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
View file

@ -17,13 +17,8 @@
margin-left: 1rem; margin-left: 1rem;
} }
.title {
font-family: nb-theme(card-header-font-family);
color: nb-theme(color-fg);
}
.echart { .echart {
height: 85%; height: 75%;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
@ -32,9 +27,5 @@
nb-theme(card-border-width) nb-theme(card-border-width)
nb-theme(card-header-border-type) nb-theme(card-header-border-type)
nb-theme(card-header-border-color); nb-theme(card-header-border-color);
.echart {
height: 75%;
}
} }
} }

4
src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.ts
View file

@ -9,8 +9,8 @@ import { LayoutService } from '../../../../@core/utils/layout.service';
styleUrls: ['./country-orders-chart.component.scss'], styleUrls: ['./country-orders-chart.component.scss'],
template: ` template: `
<div class="header"> <div class="header">
<span class="title">Selected Country/Region</span> <span class="caption">Selected Country/Region</span>
<h2>{{countryName}}</h2> <h2 class="h4">{{ countryName }}</h2>
</div> </div>
<div echarts <div echarts
[options]="option" [options]="option"

2
src/app/pages/e-commerce/country-orders/country-orders.component.ts
View file

@ -7,7 +7,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
selector: 'ngx-country-orders', selector: 'ngx-country-orders',
styleUrls: ['./country-orders.component.scss'], styleUrls: ['./country-orders.component.scss'],
template: ` template: `
<nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'xxlarge'"> <nb-card [size]="breakpoint.width >= breakpoints.md ? 'medium' : 'giant'">
<nb-card-header>Country Orders Statistics</nb-card-header> <nb-card-header>Country Orders Statistics</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-country-orders-map (select)="selectCountryById($event)" <ngx-country-orders-map (select)="selectCountryById($event)"

35
src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
View file

@ -10,15 +10,7 @@
.leaflet-container { .leaflet-container {
height: 100%; height: 100%;
background-color: nb-theme(layout-bg); background-color: nb-theme(layout-background-color);
@include nb-for-theme(default) {
background-color: nb-theme(color-white);
}
@include nb-for-theme(corporate) {
background-color: nb-theme(color-white);
}
} }
::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom { ::ng-deep .leaflet-top, ::ng-deep .leaflet-bottom {
@ -33,38 +25,25 @@
border: none; border: none;
a { a {
background-color: nb-theme(color-success); background-color: nb-theme(color-success-default);
color: nb-theme(color-white); color: nb-theme(text-alternate-color);
border-bottom: none; border-bottom: none;
height: 2.5rem;
@include nb-for-theme(cosmic) {
background-color: nb-theme(color-primary);
}
@include nb-for-theme(corporate) {
background-color: nb-theme(color-primary);
}
} }
.leaflet-control-zoom-in { .leaflet-control-zoom-in {
border-top-left-radius: nb-theme(btn-border-radius); border-top-left-radius: nb-theme(button-rectangle-border-radius);
border-top-right-radius: nb-theme(btn-border-radius); border-top-right-radius: nb-theme(button-rectangle-border-radius);
} }
.leaflet-control-zoom-out { .leaflet-control-zoom-out {
margin-top: 1px; margin-top: 1px;
border-bottom-left-radius: nb-theme(btn-border-radius); border-bottom-left-radius: nb-theme(button-rectangle-border-radius);
border-bottom-right-radius: nb-theme(btn-border-radius); border-bottom-right-radius: nb-theme(button-rectangle-border-radius);
} }
} }
::ng-deep .leaflet-control-attribution { ::ng-deep .leaflet-control-attribution {
background: transparent; background: transparent;
a {
color: nb-theme(color-fg);
}
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {