Skip to content
Snippets Groups Projects
Commit 000b05c2 authored by Udo Garmann's avatar Udo Garmann
Browse files

Navigation, Routing and Theming added

parent 86b62ca4
No related branches found
No related tags found
No related merge requests found
<p>rooms works!</p>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RoomsComponent } from './rooms.component';
describe('RoomsComponent', () => {
let component: RoomsComponent;
let fixture: ComponentFixture<RoomsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ RoomsComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(RoomsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-rooms',
templateUrl: './rooms.component.html',
styleUrls: ['./rooms.component.css']
})
export class RoomsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
<p>start works!</p>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StartComponent } from './start.component';
describe('StartComponent', () => {
let component: StartComponent;
let fixture: ComponentFixture<StartComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ StartComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StartComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-start',
templateUrl: './start.component.html',
styleUrls: ['./start.component.css']
})
export class StartComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
src/assets/THD-Logo.png

28.3 KiB

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Adjust Typography
@import
url("https://fonts.googleapis.com/css2?family=Saira+Sans:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Saira");
// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
$font-family: 'Saira',
$headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
@include mat-base-typography($custom-typography);
// Override typography for a specific Angular Material components.
@include mat-checkbox-typography($custom-typography);
// Override typography for all Angular Material, including mat-base-typography and all components.
@include angular-material-typography($custom-typography);
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$thd-palette-primary: (
50 : #e4e8ee,
100 : #bac6d5,
200 : #8da1b9,
300 : #5f7b9d,
400 : #3c5e88,
500 : #1a4273,
600 : #173c6b,
700 : #133360,
800 : #0f2b56,
900 : #081d43,
A100 : #7aa2ff,
A200 : #477fff,
A400 : #145cff,
A700 : #004cf9,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);
$thd-palette-accent:(
50 : #e0f3fc,
100 : #b3e2f7,
200 : #80cff1,
300 : #4dbceb,
400 : #26ade7,
500 : #009fe3,
600 : #0097e0,
700 : #008ddc,
800 : #0083d8,
900 : #0072d0,
A100 : #f8fcff,
A200 : #c5e2ff,
A400 : #92c8ff,
A700 : #79bbff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
));
$mit-ws-primary: mat-palette($thd-palette-primary);
$mit-ws-accent: mat-palette($thd-palette-accent, A200, A100, A400);
// The warn palette is optional (defaults to red).
$mit-ws-warn: mat-palette($mat-red);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$mit-ws-theme: mat-light-theme((
color: (
primary: $mit-ws-primary,
accent: $mit-ws-accent,
warn: $mit-ws-warn,
)
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($mit-ws-theme);
......@@ -2,12 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>MitWs</title>
<title>THD App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<body>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
.example-spacer {
flex: 1 1 auto;
}
*/
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment