[WIP] New UI

Mediatheke-Client/src/app/app.component.html

@@ -1,5 +1,6 @@
 <app-header></app-header>
-<div class="wrapper">
+<app-hero *ngIf="router.url === '/'"></app-hero>
+<div [class.unset-padding]="router.url === '/'" class="wrapper">
     <router-outlet></router-outlet>
 </div>
 <app-footer></app-footer>

Mediatheke-Client/src/app/app.component.scss

@@ -1,14 +1,18 @@
 .wrapper {
     padding: 30px;
     padding-top: 150px;
-    max-width: 1600px;
     margin: auto;
 
     @media screen and (max-width: 768px) {
         padding-top: 55px;
     }
 }
 
+.unset-padding {
+    padding: unset;
+    padding-top: 30px;
+}
+
 /* make input big poppy flat and rounded corners */
 input {
     border: none;

Mediatheke-Client/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { BackendService } from './services/backend';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +8,9 @@ import { BackendService } from './services/backend';
 })
 export class AppComponent {
 
-  constructor(private backendService: BackendService) { }
+  constructor(
+    public router: Router
+  ) { }
 
   ngOnInit() { }
 }

Mediatheke-Client/src/app/app.module.ts

@@ -32,6 +32,9 @@ import { SincePipe } from './shared/since.pipe';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { VideoSeriesNavComponent } from './video-series-nav/video-series-nav.component';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { HeroComponent } from './hero/hero.component';
+import { VideoSmallListComponent } from './video-small-list/video-small-list.component';
+import { VideoTopicRowComponent } from './video-topic-row/video-topic-row.component';
 
 @NgModule({
   declarations: [
@@ -55,6 +58,9 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
     VideoResultListComponent,
     SincePipe,
     VideoSeriesNavComponent,
+    HeroComponent,
+    VideoSmallListComponent,
+    VideoTopicRowComponent,
   ],
   imports: [
     BrowserModule,

Mediatheke-Client/src/app/footer/footer.component.html

@@ -1,39 +1,27 @@
-<footer class="footer py-4">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-6 d-flex justify-content-center justify-content-md-start mb-3 mb-md-0">
-        <a href="/"><img src="assets/logo-dark.svg" alt="mediatheke Logo"></a>
+<div class="container-fluid">
+  <h1>... geh schlafen.</h1>
 
-      </div>
-      <div class="col-md-6">
-        <ul class="list-inline text-center text-md-right mb-0">
-          <li class="list-inline-item mx-2"><a href="mailto:[email protected]"><i-bs name="mailbox2"
-                class="bi-envelope"></i-bs></a></li>
-          <li class="list-inline-item mx-2"><a href="/about-us"><i-bs name="people" class="bi-people"></i-bs></a></li>
-          <li class="list-inline-item mx-2"><a href="https://github.com/Codezeit" target="_blank"><i-bs name="github"
-                class="bi-github"></i-bs></a></li>
-          <li class="list-inline-item mx-2"><a href="/api/docs"><i-bs name="book" class="bi-book"></i-bs></a></li>
-          <!-- switch dark light mode-->
-          <!-- <li class="list-inline-item mx-2">
-            <div class="theme-switch-wrapper">
-              <label class="theme-switch" for="checkbox">
-                <input type="checkbox" [checked]="isLightTheme" (change)="onThemeSwitchChange()" id="checkbox">
-                <div class="slider round"></div>
-              </label>
-            </div>
-          </li> 
-        make a toggle for the theme switcher with two icons, no checkbox-->
+  <div class="links">
+  <ul class="list-unstyled left">
+    <li>
+      <a href="#" class="link-item">Über das Projekt</a>
+    </li>
+    <li>
+      <a href="#" class="link-item">Impressum</a>
+    </li>
+  </ul>
 
-          <li class="list-inline-item mx-2">
-            <div class="theme-switch-wrapper">
-              <label class="theme-switch" for="checkbox">
-                <input type="checkbox" [checked]="isLightTheme" (change)="onThemeSwitchChange()" id="checkbox">
-                <div class="slider round"></div>
-              </label>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</footer>
+  <ul class="list-unstyled right">
+    <li>
+      <a href="#" class="link-item">Github</a>
+    </li>
+    <li>
+      <a href="#" class="link-item">API Docs</a>
+    </li>
+  </ul>
+</div>
+
+
+  <img src="assets/footer/logo.svg" alt="Media Theke Logo" class="logo">
+
+</div>

Mediatheke-Client/src/app/footer/footer.component.scss

@@ -1,25 +1,72 @@
-.footer {
-    margin-top: 100px;
+.container-fluid {
+    /* Other styles remain unchanged */
+    background: url("/assets/footer/bg.svg") no-repeat bottom left;
+    background-color: black;
+    padding: 20px;
+    position: relative;
     bottom: 0;
-    width: 100%;
-    background-color: var(--color-contrast-background);
-    color: var(--color-highlight);
+    display: flex;
+    justify-content: flex-start;  // Ensures content starts from the left
+    align-items: center;
+    height: 300px;
 
     a {
-        color: var(--color-primary);
+        color: grey;
+        font-size: 0.9rem;
+
+        &:hover {
+            color: white;
+        }
+    }
+
+    /* unset url when smaller than 768px */
+    @media (max-width: 768px) {
+        background: unset;
+        background-color: black;
+    }
+}
+
+h1 {
+    color: white;
+    font-size: 2.5em;
+    margin-right: auto;  // Pushes the rest of the content to the right
+    margin-left: 180px;
+
+    @media (max-width: 768px) {
+        display: none;
+    }
+}
+
+.link-item {
+    text-decoration: none;
+    color: white;
+
+    &:hover {
+        text-decoration: underline;
     }
 }
 
-img {
-    /*invert the logo */
-    height: 50px;
+.logo {
+    height: 100px;
+    position: absolute;
+    right: 20px;
+    bottom: 20px;
 }
 
-.container {
-    max-width: 1600px;
-    margin: auto;
-    padding-left: 30px;
-    padding-right: 30px;
-    padding-top: 30px;
-    padding-bottom: 30px;
-}
+.links {
+    align-self: end;
+    width: fit-content;
+    display: flex;
+
+    @media (max-width: 768px) {
+        align-self: start;
+    }
+}
+
+ul.list-unstyled.left {
+    margin-right: 30px;  // Space between the two lists
+}
+
+ul.list-unstyled.right {
+    margin-right: 333px;  // Adjust based on the logo's size and desired spacing
+}

Mediatheke-Client/src/app/header/header.component.scss

@@ -47,9 +47,10 @@ nav {
 }
 
 .grid-nav {
+    height: 90px;
     display: grid;
     grid-template-columns: min-content 2fr 1fr;
-    align-items: center;
+    align-items: initial;
 
     @media screen and (max-width: 768px) {
         grid-template-columns: 1fr;
@@ -79,25 +80,3 @@ nav {
     align-items: flex-end;
 }
 
-
-/***************************************************
- * Generated by SVG Artista on 9/7/2023, 10:19:58 AM
- * MIT license (https://opensource.org/licenses/MIT)
- * W. https://svgartista.net
- **************************************************/
-
-
-svg .svg-elem-4 {
-    stroke-dashoffset: 341.7839660644531px;
-    stroke-dasharray: 341.7839660644531px;
-    fill: transparent;
-    -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
-        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
-    transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
-        fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
-}
-
-svg.active .svg-elem-4 {
-    stroke-dashoffset: 0;
-    fill: rgb(255, 198, 235);
-}

Mediatheke-Client/src/app/hero/hero.component.html

@@ -0,0 +1,10 @@
+<div class="hero">
+   <div class="float media">
+      <span> Alle Medias</span>
+      <img src="/assets/hero/media.svg">
+   </div>
+   <div class="float theke">
+      <span> in einer &nbsp; Theke.</span>
+      <img src="/assets/hero/theke.svg">
+   </div>
+</div>

Mediatheke-Client/src/app/hero/hero.component.scss

@@ -0,0 +1,88 @@
+/* tiled background repeat */
+.hero {
+  --max-amplitude: 5px; // Maximum distance element will move during wobble
+  --degree: 5deg; // Maximum rotation element will move during wobble
+  width: 100%;
+  height: 400px;
+  margin-top: 40px;
+  padding-top: 50px;
+  background-image: url('/assets/hero/tile.svg');
+  background-repeat: repeat;
+  border-bottom: 3px solid var(--color-key-black);
+  font-size: 2rem;
+  text-transform: lowercase;
+
+  overflow: hidden;
+  display: flex; // To arrange child divs horizontally
+
+  // Nested styles for the child divs
+  .float {
+    display: flex; // Use flex for inner positioning
+    font-size: 2em; // Larger font size for better visibility
+    position: relative;
+
+    // Adjust the spacing between the text and the SVG image
+    span {
+      margin-right: 0.5em; // Space between text and image
+      z-index: 100;
+    }
+
+    img {
+      height: auto; // Keep aspect ratio of the images#
+      position: absolute;
+    }
+  }
+
+  .media {
+    left: 9%;
+    top: 16%;
+
+    img {
+      width: 330px;
+      left: 100px;
+      top: -110px;
+    }
+  }
+
+  .theke {
+    left: 33%;
+    top: 41%;
+
+    img {
+      width: 513px;
+      left: -190px;
+      top: -153px;
+    }
+  }
+}
+
+
+.media img,
+.theke img {
+  animation: wobble 30s infinite ease-in-out;
+  /* Using 'infinite' to make the animation loop forever. 
+       2s duration for a slow, subtle effect, and 'ease-in-out' for smooth timing. */
+}
+
+/* Define a wobble animation to simulate the hovering effect */
+@keyframes wobble {
+  0% {
+    transform: translate(0, 0) rotate(0);
+  }
+
+  25% {
+    transform: translate(calc(var(--max-amplitude) * -1), var(--max-amplitude)) rotate(var(--degree));
+  }
+
+  50% {
+    transform: translate(var(--max-amplitude), calc(var(--max-amplitude) * -1)) rotate(calc(var(--degree) * -1));
+  }
+
+  75% {
+    transform: translate(calc(var(--max-amplitude) * -0.5), calc(var(--max-amplitude) * 0.5)) rotate(0);
+  }
+
+  100% {
+    transform: translate(calc(var(--max-amplitude) * 0.5), calc(var(--max-amplitude) * -0.5)) rotate(0);
+  }
+}

Mediatheke-Client/src/app/hero/hero.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroComponent } from './HeroComponent';
+
+describe('HeroComponent', () => {
+  let component: HeroComponent;
+  let fixture: ComponentFixture<HeroComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [HeroComponent]
+    });
+    fixture = TestBed.createComponent(HeroComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});