From 8c3e7c30286fc8931bf3ddf5d7e1e2ae4f656497 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Fri, 23 Aug 2024 21:02:45 +0200
Subject: [PATCH] update responsive design & bugfixes

---
 .../categories/categories.component.scss      |  1 +
 .../hero-banner/hero-banner.component.html    | 81 ++++++++++++-------
 .../hero-banner/hero-banner.component.scss    | 39 ++++++---
 .../hero-banner/hero-banner.component.ts      |  7 +-
 .../components/header/header.component.html   |  2 +-
 .../components/header/header.component.ts     |  4 +
 6 files changed, 93 insertions(+), 41 deletions(-)

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 b854e54..00620c9 100644
--- a/frontend/src/app/components/home/browse/categories/categories.component.scss
+++ b/frontend/src/app/components/home/browse/categories/categories.component.scss
@@ -102,6 +102,7 @@ section {
   overflow-y: auto;
   overflow-x: hidden;
   height: 50%;
+  padding-bottom: 24px;
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
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 a8caa86..b541775 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
@@ -1,41 +1,64 @@
 <section
-  class="movie-banner"
-  [ngStyle]="{
-    'background-image':
-      'url(' +
-      environmentBaseUrl +
-      '/media/thumbnails/' +
-      currentMovie[0]?.id +
-      '/' +
-      currentMovie[0]?.file_name +
-      '_1080p.jpg' +
-      ')'
-  }"
   [ngClass]="{
     fullVh: !screenWidth
   }"
 >
+  <div
+    class="movie-banner"
+    [ngStyle]="{
+      'background-image':
+        'url(' +
+        environmentBaseUrl +
+        '/media/thumbnails/' +
+        currentMovie[0]?.id +
+        '/' +
+        currentMovie[0]?.file_name +
+        '_1080p.jpg' +
+        ')',
+    }"
+    [ngClass]="{
+      fullVhBanner: !screenWidth
+    }"
+  ></div>
   @if (currentMovie.length > 0) {
-  <div class="content">
+  <div
+    class="content"
+    [ngClass]="{
+      fullVhContent: !screenWidth
+    }"
+  >
     <div class="title">{{ currentMovie[0].title }}</div>
-    <div class="description">
+    <div
+      class="description"
+      [ngClass]="{
+        fullVhDescription: !screenWidth
+      }"
+    >
       {{ currentMovie[0].description }}
     </div>
-    <app-btn-large
-      [value]="'Play'"
-      [imgPath]="'play'"
-      [imgReverse]="true"
-      [disabled]="!isAnyResolutionUploaded()"
-      (click)="
-        playMovieId(
-          environmentBaseUrl +
-            '/media/videos/' +
-            currentMovie[0]?.id +
-            '/' +
-            currentMovie[0]?.file_name
-        )
-      "
-    ></app-btn-large>
+    <div class="buttons">
+      <app-btn-small
+        *ngIf="!screenWidth"
+        [imgPath]="'back'"
+        [imgRadius]="'24px'"
+        (click)="backToCategory()"
+      ></app-btn-small>
+      <app-btn-large
+        [value]="'Play'"
+        [imgPath]="'play'"
+        [imgReverse]="true"
+        [disabled]="!isAnyResolutionUploaded()"
+        (click)="
+          playMovieId(
+            environmentBaseUrl +
+              '/media/videos/' +
+              currentMovie[0]?.id +
+              '/' +
+              currentMovie[0]?.file_name
+          )
+        "
+      ></app-btn-large>
+    </div>
   </div>
   }
 </section>
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 4f4a804..36b4acf 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
@@ -2,6 +2,10 @@
 
 section {
   height: 400px;
+}
+
+.movie-banner {
+  height: 400px;
   position: relative;
   overflow: hidden;
   img {
@@ -27,15 +31,8 @@ section {
   }
 }
 
-.fullVh {
-  height: 100vh;
-  &::after {
-    height: 0%;
-  }
-}
-
 .content {
-  position: relative;
+  position: absolute;
   width: 50%;
   top: 120px;
   left: 96px;
@@ -61,10 +58,32 @@ section {
   text-shadow: 1px 1px 2px $black;
 }
 
-app-btn-large {
+.fullVh {
+  height: 100vh;
+}
+
+.fullVhBanner {
+  height: 200px;
+}
+
+.fullVhContent {
+  width: calc(100% - 48px);
+  top: 200px;
+  left: 24px;
+}
+
+.fullVhDescription {
+  max-height: 250px;
+}
+
+.buttons {
   position: absolute;
-  bottom: -60px;
+  bottom: -70px;
   left: 0;
+  display: flex;
+  justify-content: left;
+  width: 100%;
+  gap: 12px;
 }
 
 .movie-banner {
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 b4b4570..4aa0711 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
@@ -10,11 +10,12 @@ import {
 import { BtnLargeComponent } from '../../../../shared/components/buttons/btn-large/btn-large.component';
 import { MovieService } from '../../../../services/movie.service';
 import { environment } from '../../../../environments/environment';
+import { BtnSmallComponent } from '../../../../shared/components/buttons/btn-small/btn-small.component';
 
 @Component({
   selector: 'app-hero-banner',
   standalone: true,
-  imports: [CommonModule, BtnLargeComponent],
+  imports: [CommonModule, BtnLargeComponent, BtnSmallComponent],
   templateUrl: './hero-banner.component.html',
   styleUrl: './hero-banner.component.scss',
 })
@@ -59,4 +60,8 @@ export class HeroBannerComponent {
   playMovieId(videoPath: string) {
     this.playMovie.emit(videoPath);
   }
+
+  backToCategory() {
+    window.location.href = '/browse/';
+  }
 }
diff --git a/frontend/src/app/shared/components/header/header.component.html b/frontend/src/app/shared/components/header/header.component.html
index 3173fac..b479a80 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="/browse/">
+  <div class="logo" (click)="reloadPage()">
     <img src="./../../../../assets/img/logo_ci.svg" alt="" />
   </div>
   <div class="btn">
diff --git a/frontend/src/app/shared/components/header/header.component.ts b/frontend/src/app/shared/components/header/header.component.ts
index 60eb8c0..a40b615 100644
--- a/frontend/src/app/shared/components/header/header.component.ts
+++ b/frontend/src/app/shared/components/header/header.component.ts
@@ -14,6 +14,10 @@ export class HeaderComponent {
 
   constructor(private router: Router) {}
 
+  reloadPage() {
+    window.location.href = '/browse/';
+  }
+
   logout() {
     localStorage.clear();
     sessionStorage.clear();