Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add background image support to header components

Browse Source 
Updated header components to accept and render background images via a new `[background_image]` input property. Modified relevant templates to apply the background image dynamically and updated usage in `home` and `map` components.
This commit is contained in:
Teriuihi 2025-04-05 18:52:29 +02:00
parent 8d0da93c99
commit 5aec42320a
4 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/header/header.component.html
View File

@ -1,5 +1,5 @@
<ng-container> <ng-container>
<header id="top"> <header id="top" [ngStyle]="{ 'background-image': 'url(' + background_image + ')'}">
<nav id="nav" [ngClass]="active"> <nav id="nav" [ngClass]="active">
<div class="container"> <div class="container">
<div id="mobile_nav"> <div id="mobile_nav">

1
frontend/src/app/header/header.component.ts
View File

@ -11,6 +11,7 @@ export class HeaderComponent {
@Input() title: string = ''; @Input() title: string = '';
@Input() sub_title: string = ''; @Input() sub_title: string = '';
@Input() current_page: string = ''; @Input() current_page: string = '';
@Input() background_image: string = '';
public active: string = ''; public active: string = '';

3
frontend/src/app/home/home.component.html
View File

@ -1,5 +1,6 @@
<ng-container> <ng-container>
<app-header [title]="'Altitude'" [current_page]="'home'"></app-header> <app-header [title]="'Altitude'" [current_page]="'home'"
[background_image]="'/public/img/backgrounds/120spawn-min.png'"></app-header>
<main> <main>
<section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;"> <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
<!-- TODO load player count from old api or backend?--> <!-- TODO load player count from old api or backend?-->

3
frontend/src/app/map/map.component.html
View File

@ -1,5 +1,6 @@
<ng-container> <ng-container>
<app-header [title]="'Dynmap'" [current_page]="'map'"></app-header> <app-header [title]="'Dynmap'" [current_page]="'map'"
[background_image]="'public/img/backgrounds/map.jpg'"></app-header>
<div style="height: 100vh;"> <div style="height: 100vh;">