Rework folder structure in frontend

Pages are now grouped per group they appear in on in the header (where possible) Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc
2025-07-04 19:50:21 +02:00
parent c42fc38b2c
commit ebe66c87c0
169 changed files with 123 additions and 113 deletions
@@ -0,0 +1,46 @@
+<ng-container>
+  <app-header [current_page]="'socials'" height="300px" background_image="/public/img/backgrounds/trees.jpg"
+              [overlay_gradient]="0.5">>
+    <div class="title" header-content>
+      <h1 class="titleColor">Altitude Socials</h1>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="socialContainer" style="padding-top: 50px;">
+        <a href="https://discord.com/invite/alttd">
+          <img class="socialIcon" ngSrc="/public/img/logos/discordsocial.png"
+               title="discord.gg/alttd" alt="Altitude Discord" height="150"
+               width="150" style="width: 150px;">
+        </a>
+        <a href="https://www.tiktok.com/@alttdmc">
+          <img class="socialIcon" ngSrc="/public/img/logos/tiktoksocial.png"
+               title="alttdmc" alt="Altitude TikTok" height="150" width="150"
+               style="width: 150px;">
+        </a>
+      </div>
+      <div class="socialContainer">
+        <a href="https://www.instagram.com/alttdmc/">
+          <img class="socialIcon"
+               ngSrc="/public/img/logos/instagramsocial.png"
+               title="alttdmc" alt="Altitude Instagram" height="150"
+               width="150" style="width: 150px;">
+        </a>
+        <a href="https://twitter.com/alttdmc">
+          <img class="socialIcon" ngSrc="/public/img/logos/twittersocial.png"
+               title="alttdmc" alt="Altitude Twitter. Yes, Twitter. Not X."
+               height="150" width="150"
+               style="width: 150px;">
+        </a>
+      </div>
+      <div class="socialContainer" style="padding-bottom: 50px;">
+        <a href="https://www.youtube.com/c/alttd">
+          <img class="socialIcon" ngSrc="/public/img/logos/youtubesocial.png"
+               title="Altitude Community" alt="Altitude YouTube" height="150"
+               width="150" style="width: 150px;">
+        </a>
+      </div>
+    </section>
+  </main>
+</ng-container>
@@ -0,0 +1,32 @@
+main .socialContainer {
+  padding: 20px 0;
+}
+
+.socialContainer {
+  width: 80%;
+  max-width: 1020px;
+  display: flex;
+  align-items: center;
+  margin: auto;
+  justify-content: center;
+}
+
+.socialIcon {
+  max-width: 150px;
+  width: 100%;
+  padding: 0 50px 0 50px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.socialIcon:hover {
+  transform: scale(1.1);
+}
+
+//Different resolution changes
+@media (max-width: 500px) {
+  .socialIcon {
+    max-width: 120px;
+    width: 100%;
+    padding: 0 20px 0 20px;
+  }
+}
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SocialsComponent } from './socials.component';
+
+describe('SocialsComponent', () => {
+  let component: SocialsComponent;
+  let fixture: ComponentFixture<SocialsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SocialsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SocialsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {ScrollService} from '@services/scroll.service';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {HeaderComponent} from '@header/header.component';
+
+@Component({
+  selector: 'app-socials',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    NgOptimizedImage
+  ],
+  templateUrl: './socials.component.html',
+  styleUrl: './socials.component.scss'
+})
+export class SocialsComponent {
+  constructor(public scrollService: ScrollService) {
+  }
+}