Add header

This commit is contained in:
kevinpauer 2022-03-15 13:11:20 +01:00
parent 051001d6cb
commit cb57a778fd
9 changed files with 164 additions and 31 deletions

View File

@ -26,11 +26,9 @@
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/ipurple-green.css",
"src/styles.scss"
],
"scripts": []
@ -94,11 +92,9 @@
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"assets": ["src/favicon.ico", "src/assets"],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
"scripts": []

View File

@ -9,10 +9,12 @@
"version": "0.0.0",
"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/cdk": "^13.2.6",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/material": "^13.2.6",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
@ -341,6 +343,28 @@
"@angular/core": "13.2.6"
}
},
"node_modules/@angular/cdk": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz",
"integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==",
"dependencies": {
"tslib": "^2.3.0"
},
"optionalDependencies": {
"parse5": "^5.0.0"
},
"peerDependencies": {
"@angular/common": "^13.0.0 || ^14.0.0-0",
"@angular/core": "^13.0.0 || ^14.0.0-0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/cdk/node_modules/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
},
"node_modules/@angular/cli": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.2.6.tgz",
@ -551,6 +575,23 @@
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/material": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz",
"integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==",
"dependencies": {
"tslib": "^2.3.0"
},
"peerDependencies": {
"@angular/animations": "^13.0.0 || ^14.0.0-0",
"@angular/cdk": "13.2.6",
"@angular/common": "^13.0.0 || ^14.0.0-0",
"@angular/core": "^13.0.0 || ^14.0.0-0",
"@angular/forms": "^13.0.0 || ^14.0.0-0",
"@angular/platform-browser": "^13.0.0 || ^14.0.0-0",
"rxjs": "^6.5.3 || ^7.4.0"
}
},
"node_modules/@angular/platform-browser": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.2.6.tgz",
@ -11606,6 +11647,23 @@
"tslib": "^2.3.0"
}
},
"@angular/cdk": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz",
"integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.3.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": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.2.6.tgz",
@ -11751,6 +11809,14 @@
"tslib": "^2.3.0"
}
},
"@angular/material": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz",
"integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==",
"requires": {
"tslib": "^2.3.0"
}
},
"@angular/platform-browser": {
"version": "13.2.6",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.2.6.tgz",

View File

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

View File

@ -0,0 +1,18 @@
<mat-toolbar>
<button
mat-icon-button
class="example-icon"
aria-label="Example icon-button with menu icon"
>
<mat-icon>menu</mat-icon>
</button>
<span>Aktienbot</span>
<span class="example-spacer"></span>
<button
mat-icon-button
class="example-icon favorite-icon"
aria-label="Example icon-button with heart icon"
>
<mat-icon>settings</mat-icon>
</button>
</mat-toolbar>

View File

@ -0,0 +1,3 @@
.example-spacer {
flex: 1 1 auto;
}

View File

@ -1,22 +1,27 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './Views/login/login.component';
import { HeaderComponent } from './Views/header/header.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
HeaderComponent
],
declarations: [AppComponent, LoginComponent, HeaderComponent],
imports: [
BrowserModule,
AppRoutingModule
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
})
export class AppModule { }
export class AppModule {}

View File

@ -1,13 +1,22 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<head>
<meta charset="utf-8" />
<title>Aktienbot</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</body>
</html>

View File

@ -47,7 +47,6 @@
*/
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

View File

@ -1 +1,36 @@
/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/purple-green.css";
html,
body {
height: 100%;
overflow-x: hidden;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-card-standard {
position: relative;
width: 90%;
margin-left: auto;
margin-right: auto;
}
button {
cursor: pointer;
}
.form-button {
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
.invisible-button {
background: transparent;
border: none !important;
}