feat(footer): add the component with css

This commit is contained in:
tekh 2025-08-08 11:12:00 +02:00
parent 545b629129
commit fc4209eb40
7 changed files with 76 additions and 3 deletions

View File

@ -2,3 +2,4 @@
<main class="container-fluid">
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>

View File

@ -5,11 +5,12 @@ import { TransferService } from './services/button/transfer.service';
import { UpdateService } from './services/button/update.service';
import { RefreshService } from './services/button/refresh.service';
import { DeletionService } from './services/button/deletion.service';
import { FooterComponent } from './components/footer/footer.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NavMenuComponent],
imports: [RouterOutlet, NavMenuComponent, FooterComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
changeDetection: ChangeDetectionStrategy.Default

View File

@ -0,0 +1,9 @@
<footer>
<mat-toolbar color="mat-h3" class="footer-toolbar">
<a class="mat-h3 footer-brand-link" [routerLink]="['/']">&copy; 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>

View File

@ -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);
}

View File

@ -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();
});
});

View File

@ -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 {
}

View File

@ -42,7 +42,7 @@ export class GroupFormComponent {
.subscribe(() => this.updateErrorMessage());
}
updateErrorMessage() {
public updateErrorMessage() {
if (this.groupname.hasError('required')) {
this.errorMessage.set('Wert eingeben');
} else {