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

refactor(iot): solar consumption widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 16:18:03 +03:00
parent 6a5baa79e7
commit 46ce65bf88
2 changed files with 10 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/app/pages/dashboard/solar/solar.component.scss
View file

@ -4,62 +4,31 @@
@include nb-install-component() { @include nb-install-component() {
$padding: 1rem;
nb-card-body { nb-card-body {
overflow: hidden; overflow: hidden;
padding: $padding;
} }
.echart { .echart {
position: absolute; position: absolute;
left: 1em; left: 1em;
height: calc(100% - 2 * #{$padding}); height: calc(100% - 2 * 1rem);
width: 40%; width: 40%;
} }
.info { .info {
margin-left: 45%; margin-left: 45%;
padding-top: 1.5rem; padding-top: 1rem;
color: nb-theme(color-fg);
} }
.value { .value {
font-family: nb-theme(font-secondary); margin: 0;
font-size: 2rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
} }
.details { .details {
font-size: 1.25rem; color: nb-theme(text-hint-color);
font-weight: nb-theme(font-weight-bolder); font-family: nb-theme(text-subtitle-2-font-family);
line-height: 1; font-size: nb-theme(text-subtitle-2-font-size);
span { font-weight: nb-theme(text-subtitle-2-font-weight);
font-size: 1rem; line-height: nb-theme(text-subtitle-2-line-height);
font-weight: nb-theme(font-weight-light);
}
}
.text-hint {
font-size: 1rem;
}
@include nb-for-theme(cosmic) {
color: nb-theme(color-fg-heading);
.value {
color: nb-theme(color-fg-highlight);
}
.details span {
color: nb-theme(color-fg);
}
}
@include media-breakpoint-down(xs) {
.value {
font-size: 1.75rem;
}
} }
} }

4
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -8,13 +8,13 @@ declare const echarts: any;
selector: 'ngx-solar', selector: 'ngx-solar',
styleUrls: ['./solar.component.scss'], styleUrls: ['./solar.component.scss'],
template: ` template: `
<nb-card size="xsmall" class="solar-card"> <nb-card size="tiny" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header> <nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body> <nb-card-body>
<div echarts [options]="option" class="echart"> <div echarts [options]="option" class="echart">
</div> </div>
<div class="info"> <div class="info">
<div class="value">6. 421 kWh</div> <div class="h4 value">6.421 kWh</div>
<div class="details"><span>out of</span> 8.421 kWh</div> <div class="details"><span>out of</span> 8.421 kWh</div>
</div> </div>
</nb-card-body> </nb-card-body>