update responsive design & bugfixes

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;
 }

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
+    <div class="buttons">
-      [value]="'Play'"
+      <app-btn-small
-      [imgPath]="'play'"
+        *ngIf="!screenWidth"
-      [imgReverse]="true"
+        [imgPath]="'back'"
-      [disabled]="!isAnyResolutionUploaded()"
+        [imgRadius]="'24px'"
-      (click)="
+        (click)="backToCategory()"
-        playMovieId(
+      ></app-btn-small>
-          environmentBaseUrl +
+      <app-btn-large
-            '/media/videos/' +
+        [value]="'Play'"
-            currentMovie[0]?.id +
+        [imgPath]="'play'"
-            '/' +
+        [imgReverse]="true"
-            currentMovie[0]?.file_name
+        [disabled]="!isAnyResolutionUploaded()"
-        )
+        (click)="
-      "
+          playMovieId(
-    ></app-btn-large>
+            environmentBaseUrl +
+              '/media/videos/' +
+              currentMovie[0]?.id +
+              '/' +
+              currentMovie[0]?.file_name
+          )
+        "
+      ></app-btn-large>
+    </div>
   </div>
   }
 </section>

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 {

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/';
+  }
 }

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">

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();