From 3475c61bf35e4fa84fdc721c530a67446b9f8e4c Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 22 Aug 2024 23:57:52 +0200
Subject: [PATCH] update responsive design

---
 .../src/app/components/home/browse/browse.component.html | 6 +++++-
 .../src/app/components/home/browse/browse.component.scss | 8 ++++++--
 .../src/app/components/home/browse/browse.component.ts   | 9 ++++++++-
 .../home/browse/categories/categories.component.scss     | 6 ++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/home/browse/browse.component.html b/frontend/src/app/components/home/browse/browse.component.html
index 9f5c636..aa667a8 100644
--- a/frontend/src/app/components/home/browse/browse.component.html
+++ b/frontend/src/app/components/home/browse/browse.component.html
@@ -1,13 +1,17 @@
 <section>
-  @if (currentMovie[0]) {
+  @if (movies.length > 0) {
   <!-- If at least one film has been uploaded -->
   @if (playMovie === "") {
   <app-header [browse]="true"></app-header>
+  @if (this.checkScreenWidth()) {
   <app-hero-banner
     [currentMovie]="currentMovie"
     (playMovie)="playVideo($event)"
     (movieIsUploadedChange)="onMovieIsUploadedChange($event)"
   ></app-hero-banner>
+  } @else {
+  <div class="spacer"></div>
+  }
   <app-categories
     [movies]="movies"
     [currentMovie]="currentMovie[0]?.id"
diff --git a/frontend/src/app/components/home/browse/browse.component.scss b/frontend/src/app/components/home/browse/browse.component.scss
index 8086153..9d245f3 100644
--- a/frontend/src/app/components/home/browse/browse.component.scss
+++ b/frontend/src/app/components/home/browse/browse.component.scss
@@ -45,6 +45,10 @@ section {
   transition: opacity 300ms ease-in-out;
 }
 
+.spacer {
+  margin-top: 120px;
+}
+
 .add-button {
   position: absolute;
   bottom: 24px;
@@ -134,6 +138,8 @@ section {
   transform: scale(1);
 }
 
+/*------------- RESPONSIVE -------------*/
+
 @media screen and (max-width: 550px) {
   form {
     flex-direction: column;
@@ -151,8 +157,6 @@ section {
   }
 }
 
-/*------------- RESPONSIVE -------------*/
-
 @media screen and (max-width: 500px) {
   .resolution-btn {
     border-radius: 2px;
diff --git a/frontend/src/app/components/home/browse/browse.component.ts b/frontend/src/app/components/home/browse/browse.component.ts
index b51fac4..9f1c1b0 100644
--- a/frontend/src/app/components/home/browse/browse.component.ts
+++ b/frontend/src/app/components/home/browse/browse.component.ts
@@ -37,6 +37,7 @@ export class BrowseComponent implements OnInit {
   movies: any[] = [];
   currentMovie: any[] = [];
   playMovie: string = '';
+  isWideScreen: boolean = false;
   uploadMovieOverview: boolean = false;
   currentResolution: '480p' | '720p' | '1080p' = '720p';
   movieIsUploaded: { [resolution: string]: boolean } = {
@@ -52,7 +53,13 @@ export class BrowseComponent implements OnInit {
 
   async ngOnInit() {
     await this.loadAllMovies();
-    this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
+    if (this.checkScreenWidth()) {
+      this.currentMovie.length === 0 ? this.loadRandomMovie() : null;
+    }
+  }
+
+  checkScreenWidth() {
+    return (this.isWideScreen = window.innerWidth > 600);
   }
 
   onMovieIsUploadedChange(newStatus: { [resolution: string]: boolean }) {
diff --git a/frontend/src/app/components/home/browse/categories/categories.component.scss b/frontend/src/app/components/home/browse/categories/categories.component.scss
index d27b971..b87dcc7 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.scss
+++ b/frontend/src/app/components/home/browse/categories/categories.component.scss
@@ -112,6 +112,12 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
+@media screen and (max-width: 600px) {
+  .hide-scrollbar {
+    height: calc(100% - 120px);
+  }
+}
+
 @media screen and (max-width: 400px) {
   .category {
     p {