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

Refactor homepage and header components.

Browse Source 
Moved header content logic based on `current_page` input for reusability. Updated styling and layout structure to improve maintainability and accommodate dynamic titles and subtitles.
This commit is contained in:
Teriuihi 2025-04-03 21:37:48 +02:00
parent 1d0f1d3896
commit e3c9fa2165
4 changed files with 157 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
<ng-container>
<header id="top">
<nav id="nav">
<div class="container">
<div id="mobile_nav">
@ -64,7 +65,8 @@
</div>
<a href="/"><img ngSrc="/public/img/logos/logo.png" alt="Altitude Server Logo" height="319" width="550"></a>
<ul id="nav_list">
<li class="nav_li"><a [id]="[current_page === 'index' ? 'current-page' : null]" class="nav_link" href="/">Home</a>
<li class="nav_li"><a [id]="[current_page === 'index' ? 'current-page' : null]" class="nav_link"
href="/">Home</a>
</li>
<li class="nav_li">
<span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
@ -102,12 +104,14 @@
</li>
<li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
<li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']">Vote</a></li>
<li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']">Vote</a>
</li>
<li class="nav_li">
<a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com">Store</a>
</li>
<li class="nav_li">
<a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])" class="nav_link fake_link">Altitude</a>
<a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])"
class="nav_link fake_link">Altitude</a>
<ul class="dropdown">
<li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
<li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
@ -131,4 +135,24 @@
</div>
</nav>
<ng-container *ngIf="current_page === 'home'">
<div class="title">
<h1 style="display: none;">{{ title }}</h1>
<img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
width="550">
<h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
</div>
<a id="scrollbutton" href="#scrollingpoint">
<span></span>
<p style="display: none;">Scroll Down</p>
</a>
</ng-container>
<ng-container *ngIf="current_page !== 'home'">
<div class="title">
<h1>{{ title }}</h1>
<h2>{{ sub_title }}</h2>
</div>
</ng-container>
</header>
</ng-container>

5
frontend/src/app/header/header.component.scss
View File

@ -417,3 +417,8 @@ input:checked + .slider:before {
display: none;
}
}
header {
background-size: cover;
background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
}

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

@ -1,4 +1,5 @@
import {Component, Input, OnInit} from '@angular/core';
import {ALTITUDE_VERSION} from '../constant';
@Component({
standalone: false,
@ -8,6 +9,7 @@ import {Component, Input, OnInit} from '@angular/core';
})
export class HeaderComponent implements OnInit {
@Input() title: string = '';
@Input() sub_title: string = '';
@Input() current_page: string = ''
public ngOnInit(): void {
@ -35,4 +37,5 @@ export class HeaderComponent implements OnInit {
}
}
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
}

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

@ -1,17 +1,5 @@
<ng-container>
<header id="top">
<app-header [title]="'Altitude'"></app-header>
<div class="title">
<h1 style="display: none;">Altitude Minecraft Server</h1>
<img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
width="550">
<h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ALTITUDE_VERSION}}!</h2>
</div>
<a id="scrollbutton" href="#scrollingpoint">
<span></span>
<p style="display: none;">Scroll Down</p>
</a>
</header>
<app-header [title]="'Altitude'" [current_page]="'home'"></app-header>
<main>
<section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
<!-- TODO load player count from old api or backend?-->