hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add angular material to project and implement first mat-toolbar for first screen design

Browse Source
This commit is contained in:
tim-herbst 2020-12-19 11:07:38 +01:00 committed by Tim Herbst
parent 6b0a804aa0
commit a72a454f3d
9 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/project-3/frontend/angular.json
View File

@ -28,6 +28,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []
@ -92,6 +93,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss" "src/styles.scss"
], ],
"scripts": [] "scripts": []

25
projects/project-3/frontend/package-lock.json generated
View File

@ -242,6 +242,23 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@angular/cdk": {
"version": "10.2.7",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-10.2.7.tgz",
"integrity": "sha512-ZQjDfTRTn7JuAKsf3jiIdU2XBaxxGBi/ZWYv5Pb3HCl6B4PISsIE5VWRhkoUogoAB0MiFHpjnWeIqknJEm11YQ==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.0.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": { "@angular/cli": {
"version": "10.2.1", "version": "10.2.1",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.2.1.tgz", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-10.2.1.tgz",
@ -471,6 +488,14 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@angular/material": {
"version": "10.2.7",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-10.2.7.tgz",
"integrity": "sha512-uk6JkRrKHaM9VFMzX7pWC83YNLVgXPB3D8U1yjSOafCdWwrRZgUHGr8MPlSILCr3o2nxgg5SsKdWcWwHuXXUZA==",
"requires": {
"tslib": "^2.0.0"
}
},
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "10.2.4", "version": "10.2.4",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.2.4.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.2.4.tgz",

2
projects/project-3/frontend/package.json
View File

@ -12,10 +12,12 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~10.2.0", "@angular/animations": "~10.2.0",
"@angular/cdk": "^10.2.7",
"@angular/common": "~10.2.0", "@angular/common": "~10.2.0",
"@angular/compiler": "~10.2.0", "@angular/compiler": "~10.2.0",
"@angular/core": "~10.2.0", "@angular/core": "~10.2.0",
"@angular/forms": "~10.2.0", "@angular/forms": "~10.2.0",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.2.0", "@angular/platform-browser": "~10.2.0",
"@angular/platform-browser-dynamic": "~10.2.0", "@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0", "@angular/router": "~10.2.0",

6
projects/project-3/frontend/src/app/app.module.ts
View File

@ -4,6 +4,8 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component'; import { MapComponent } from './map/map.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -12,7 +14,9 @@ import { MapComponent } from './map/map.component';
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

6
projects/project-3/frontend/src/app/map/map.component.html
View File

@ -1,3 +1,9 @@
<p>
<mat-toolbar>
<span>My Application</span>
</mat-toolbar>
</p>
<div class="map-container"> <div class="map-container">
<div class="map-frame"> <div class="map-frame">
<div id="map"></div> <div id="map"></div>

4
projects/project-3/frontend/src/index.html
View File

@ -6,8 +6,10 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

8
projects/project-3/frontend/src/styles.css
View File

@ -1,3 +1,11 @@
@import "~leaflet/dist/leaflet.css"; @import "~leaflet/dist/leaflet.css";
html, body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
/*# sourceMappingURL=styles.css.map */ /*# sourceMappingURL=styles.css.map */

2
projects/project-3/frontend/src/styles.css.map
View File

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ","file":"styles.css"} {"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ;AAER;EAAa;;;AACb;EAAO;EAAW","file":"styles.css"}

3
projects/project-3/frontend/src/styles.scss
View File

@ -1 +1,4 @@
@import "~leaflet/dist/leaflet.css"; @import "~leaflet/dist/leaflet.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }