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(maps): define height for the map containers (Safari issue)

Browse source
This commit is contained in:
nixa 2017-09-19 16:36:18 +03:00
parent 3536c82de1
commit 01ebcdec8a
6 changed files with 6 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/maps/bubble/bubble-map.component.scss
View file

@ -2,16 +2,12 @@
@include nb-install-component() { @include nb-install-component() {
$card-header-border: 1px;
nb-card-body { nb-card-body {
padding: nb-theme(card-padding) 0 0 0; padding: nb-theme(card-padding) 0 0 0;
} }
.echarts { .echarts {
width: 100%; width: 100%;
height: calc(#{nb-theme(card-height-xlarge)} - (#{nb-theme(card-padding) * 2}) - height: nb-theme(card-height-large);
(#{nb-theme(card-header-font-size)} * #{nb-theme(card-line-height)}) -
#{$card-header-border} - #{nb-theme(card-padding)});
} }
} }

2
src/app/pages/maps/bubble/bubble-map.component.ts
View file

@ -5,7 +5,7 @@ import { NbThemeService } from '@nebular/theme';
selector: 'ngx-bubble-map', selector: 'ngx-bubble-map',
styleUrls: ['./bubble-map.component.scss'], styleUrls: ['./bubble-map.component.scss'],
template: ` template: `
<nb-card size="xlarge"> <nb-card>
<nb-card-header>Bubble Maps</nb-card-header> <nb-card-header>Bubble Maps</nb-card-header>
<nb-card-body> <nb-card-body>
<div echarts [options]="options" class="echarts"></div> <div echarts [options]="options" class="echarts"></div>

2
src/app/pages/maps/gmaps/gmaps.component.scss
View file

@ -8,6 +8,6 @@
/deep/ agm-map { /deep/ agm-map {
width: 100%; width: 100%;
height: 100%; height: nb-theme(card-height-large);
} }
} }

2
src/app/pages/maps/gmaps/gmaps.component.ts
View file

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
selector: 'ngx-gmaps', selector: 'ngx-gmaps',
styleUrls: ['./gmaps.component.scss'], styleUrls: ['./gmaps.component.scss'],
template: ` template: `
<nb-card size="xlarge"> <nb-card>
<nb-card-header>Google Maps</nb-card-header> <nb-card-header>Google Maps</nb-card-header>
<nb-card-body> <nb-card-body>
<agm-map [latitude]="lat" [longitude]="lng"> <agm-map [latitude]="lat" [longitude]="lng">

5
src/app/pages/maps/leaflet/leaflet.component.scss
View file

@ -2,15 +2,12 @@
@include nb-install-component() { @include nb-install-component() {
$card-header-border: 1px;
nb-card-body { nb-card-body {
padding: 0; padding: 0;
} }
/deep/ .leaflet-container { /deep/ .leaflet-container {
width: 100%; width: 100%;
height: calc(#{nb-theme(card-height-xlarge)} - (#{nb-theme(card-padding) * 2}) - height: nb-theme(card-height-large);
(#{nb-theme(card-header-font-size)} * #{nb-theme(card-line-height)}) - #{$card-header-border});
} }
} }

2
src/app/pages/maps/leaflet/leaflet.component.ts
View file

@ -7,7 +7,7 @@ import 'style-loader!leaflet/dist/leaflet.css';
selector: 'ngx-leaflet', selector: 'ngx-leaflet',
styleUrls: ['./leaflet.component.scss'], styleUrls: ['./leaflet.component.scss'],
template: ` template: `
<nb-card size="xlarge"> <nb-card>
<nb-card-header>Leaflet Maps</nb-card-header> <nb-card-header>Leaflet Maps</nb-card-header>
<nb-card-body> <nb-card-body>
<div leaflet [leafletOptions]="options"></div> <div leaflet [leafletOptions]="options"></div>