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

fix(dashboard): fix height inheritance for charts (Safari issue)

Browse source
This commit is contained in:
nixa 2017-09-19 16:48:38 +03:00
parent 01ebcdec8a
commit 4d516986b1
5 changed files with 29 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app/pages/dashboard/dashboard.component.html
View file

@ -44,12 +44,7 @@
</div> </div>
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6"> <div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<nb-card size="xsmall" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<ngx-solar [chartValue]="72"></ngx-solar> <ngx-solar [chartValue]="72"></ngx-solar>
</nb-card-body>
</nb-card>
<ngx-kitten></ngx-kitten> <ngx-kitten></ngx-kitten>
</div> </div>

3
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
View file

@ -4,8 +4,11 @@
display: block; display: block;
flex: 1; flex: 1;
position: relative;
.echart { .echart {
position: absolute;
width: 100%;
height: 100%; height: 100%;
} }
} }

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

@ -4,27 +4,24 @@
@include nb-install-component() { @include nb-install-component() {
display: flex; $padding: 1rem;
height: 100%; $padding: 1rem;
color: nb-theme(color-fg);
nb-card-body {
overflow: hidden;
padding: $padding;
}
.echart { .echart {
flex: 1; position: absolute;
height: 100%; height: calc(100% - 2 * #{$padding});
width: 40%; width: 40%;
} }
.info { .info {
display: flex; margin-left: 45%;
flex-direction: column; padding-top: 1.5rem;
flex: 1; color: nb-theme(color-fg);
align-self: center;
}
.date {
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bolder);
margin-bottom: 0.5rem;
} }
.value { .value {

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

@ -7,13 +7,17 @@ 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-header>Solar Energy Consumption</nb-card-header>
<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="date">June 7, 2017</div>
<div class="value">6. 421 kWh</div> <div class="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>
`, `,
}) })
export class SolarComponent implements AfterViewInit { export class SolarComponent implements AfterViewInit {

2
src/app/pages/dashboard/traffic/traffic.component.scss
View file

@ -12,6 +12,7 @@
nb-card-body { nb-card-body {
overflow: hidden; overflow: hidden;
position: relative;
} }
/deep/ canvas { /deep/ canvas {
@ -20,6 +21,7 @@
} }
.echart { .echart {
position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }