From 1a156e252dd69830e3a83a190074e8795d6b772f Mon Sep 17 00:00:00 2001 From: pgrondek Date: Sat, 2 May 2020 20:05:21 +0200 Subject: [PATCH] Add flex layout --- package-lock.json | 58 ++++++++++++---------- package.json | 1 + src/app/app.module.ts | 4 +- src/app/dashboard/card.css | 8 ++- src/app/dashboard/dashboard.component.html | 12 ++--- src/index.html | 2 +- 6 files changed, 42 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 978544b..c7e885a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -475,6 +475,11 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-9.1.4.tgz", "integrity": "sha512-ND240vncmVD2KVe/KSQU3d/DxxoRipFg1+jFOFZGt0n0orCBHk/V1fu9iaG1sRyldL0+rCQ+fTI+1N4DTmMnxA==" }, + "@angular/flex-layout": { + "version": "9.0.0-beta.29", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-9.0.0-beta.29.tgz", + "integrity": "sha512-93sxR+kYfYMOdnlWL0Q77FZ428gg8XnBu0YZm6GsCdkw/vLggIT/G1ZAqHlCPIODt6pxmCJ5KXh4ShvniIYDsA==" + }, "@angular/forms": { "version": "9.1.4", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.4.tgz", @@ -12315,12 +12320,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -12335,17 +12342,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -12462,7 +12472,8 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -12474,6 +12485,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -12488,6 +12500,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -12495,12 +12508,14 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -12519,6 +12534,7 @@ "version": "0.5.3", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -12608,7 +12624,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -12620,6 +12637,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -12733,6 +12751,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -13242,7 +13261,6 @@ "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -13257,8 +13275,7 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", @@ -13269,8 +13286,7 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -13387,8 +13403,7 @@ "inherits": { "version": "2.0.4", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -13400,7 +13415,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -13415,7 +13429,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -13423,14 +13436,12 @@ "minimist": { "version": "1.2.5", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.9.0", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -13449,7 +13460,6 @@ "version": "0.5.3", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -13511,8 +13521,7 @@ "npm-normalize-package-bin": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "npm-packlist": { "version": "1.4.8", @@ -13540,8 +13549,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -13553,7 +13561,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -13667,7 +13674,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json index 45c97c5..bbe01fc 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@angular/common": "~9.1.4", "@angular/compiler": "~9.1.4", "@angular/core": "~9.1.4", + "@angular/flex-layout": "^9.0.0-beta.29", "@angular/forms": "~9.1.4", "@angular/material": "^9.2.2", "@angular/platform-browser": "~9.1.4", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a502af6..a8be856 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,7 +13,7 @@ import {MatMenuModule} from '@angular/material/menu'; import {MatIconModule, MatIconRegistry} from '@angular/material/icon'; import {WeatherComponent} from './weather/weather.component'; import {HttpClientModule} from '@angular/common/http'; -import { MatButtonModule } from '@angular/material/button'; +import {FlexLayoutModule} from '@angular/flex-layout'; @NgModule({ declarations: [ @@ -33,7 +33,7 @@ import { MatButtonModule } from '@angular/material/button'; MatMenuModule, MatIconModule, HttpClientModule, - MatButtonModule + FlexLayoutModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/dashboard/card.css b/src/app/dashboard/card.css index ccde841..b37d1eb 100644 --- a/src/app/dashboard/card.css +++ b/src/app/dashboard/card.css @@ -1,9 +1,7 @@ .dashboard-card { - position: absolute; - top: 15px; - left: 15px; - right: 15px; - bottom: 15px; + display: block; + min-width: 500px; + margin: 15px; } .dashboard-card-content { diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index cd0db4c..e4d4ad5 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,10 +1,4 @@ -
- - - - - - - - +
+ +
diff --git a/src/index.html b/src/index.html index 3b65867..11c0ee5 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,6 @@ - +