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

@@ -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">
<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>
<app-root></app-root>
</body>
<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" />
<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>
</html>

View File

@@ -45,8 +45,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
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;
}