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

Replace Input() with input.required in header and made map header full height

Browse Source
This commit is contained in:
akastijn 2026-03-01 02:34:12 +01:00
parent 0113a38ace
commit d67f1a4f87
4 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
<ng-container>
<app-header [current_page]="'map'"
[background_image]="'public/img/backgrounds/map.jpg'"
[overlay_gradient]=0.65>
[overlay_gradient]=0.65
[height]="'100vh'">
<div class="title" header-content>
<h1>Dynamic Server Maps</h1>
<h2>Which server would you like to see?</h2>

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

@ -1,6 +1,6 @@
<ng-container>
<header id="top"
[ngStyle]="{ 'background-image': getBackgroundImage(),'height': height, 'background-position': getBackgroundPosition() }">
[ngStyle]="{ 'background-image': getBackgroundImage(),'height': height(), 'background-position': getBackgroundPosition() }">
<nav id="nav" [ngClass]="active">
<div class="container">
<div id="mobile_nav">

20
frontend/src/app/pages/header/header/header.component.ts
View File

@ -1,4 +1,4 @@
import {Component, computed, HostListener, inject, Input, OnDestroy, Signal} from '@angular/core';
import {Component, computed, HostListener, inject, input, OnDestroy, Signal} from '@angular/core';
import {CommonModule, NgOptimizedImage} from '@angular/common';
import {ThemeComponent} from '@shared-components/theme/theme.component';
import {RouterLink} from '@angular/router';
@ -25,10 +25,10 @@ export class HeaderComponent implements OnDestroy {
private authService: AuthService = inject(AuthService)
private dialog: MatDialog = inject(MatDialog)
@Input() current_page: string = '';
@Input() background_image: string = '';
@Input() height: string = '';
@Input() overlay_gradient: number = 0;
current_page = input.required<string>();
background_image = input.required<string>();
height = input.required<string>();
overlay_gradient = input.required<number>();
public active: string = '';
public inverseYPos: number = 0;
@ -52,23 +52,23 @@ export class HeaderComponent implements OnDestroy {
}
public getBackgroundImage() {
if (this.overlay_gradient) {
return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient}), rgba(0, 0, 0, ${this.overlay_gradient})), url(${this.background_image})`;
if (this.overlay_gradient()) {
return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient()}), rgba(0, 0, 0, ${this.overlay_gradient()})), url(${this.background_image()})`;
} else {
return `url(${this.background_image})`;
return `url(${this.background_image()})`;
}
}
public getCurrentPageId(options: string[]) {
if (options.includes(this.current_page)) {
if (options.includes(this.current_page())) {
return 'current_page'
}
return null;
}
public getBackgroundPosition() {
if (this.current_page === 'home') {
if (this.current_page() === 'home') {
return 'center ' + this.inverseYPos + 'px'
} else {
return '';

7
frontend/src/app/pages/home/home.component.html
View File

@ -1,6 +1,9 @@
<ng-container>
<app-header [current_page]="'home'" height="100vh"
[background_image]="'/public/img/backgrounds/120spawn-min.png'">
<app-header [current_page]="'home'"
[height]="'100vh'"
[background_image]="'/public/img/backgrounds/120spawn-min.png'"
[overlay_gradient]="0"
>
<div class="title" header-content>
<h1 style="display: none;">Altitude</h1>
<img id="header-img" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"