From 3453f42ad5657fb0a9cca38a9e350858ef0ab73c Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 23 Aug 2024 20:27:52 +0200
Subject: [PATCH] update responsive design

---
 .../home/browse/browse.component.html           | 17 +++++++++++++----
 .../hero-banner/hero-banner.component.html      |  3 +++
 .../hero-banner/hero-banner.component.scss      |  7 +++++++
 .../browse/hero-banner/hero-banner.component.ts |  1 +
 .../components/header/header.component.html     |  2 +-
 5 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index aa667a8..2571675 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -3,16 +3,25 @@
   <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
   <app-header [browse]="true"></app-header>
-  @if (this.checkScreenWidth()) {
+  <!-- Hero Banner -->
   <app-hero-banner
+    *ngIf="
+      currentMovie.length === 1 ||
+      (this.checkScreenWidth() && currentMovie.length > 1)
+    "
+    [screenWidth]="checkScreenWidth()"
     [currentMovie]="currentMovie"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
   ></app-hero-banner>
-  } @else {
-  <div class="spacer"></div>
-  }
+  <!-- Spacer -->
+  <div *ngIf="!this.checkScreenWidth()" class="spacer"></div>
+  <!-- Movie Categories -->
   <app-categories
+    *ngIf="
+      this.checkScreenWidth() ||
+      (!this.checkScreenWidth() && currentMovie.length === 0)
+    "
     [movies]="movies"
     [currentMovie]="currentMovie[0]?.id"
     (currentMovieId)="currentMovieId($event)"
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
index 9de1f01..a8caa86 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.html
@@ -11,6 +11,9 @@
       '_1080p.jpg' +
       ')'
   }"
+  [ngClass]="{
+    fullVh: !screenWidth
+  }"
 >
   @if (currentMovie.length > 0) {
   <div class="content">
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
index c88a944..4f4a804 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.scss
@@ -27,6 +27,13 @@ section {
   }
 }
 
+.fullVh {
+  height: 100vh;
+  &::after {
+    height: 0%;
+  }
+}
+
 .content {
   position: relative;
   width: 50%;
diff --git a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
index 51d2371..b4b4570 100644
--- a/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
+++ b/frontend/src/app/components/home/browse/hero-banner/hero-banner.component.ts
@@ -20,6 +20,7 @@ import { environment } from '../../../../environments/environment';
 })
 export class HeroBannerComponent {
   @Input() currentMovie: any[] = [];
+  @Input() screenWidth: boolean = false;
   @Output() playMovie = new EventEmitter<string>();
   @Output() movieIsUploadedChange = new EventEmitter<{
     [resolution: string]: boolean;
diff --git a/frontend/src/app/shared/components/header/header.component.html b/frontend/src/app/shared/components/header/header.component.html
index 9d4fc46..3173fac 100644
--- a/frontend/src/app/shared/components/header/header.component.html
+++ b/frontend/src/app/shared/components/header/header.component.html
@@ -1,6 +1,6 @@
 <header>
   @if (browse) {
-  <div class="logo" routerLink="/">
+  <div class="logo" routerLink="/browse/">
     <img src="./../../../../assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">