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> <ng-container>
<app-header [current_page]="'map'" <app-header [current_page]="'map'"
[background_image]="'public/img/backgrounds/map.jpg'" [background_image]="'public/img/backgrounds/map.jpg'"
[overlay_gradient]=0.65> [overlay_gradient]=0.65
[height]="'100vh'">
<div class="title" header-content> <div class="title" header-content>
<h1>Dynamic Server Maps</h1> <h1>Dynamic Server Maps</h1>
<h2>Which server would you like to see?</h2> <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> <ng-container>
<header id="top" <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"> <nav id="nav" [ngClass]="active">
<div class="container"> <div class="container">
<div id="mobile_nav"> <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 {CommonModule, NgOptimizedImage} from '@angular/common';
import {ThemeComponent} from '@shared-components/theme/theme.component'; import {ThemeComponent} from '@shared-components/theme/theme.component';
import {RouterLink} from '@angular/router'; import {RouterLink} from '@angular/router';
@ -25,10 +25,10 @@ export class HeaderComponent implements OnDestroy {
private authService: AuthService = inject(AuthService) private authService: AuthService = inject(AuthService)
private dialog: MatDialog = inject(MatDialog) private dialog: MatDialog = inject(MatDialog)
@Input() current_page: string = ''; current_page = input.required<string>();
@Input() background_image: string = ''; background_image = input.required<string>();
@Input() height: string = ''; height = input.required<string>();
@Input() overlay_gradient: number = 0; overlay_gradient = input.required<number>();
public active: string = ''; public active: string = '';
public inverseYPos: number = 0; public inverseYPos: number = 0;
@ -52,23 +52,23 @@ export class HeaderComponent implements OnDestroy {
} }
public getBackgroundImage() { public getBackgroundImage() {
if (this.overlay_gradient) { 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})`; return `linear-gradient(rgba(0, 0, 0, ${this.overlay_gradient()}), rgba(0, 0, 0, ${this.overlay_gradient()})), url(${this.background_image()})`;
} else { } else {
return `url(${this.background_image})`; return `url(${this.background_image()})`;
} }
} }
public getCurrentPageId(options: string[]) { public getCurrentPageId(options: string[]) {
if (options.includes(this.current_page)) { if (options.includes(this.current_page())) {
return 'current_page' return 'current_page'
} }
return null; return null;
} }
public getBackgroundPosition() { public getBackgroundPosition() {
if (this.current_page === 'home') { if (this.current_page() === 'home') {
return 'center ' + this.inverseYPos + 'px' return 'center ' + this.inverseYPos + 'px'
} else { } else {
return ''; return '';

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

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