diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 6fafe4b..9ed05ea 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,4 +1,5 @@ + \ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 798363e..e1c4f68 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -7,16 +7,23 @@ import { LoaderService } from './services/loader.service'; templateUrl: './app.component.html', styleUrl: './app.component.scss' }) + export class AppComponent implements OnInit{ title = 'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf'; isLoading: boolean = false; constructor(private loaderService: LoaderService) { } + + hasFooter() { + const footerPages: string[] = ['/main', '/ranking']; + return footerPages.includes(window.location.pathname); + } ngOnInit(): void { this.loaderService.isLoading.subscribe((value) => { this.isLoading = value; }); + } -} + diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 6e97ff2..a0ce3b7 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -20,11 +20,13 @@ import { InputfieldComponent } from './components/atoms/inputfield/inputfield.co import { SignupformComponent } from './components/organisms/signupform/signupform.component'; import { LoaderComponent } from './components/atoms/loader/loader.component'; import { LandingpageComponent } from './components/pages/landingpage/landingpage.component'; +import { FooterComponent } from './components/organisms/footer/footer.component'; import { UserCardComponent } from './components/atoms/user-card/user-card.component'; import { RankingTableComponent } from './components/organisms/ranking-table/ranking-table.component'; import { RankingPageComponent } from './components/pages/ranking-page/ranking-page.component'; + @NgModule({ declarations: [ AppComponent, @@ -43,10 +45,12 @@ import { RankingPageComponent } from './components/pages/ranking-page/ranking-pa SignupformComponent, LoaderComponent, LandingpageComponent, + FooterComponent, UserCardComponent, RankingTableComponent, RankingPageComponent, + ], imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule], providers: [provideAnimations()], diff --git a/frontend/src/app/components/organisms/footer/footer.component.html b/frontend/src/app/components/organisms/footer/footer.component.html new file mode 100644 index 0000000..786ebd7 --- /dev/null +++ b/frontend/src/app/components/organisms/footer/footer.component.html @@ -0,0 +1,22 @@ +
+ + + + +
\ No newline at end of file diff --git a/frontend/src/app/components/organisms/footer/footer.component.scss b/frontend/src/app/components/organisms/footer/footer.component.scss new file mode 100644 index 0000000..c592e65 --- /dev/null +++ b/frontend/src/app/components/organisms/footer/footer.component.scss @@ -0,0 +1,39 @@ +#container{ + //fix position at the bottom of the page + position: fixed; + bottom: 0; + + //format + borders + display: flex; + justify-content: space-evenly; + width: 100%; + height: 10vh; + background-color: var(--background-black); + color: var(--white); + border-top: 1px solid; + + //format navigation elements + .nav-element{ + text-align: center; + width: 25%; + height: 100%; + + .icons{ + width: 60%; + max-width: 4.5rem; + filter: brightness(0) invert(1); + padding-top: 5%; + } + } + .highlight{ + background-color: var(--white)!important; + .icons{ + filter:invert(0); + } + } + + //seperate navigation elements with borders + #nav-main, #nav-ranked, #nav-friendlist{ + border-right: 1px solid var(--white); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/organisms/footer/footer.component.spec.ts b/frontend/src/app/components/organisms/footer/footer.component.spec.ts new file mode 100644 index 0000000..f3e6953 --- /dev/null +++ b/frontend/src/app/components/organisms/footer/footer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FooterComponent } from './footer.component'; + +describe('FooterComponent', () => { + let component: FooterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [FooterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/components/organisms/footer/footer.component.ts b/frontend/src/app/components/organisms/footer/footer.component.ts new file mode 100644 index 0000000..b4345f3 --- /dev/null +++ b/frontend/src/app/components/organisms/footer/footer.component.ts @@ -0,0 +1,22 @@ +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'app-footer', + templateUrl: './footer.component.html', + styleUrl: './footer.component.scss' +}) +export class FooterComponent { + router: Router; + + constructor(router:Router){ + this.router=router + } + + navigate(path:string){ + this.router.navigateByUrl(path); + } + isOnPage(path:string):boolean{ + return this.router.url==path; + } +} diff --git a/frontend/src/assets/icons/friends.svg b/frontend/src/assets/icons/friends.svg new file mode 100644 index 0000000..15bf1a5 --- /dev/null +++ b/frontend/src/assets/icons/friends.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/home.svg b/frontend/src/assets/icons/home.svg new file mode 100644 index 0000000..aa47ad5 --- /dev/null +++ b/frontend/src/assets/icons/home.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/podium.svg b/frontend/src/assets/icons/podium.svg new file mode 100644 index 0000000..5ea6e93 --- /dev/null +++ b/frontend/src/assets/icons/podium.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/profile.svg b/frontend/src/assets/icons/profile.svg new file mode 100644 index 0000000..5619624 --- /dev/null +++ b/frontend/src/assets/icons/profile.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file