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): fix maps height

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-25 18:09:11 +03:00
parent 2f3684b3fc
commit 782bd3b9aa
4 changed files with 8 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,13 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nga-install-component() {
nga-card-header {
border: none;
}
nga-card-body { nga-card-body {
padding: 0; padding: 0;
} }
agm-map { /deep/ agm-map {
width: 100%; width: 100%;
height: 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);
}
} }
} }

3
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: `
<nga-card size="large"> <nga-card size="xlarge">
<nga-card-header>Gmaps</nga-card-header> <nga-card-header>Gmaps</nga-card-header>
<nga-card-body> <nga-card-body>
<agm-map [latitude]="lat" [longitude]="lng"> <agm-map [latitude]="lat" [longitude]="lng">
@ -15,6 +15,7 @@ import { Component } from '@angular/core';
`, `,
}) })
export class GmapsComponent { export class GmapsComponent {
lat: number = 51.678418; lat: number = 51.678418;
lng: number = 7.809007; lng: number = 7.809007;
} }

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

@ -1,9 +1,8 @@
@import '../../../@theme/styles/variables'; @import '../../../@theme/styles/variables';
@include nga-install-component() { @include nga-install-component() {
nga-card-header {
border: none; $card-header-border: 1px;
}
nga-card-body { nga-card-body {
padding: 0; padding: 0;
@ -11,6 +10,7 @@
/deep/ .leaflet-container { /deep/ .leaflet-container {
width: 100%; width: 100%;
height: 500px; height: calc(#{nga-theme(card-height-xlarge)} - (#{nga-theme(card-padding) * 2}) -
(#{nga-theme(card-header-font-size)} * #{nga-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: `
<nga-card> <nga-card size="xlarge">
<nga-card-header>Leaflet</nga-card-header> <nga-card-header>Leaflet</nga-card-header>
<nga-card-body> <nga-card-body>
<div leaflet [leafletOptions]="options"></div> <div leaflet [leafletOptions]="options"></div>