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

fix(maps): improve maps styles

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-24 11:52:42 +03:00
parent 1a60dfa81b
commit ef994704c2
6 changed files with 43 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/pages/maps/gmaps/gmaps.component.html
View file

@ -1,12 +0,0 @@
<div class="row">
<div class="col-md-12">
<nga-card size="large">
<nga-card-header>Gmaps</nga-card-header>
<nga-card-body>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</nga-card-body>
</nga-card>
</div>
</div>

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

@ -1,7 +1,21 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nga-install-component() {
/deep/ agm-map .agm-map-container-inner { nga-card-header {
height: calc(#{nga-theme(card-height-xmedium)} - 50px); border: none;
}
nga-card-body {
padding: 0;
}
agm-map {
width: 100%;
height: 100%;
/deep/ .agm-map-container-inner {
border-bottom-left-radius: nga-theme(card-border-radius);
border-bottom-right-radius: nga-theme(card-border-radius);
}
} }
} }

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

@ -3,11 +3,18 @@ import { Component } from '@angular/core';
@Component({ @Component({
selector: 'ngx-gmaps', selector: 'ngx-gmaps',
styleUrls: ['./gmaps.component.scss'], styleUrls: ['./gmaps.component.scss'],
templateUrl: './gmaps.component.html', template: `
<nga-card size="large">
<nga-card-header>Gmaps</nga-card-header>
<nga-card-body>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</nga-card-body>
</nga-card>
`,
}) })
export class GmapsComponent { export class GmapsComponent {
lat: number = 51.678418; lat: number = 51.678418;
lng: number = 7.809007; lng: number = 7.809007;
} }

11
src/app/pages/maps/leaflet/leaflet.component.html
View file

@ -1,11 +0,0 @@
<div class="row">
<div class="col-md-12">
<nga-card size="large">
<nga-card-header>Leaflet</nga-card-header>
<nga-card-body>
<div leaflet [leafletOptions]="options">
</div>
</nga-card-body>
</nga-card>
</div>
</div>

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

@ -1,9 +1,16 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nga-install-component() {
display: block; nga-card-header {
border: none;
}
nga-card-body {
padding: 0;
}
/deep/ .leaflet-container { /deep/ .leaflet-container {
height: calc(#{nga-theme(card-height-xmedium)} - 50px); width: 100%;
height: 500px;
} }
} }

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

@ -6,7 +6,14 @@ import 'style-loader!leaflet/dist/leaflet.css';
@Component({ @Component({
selector: 'ngx-leaflet', selector: 'ngx-leaflet',
styleUrls: ['./leaflet.component.scss'], styleUrls: ['./leaflet.component.scss'],
templateUrl: './leaflet.component.html', template: `
<nga-card>
<nga-card-header>Leaflet</nga-card-header>
<nga-card-body>
<div leaflet [leafletOptions]="options"></div>
</nga-card-body>
</nga-card>
`,
}) })
export class LeafletComponent { export class LeafletComponent {
@ -17,5 +24,4 @@ export class LeafletComponent {
zoom: 5, zoom: 5,
center: L.latLng({ lat: 38.991709, lng: -76.886109 }), center: L.latLng({ lat: 38.991709, lng: -76.886109 }),
}; };
} }