Refactor header structure
Reorganized header component to use content projection for titles and simplified input properties.
This commit is contained in:
parent
5aec42320a
commit
42dd1a184c
|
|
@ -131,24 +131,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<ng-content select="[header-content]"></ng-content>
|
||||
|
||||
<ng-container *ngIf="current_page === 'home'">
|
||||
<div class="title">
|
||||
<h1 style="display: none;">{{ title }}</h1>
|
||||
<img id="header-img" 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="scroll-button" (click)="scrollToSection()">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -259,105 +259,6 @@ nav img {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#scroll-button {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
color: #fff;
|
||||
transition: opacity .3s;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#scroll-button:hover {
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#scroll-button span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-left: -23px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#scroll-button span::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -12px 0 0 -8px;
|
||||
border-left: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#scroll-button span::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
-webkit-animation: sdb03 3s infinite;
|
||||
animation: sdb03 3s infinite;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sdb03 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sdb03 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
.dropdown2 {
|
||||
top: 12px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import {Component, HostListener, Input} from '@angular/core';
|
||||
import {ALTITUDE_VERSION} from '../constant';
|
||||
|
||||
@Component({
|
||||
standalone: false,
|
||||
|
|
@ -8,8 +7,6 @@ import {ALTITUDE_VERSION} from '../constant';
|
|||
styleUrls: ['./header.component.scss']
|
||||
})
|
||||
export class HeaderComponent {
|
||||
@Input() title: string = '';
|
||||
@Input() sub_title: string = '';
|
||||
@Input() current_page: string = '';
|
||||
@Input() background_image: string = '';
|
||||
|
||||
|
|
@ -25,22 +22,10 @@ export class HeaderComponent {
|
|||
}
|
||||
}
|
||||
|
||||
scrollToSection(): void {
|
||||
const element = document.getElementById('scrollingpoint');
|
||||
if (element) {
|
||||
element.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
} else {
|
||||
console.error('Element with id "scrollingpoint" not found.');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public getCurrentPageId(options: string[]) {
|
||||
if (options.includes(this.current_page)) {
|
||||
return 'current_page'
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
<ng-container>
|
||||
<app-header [title]="'Altitude'" [current_page]="'home'"
|
||||
[background_image]="'/public/img/backgrounds/120spawn-min.png'"></app-header>
|
||||
<app-header [current_page]="'home'"
|
||||
[background_image]="'/public/img/backgrounds/120spawn-min.png'">
|
||||
<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"
|
||||
width="550">
|
||||
<h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
|
||||
<a id="scroll-button" (click)="scrollToSection()">
|
||||
<span></span>
|
||||
<p style="display: none;">Scroll Down</p>
|
||||
</a>
|
||||
</div>
|
||||
</app-header>
|
||||
<main>
|
||||
<section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
|
||||
<!-- TODO load player count from old api or backend?-->
|
||||
|
|
|
|||
|
|
@ -18,3 +18,103 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
#scroll-button {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
-webkit-transform: translate(0, -50%);
|
||||
transform: translate(0, -50%);
|
||||
color: #fff;
|
||||
transition: opacity .3s;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
#scroll-button:hover {
|
||||
opacity: .5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#scroll-button span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
margin-left: -23px;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#scroll-button span::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
content: '';
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -12px 0 0 -8px;
|
||||
border-left: 1px solid #fff;
|
||||
border-bottom: 1px solid #fff;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#scroll-button span::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
|
||||
border-radius: 100%;
|
||||
opacity: 0;
|
||||
-webkit-animation: sdb03 3s infinite;
|
||||
animation: sdb03 3s infinite;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@-webkit-keyframes sdb03 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sdb03 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
60% {
|
||||
box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,14 @@ export class HomeComponent implements OnInit {
|
|||
navigator.clipboard.writeText(text);
|
||||
}
|
||||
|
||||
scrollToSection(): void {
|
||||
const element = document.getElementById('scrollingpoint');
|
||||
if (element) {
|
||||
element.scrollIntoView({behavior: 'smooth', block: 'start'});
|
||||
} else {
|
||||
console.error('Element with id "scrollingpoint" not found.');
|
||||
}
|
||||
}
|
||||
|
||||
protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<ng-container>
|
||||
<app-header [title]="'Dynmap'" [current_page]="'map'"
|
||||
[background_image]="'public/img/backgrounds/map.jpg'"></app-header>
|
||||
|
||||
<div style="height: 100vh;">
|
||||
|
||||
<app-header [current_page]="'map'"
|
||||
[background_image]="'public/img/backgrounds/map.jpg'">
|
||||
<div class="title" header-content>
|
||||
<h1>Dynmap</h1>
|
||||
<h2>some text</h2>
|
||||
</div>
|
||||
</app-header>
|
||||
</ng-container>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user