feat(footer): add the component with css
This commit is contained in:
parent
545b629129
commit
fc4209eb40
@ -1,4 +1,5 @@
|
|||||||
<app-nav-menu></app-nav-menu>
|
<app-nav-menu></app-nav-menu>
|
||||||
<main class="container-fluid">
|
<main class="container-fluid">
|
||||||
<router-outlet></router-outlet>
|
<router-outlet></router-outlet>
|
||||||
</main>
|
</main>
|
||||||
|
<app-footer></app-footer>
|
||||||
@ -5,11 +5,12 @@ import { TransferService } from './services/button/transfer.service';
|
|||||||
import { UpdateService } from './services/button/update.service';
|
import { UpdateService } from './services/button/update.service';
|
||||||
import { RefreshService } from './services/button/refresh.service';
|
import { RefreshService } from './services/button/refresh.service';
|
||||||
import { DeletionService } from './services/button/deletion.service';
|
import { DeletionService } from './services/button/deletion.service';
|
||||||
|
import { FooterComponent } from './components/footer/footer.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [RouterOutlet, NavMenuComponent],
|
imports: [RouterOutlet, NavMenuComponent, FooterComponent],
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrl: './app.component.scss',
|
styleUrl: './app.component.scss',
|
||||||
changeDetection: ChangeDetectionStrategy.Default
|
changeDetection: ChangeDetectionStrategy.Default
|
||||||
|
|||||||
@ -0,0 +1,9 @@
|
|||||||
|
<footer>
|
||||||
|
<mat-toolbar color="mat-h3" class="footer-toolbar">
|
||||||
|
<a class="mat-h3 footer-brand-link" [routerLink]="['/']">© 2025 Digital Data</a>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a mat-button class="mat-body-strong" [routerLink]="['/privacy-policy']">Datenschutz</a>
|
||||||
|
<a mat-button class="mat-body-strong" href="https://digitaldata.works/#kontakt" target="_blank">Kontakt</a>
|
||||||
|
</div>
|
||||||
|
</mat-toolbar>
|
||||||
|
</footer>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
.footer-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
|
z-index: 1000;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links{
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { FooterComponent } from './footer.component';
|
||||||
|
|
||||||
|
describe('FooterComponent', () => {
|
||||||
|
let component: FooterComponent;
|
||||||
|
let fixture: ComponentFixture<FooterComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [FooterComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(FooterComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
||||||
|
import { RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-footer',
|
||||||
|
standalone: true,
|
||||||
|
imports: [
|
||||||
|
MatToolbarModule, RouterModule
|
||||||
|
],
|
||||||
|
templateUrl: './footer.component.html',
|
||||||
|
styleUrl: './footer.component.scss'
|
||||||
|
})
|
||||||
|
export class FooterComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@ -42,7 +42,7 @@ export class GroupFormComponent {
|
|||||||
.subscribe(() => this.updateErrorMessage());
|
.subscribe(() => this.updateErrorMessage());
|
||||||
}
|
}
|
||||||
|
|
||||||
updateErrorMessage() {
|
public updateErrorMessage() {
|
||||||
if (this.groupname.hasError('required')) {
|
if (this.groupname.hasError('required')) {
|
||||||
this.errorMessage.set('Wert eingeben');
|
this.errorMessage.set('Wert eingeben');
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user