Refactor homepage and header components.
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:
parent
1d0f1d3896
commit
e3c9fa2165
|
|
@ -1,134 +1,158 @@
|
|||
<ng-container>
|
||||
<nav id="nav">
|
||||
<div class="container">
|
||||
<div id="mobile_nav">
|
||||
<div id="menu_toggle">
|
||||
<!--A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
|
||||
<input type="checkbox"/>
|
||||
<!--Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonald's stuff.-->
|
||||
<span class="hamburger"></span>
|
||||
<span class="hamburger"></span>
|
||||
<span class="hamburger"></span>
|
||||
<!--Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
|
||||
<ul id="mobile_nav_list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Features</a>
|
||||
<ul class="mobile_dd">
|
||||
<li><a [routerLink]="['/map']">Map</a></li>
|
||||
<li><a [routerLink]="['/economy']">Economy</a></li>
|
||||
<!-- <li><a [routerLink]="['/events']">Events</a></li> -->
|
||||
<li><a [routerLink]="['/claiming']">Land Claiming</a></li>
|
||||
<li><a [routerLink]="['/mypet']">MyPet</a></li>
|
||||
<li><a [routerLink]="['/warps']">Warps</a></li>
|
||||
<li><a [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li><a
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Reference</a>
|
||||
<ul class="mobile_dd">
|
||||
<li><a [routerLink]="['/guide']">Guide Book</a></li>
|
||||
<!-- <li><a [routerLink]="['/faq']">FAQ</a></li> -->
|
||||
<li><a [routerLink]="['/ranks']">Ranks</a></li>
|
||||
<li><a [routerLink]="['/rules']">Rules</a></li>
|
||||
<li><a [routerLink]="['/commandlist']">Command List</a></li>
|
||||
<li><a [routerLink]="['/mapart']">Mapart</a></li>
|
||||
<li><a [routerLink]="['/lag']">Reducing Lag</a></li>
|
||||
<li><a [routerLink]="['/staffpowers']">Staff Powers</a></li>
|
||||
<li><a [routerLink]="['/nicknames']">Nicknames</a></li>
|
||||
<li><a [routerLink]="['/bans']">Bans</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
|
||||
<li><a [routerLink]="['/vote']">Vote</a></li>
|
||||
<li><a href="https://store.alttd.com">Store</a></li>
|
||||
<li>
|
||||
<a href="#">Altitude</a>
|
||||
<ul class="mobile_dd">
|
||||
<li><a [routerLink]="['/about']">About Us</a></li>
|
||||
<li><a [routerLink]="['/socials']">Socials</a></li>
|
||||
<li><a [routerLink]="['/team']">Team</a></li>
|
||||
<li><a [routerLink]="['/birthdays']">Famous Birthdays</a></li>
|
||||
<li><a [routerLink]="['/community']">Community</a></li>
|
||||
<li><a href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
|
||||
<li><a href="https://alttd.com/appeal">Ban Appeal</a></li>
|
||||
<li><a href="https://alttd.com/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<header id="top">
|
||||
<nav id="nav">
|
||||
<div class="container">
|
||||
<div id="mobile_nav">
|
||||
<div id="menu_toggle">
|
||||
<!--A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
|
||||
<input type="checkbox"/>
|
||||
<!--Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonald's stuff.-->
|
||||
<span class="hamburger"></span>
|
||||
<span class="hamburger"></span>
|
||||
<span class="hamburger"></span>
|
||||
<!--Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
|
||||
<ul id="mobile_nav_list">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>
|
||||
<a href="#">Features</a>
|
||||
<ul class="mobile_dd">
|
||||
<li><a [routerLink]="['/map']">Map</a></li>
|
||||
<li><a [routerLink]="['/economy']">Economy</a></li>
|
||||
<!-- <li><a [routerLink]="['/events']">Events</a></li> -->
|
||||
<li><a [routerLink]="['/claiming']">Land Claiming</a></li>
|
||||
<li><a [routerLink]="['/mypet']">MyPet</a></li>
|
||||
<li><a [routerLink]="['/warps']">Warps</a></li>
|
||||
<li><a [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li><a
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Reference</a>
|
||||
<ul class="mobile_dd">
|
||||
<li><a [routerLink]="['/guide']">Guide Book</a></li>
|
||||
<!-- <li><a [routerLink]="['/faq']">FAQ</a></li> -->
|
||||
<li><a [routerLink]="['/ranks']">Ranks</a></li>
|
||||
<li><a [routerLink]="['/rules']">Rules</a></li>
|
||||
<li><a [routerLink]="['/commandlist']">Command List</a></li>
|
||||
<li><a [routerLink]="['/mapart']">Mapart</a></li>
|
||||
<li><a [routerLink]="['/lag']">Reducing Lag</a></li>
|
||||
<li><a [routerLink]="['/staffpowers']">Staff Powers</a></li>
|
||||
<li><a [routerLink]="['/nicknames']">Nicknames</a></li>
|
||||
<li><a [routerLink]="['/bans']">Bans</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
|
||||
<li><a [routerLink]="['/vote']">Vote</a></li>
|
||||
<li><a href="https://store.alttd.com">Store</a></li>
|
||||
<li>
|
||||
<a href="#">Altitude</a>
|
||||
<ul class="mobile_dd">
|
||||
<li><a [routerLink]="['/about']">About Us</a></li>
|
||||
<li><a [routerLink]="['/socials']">Socials</a></li>
|
||||
<li><a [routerLink]="['/team']">Team</a></li>
|
||||
<li><a [routerLink]="['/birthdays']">Famous Birthdays</a></li>
|
||||
<li><a [routerLink]="['/community']">Community</a></li>
|
||||
<li><a href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
|
||||
<li><a href="https://alttd.com/appeal">Ban Appeal</a></li>
|
||||
<li><a href="https://alttd.com/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<li class="nav_li">
|
||||
<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>
|
||||
<li class="nav_li">
|
||||
<span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
|
||||
'skyblock', 'claiming'])" class="nav_link fake_link">Features</span>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/events']">Events</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/claiming']">Land Claiming</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mypet']">MyPet</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/warps']">Warps</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li class="nav_li"><a class="nav_link2"
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/events']">Events</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/claiming']">Land Claiming</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mypet']">MyPet</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/warps']">Warps</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li class="nav_li"><a class="nav_link2"
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestions
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<span
|
||||
[id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'art', 'lag', 'staffpowers',
|
||||
'nicknames', 'bans'])" class="nav_link fake_link">Reference</span>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/ranks']">Ranks</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/rules']">Rules</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/commandlist']">Command List</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mapart']">Mapart</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/lag']">Reducing Lag</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/staffpowers']">Staff Powers</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/nicknames']">Nicknames</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/bans']">Bans</a></li>
|
||||
</ul>
|
||||
</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 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>
|
||||
<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>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/team']">Team</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/birthdays']">Famous Birthdays</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener"
|
||||
href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
|
||||
Appeal</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="switch-div" style="z-index: 1;">
|
||||
<label class="switch">
|
||||
<input type="checkbox" onchange="toggleTheme()" id="slider">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/ranks']">Ranks</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/rules']">Rules</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/commandlist']">Command List</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mapart']">Mapart</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/lag']">Reducing Lag</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/staffpowers']">Staff Powers</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/nicknames']">Nicknames</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/bans']">Bans</a></li>
|
||||
</ul>
|
||||
</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 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>
|
||||
<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>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/team']">Team</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/birthdays']">Famous Birthdays</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener"
|
||||
href="https://alttd.typeform.com/to/dnKlkX">Contact Us</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
|
||||
Appeal</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="switch-div" style="z-index: 1;">
|
||||
<label class="switch">
|
||||
<input type="checkbox" onchange="toggleTheme()" id="slider">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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?-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user