From 74db3cd573bea522c01f096788e40662291aa3ba Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Fri, 8 Jan 2021 21:05:19 +0000
Subject: [PATCH] * Improved the responsiveness for mobile views on the detail
 pages

---
 .../components/movie/movie-details.component.html        | 4 ++--
 .../shared/top-banner/top-banner.component.html          | 6 +++---
 .../shared/top-banner/top-banner.component.scss          | 3 +++
 .../components/shared/top-banner/top-banner.component.ts | 1 +
 .../components/tv/tv-details.component.html              | 4 ++--
 .../src/app/media-details/media-details.component.scss   | 9 +++------
 src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts    | 2 +-
 7 files changed, 15 insertions(+), 14 deletions(-)
 create mode 100644 src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss

diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
index 2e2f4e1d1..e3fd88067 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -9,12 +9,12 @@
     <section id="info-wrapper">
         <div class="small-middle-container">
 
-            <div class="row">
+            <div class="row justify-content-center justify-content-sm-start">
 
                 <media-poster [posterPath]="'https://image.tmdb.org/t/p/w300/' + movie.posterPath"></media-poster>
 
                 <!--Next to poster-->
-                <div class="col-12 col-lg-3 col-xl-3 media-row">
+                <div class="col-12 col-lg-2 col-xl-3 media-row">
 
                     <social-icons [homepage]="movie.homepage" [theMoviedbId]="movie.id" [hasTrailer]="movie.videos?.results?.length > 0" (openTrailer)="openDialog()" [imdbId]="movie.imdbId" [twitter]="movie.externalIds.twitterId" [facebook]="movie.externalIds.facebookId"
                         [instagram]="movie.externalIds.instagramId" [available]="movie.available" [plexUrl]="movie.plexUrl" [embyUrl]="movie.embyUrl" [jellyfinUrl]="movie.jellyfinUrl"></social-icons>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
index 7d88fa63f..bdb9aac37 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
@@ -7,12 +7,12 @@
             <div class="container">
                 <div class="row">
                     <div
-                        class="col-xl-10 col-lg-11 offset-xl-2 offset-lg-1 col-md-8 col-sm-7 col-8 offset-md-4 offset-sm-5 offset-4">
-                        <h1>{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
+                        class="col-xl-11 col-lg-8 offset-xl-1 offset-lg-4 col-md-8 col-sm-7 col-12 offset-md-4 offset-sm-5 mobile-top-text">
+                        <h1 class="large-text">{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
                             ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
                         </h1>
 
-                        <h5 class="tagline grey-text">{{tagline}}</h5>
+                        <h2 class="tagline grey-text">{{tagline}}</h2>
                     </div>
                 </div>
             </div>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss
new file mode 100644
index 000000000..7ad12a274
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.scss
@@ -0,0 +1,3 @@
+.large-text {
+    font: 500 40px/30px Roboto, "Helvetica Neue", sans-serif;
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts
index 583376537..ae61e3f3e 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.ts
@@ -4,6 +4,7 @@ import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
 @Component({
     selector: "top-banner",
     templateUrl: "./top-banner.component.html",
+    styleUrls: ["top-banner.component.scss"]
 })
 export class TopBannerComponent {
     
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
index 1dfa5c544..a479aba81 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
@@ -19,13 +19,13 @@
 
             <section id="info-wrapper">
                 <div class="small-middle-container">
-                    <div class="row">
+                    <div class="row justify-content-center justify-content-sm-start">
 
                         <media-poster [posterPath]="tv.images?.medium"></media-poster>
 
 
                         <!--Next to poster-->
-                        <div class="col-12 col-lg-3 col-xl-3 media-row">
+                        <div class="col-12 col-lg-2 col-xl-3 media-row">
 
                             <social-icons [homepage]="tv.homepage" [tvdbId]="tv.id" [hasTrailer]="tv.trailer"
                                 (openTrailer)="openDialog()" [imdbId]="tv.imdbId" [available]="tv.available || tv.partlyAvailable"
diff --git a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
index 290c60fd2..49a5a5433 100644
--- a/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
+++ b/src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
@@ -5,13 +5,10 @@
     h1 {
         font-size: 1.5rem;
     }
-    .mobile-poster {
-        display: block;
-        position: absolute;
-        width: 70px;
-        left: 12px;
-        bottom: 2px;
+    .mobile-top-text {
+        margin-bottom: 170px;
     }
+
     #info-wrapper .sidebar-poster {
         margin-top: -126px !important;
     }
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
index 553dcbf2c..356047885 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
@@ -24,7 +24,7 @@ export enum SearchFilterType {
 })
 export class MyNavComponent implements OnInit {
 
-  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+  isHandset$: Observable<boolean> = this.breakpointObserver.observe([Breakpoints.Small, Breakpoints.Handset, Breakpoints.XSmall])
     .pipe(
       map(result => result.matches)
     );