Refactor header structure

Reorganized header component to use content projection for titles and simplified input properties.

frontend/src/app/header/header.component.html

@@ -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>

frontend/src/app/header/header.component.scss

@@ -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;

frontend/src/app/header/header.component.ts

@@ -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;
 }

frontend/src/app/home/home.component.html

@@ -1,6 +1,17 @@
 <ng-container>
-  <app-header [title]="'Altitude'" [current_page]="'home'"
+  <app-header [current_page]="'home'"
-              [background_image]="'/public/img/backgrounds/120spawn-min.png'"></app-header>
+              [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?-->

frontend/src/app/home/home.component.scss

@@ -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;
+  }
+}

frontend/src/app/home/home.component.ts

@@ -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;
 }

frontend/src/app/map/map.component.html

@@ -1,8 +1,9 @@
 <ng-container>
-  <app-header [title]="'Dynmap'" [current_page]="'map'"
+  <app-header [current_page]="'map'"
-              [background_image]="'public/img/backgrounds/map.jpg'"></app-header>
+              [background_image]="'public/img/backgrounds/map.jpg'">
-
+    <div class="title" header-content>
-  <div style="height: 100vh;">
+      <h1>Dynmap</h1>
-
+      <h2>some text</h2>
-  </div>
+    </div>
+  </app-header>
 </ng-container>