From 2f8c8f9c715edd987c5a009f3a3f5eae6b7fd5b7 Mon Sep 17 00:00:00 2001
From: Jamie Rees <tidusjar@gmail.com>
Date: Tue, 7 May 2019 21:30:23 +0100
Subject: [PATCH] fixed the loading spinner and mobile styling on the details
 page

---
 .../movie/movie-details.component.html        |   6 +-
 .../media-poster/media-poster.component.html  |   2 +-
 .../top-banner/top-banner.component.html      |   2 +-
 .../components/tv/tv-details.component.html   |   3 +
 .../media-details.component.scss              | 197 ++++++++++--------
 src/Ombi/ClientApp/src/styles/shared.scss     |   5 +
 6 files changed, 121 insertions(+), 94 deletions(-)

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 e59b474ad..036ad4e87 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
@@ -1,4 +1,4 @@
-<div *ngIf="!movie" class="row justify-content-md-center top-spacing loading-spinner">
+<div *ngIf="!movie" class="justify-content-md-center top-spacing loading-spinner">
   <mat-spinner [color]="'accent'"></mat-spinner>
 </div>
 
@@ -54,7 +54,7 @@
               <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
             </button>
 
-            <button *ngIf="hasRequest && !movieRequest.denied" mat-raised-button class="btn-spacing" color="warn"
+            <button *ngIf="hasRequest &&  movieRequest && !movieRequest.denied" mat-raised-button class="btn-spacing" color="warn"
               (click)="deny()">
               <i class="fa fa-times"></i> {{
                     'Requests.Deny' | translate }}</button>
@@ -63,7 +63,7 @@
 
           </span>
 
-          <button *ngIf="hasRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button
+          <button *ngIf="hasRequest &&  movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button
             class="btn-spacing" color="warn">
             <i class="fa fa-times"></i> {{
                     'MediaDetails.Denied' | translate }}</button>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
index 74fd2a4c6..f0a6f04ea 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
@@ -1,6 +1,6 @@
 <div class="col-md-2 col-sm-3 hidden-xs">
     <div class="sidebar sidebar-poster affixable affix-top">
-        <div class="poster">
+        <div class="poster mobile-poster">
             <img class="real" src="{{posterPath}}" alt="Poster"
                 style="display: block;">
         </div>
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 d33fd7788..7d88fa63f 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,7 +7,7 @@
             <div class="container">
                 <div class="row">
                     <div
-                        class="col-xl-12 col-lg-11 offset-lg-1 col-md-8 offset-md-4 col-sm-7 offset-sm-5 col-6 offset-6">
+                        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">
                             ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
                         </h1>
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 be653411a..eb37fa3d5 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
@@ -1,3 +1,6 @@
+<div *ngIf="!tv" class="justify-content-md-center top-spacing loading-spinner">
+  <mat-spinner [color]="'accent'"></mat-spinner>
+</div>
 <div *ngIf="tv">
 
   <top-banner [background]="tv.background" [available]="tv.available" [title]="tv.title" [releaseDate]="tv.firstAired"
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 11a039a62..1a0245478 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
@@ -1,41 +1,58 @@
 @import "~@angular/material/theming";
 @import "~styles/variables.scss";
+
 //MINE
 @media (max-width: 570px) {
-    h1 {
-        font-size: 1.5rem;
-    }
-}
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .mobile-poster {
+    display: block;
+    position: absolute;
+    width: 70px;
+    left: 12px;
+    bottom: 2px;
+  }
 
-// Change
 
+  #info-wrapper .sidebar-poster {
+    margin-top: -126px !important;
+  }
+}
+
+@media (max-width: 767px) {
+  #summary-wrapper {
+    height: 350px !important;
+  }
+}
 
 #summary-wrapper .full-screenshot,
 .summary-wrapper .full-screenshot,
 #watching-wrapper .full-screenshot,
 .hero-wrapper .full-screenshot,
 #statics-top-wrapper .full-screenshot {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
-    background-position: 50% 10%;
-    opacity: 0;
-    transition: all 1s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  background-position: 50% 10%;
+  opacity: 0;
+  transition: all 1s;
 }
 
 #summary-wrapper,
 .summary-wrapper {
-    background-color: #000;
-    background-size: cover;
-    background-position: 50% 10%;
-    transition: all .5s;
-    height: 450px;
-    color: #fff;
-    position: relative;
+  background-color: #000;
+  background-size: cover;
+  background-position: 50% 10%;
+  transition: all .5s;
+  height: 450px;
+  color: #fff;
+  position: relative;
 }
 
 
@@ -44,159 +61,161 @@
 #watching-wrapper .full-screenshot.enabled,
 .hero-wrapper .full-screenshot.enabled,
 #statics-top-wrapper .full-screenshot.enabled {
-    opacity: 1;
+  opacity: 1;
 }
 
 #summary-wrapper .shadow-base,
 .summary-wrapper .shadow-base {
-    bottom: 0;
-    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
-    background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
-    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
-    background-repeat: repeat-x;
+  bottom: 0;
+  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-repeat: repeat-x;
 }
 
 .shadow-base {
-    height: 75px;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
-    background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
-    background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0);
+  height: 75px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
+  background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
+  background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0);
 }
 
 .available-bottom-border {
-    border-bottom: solid 8px #1DE9B6;
+  border-bottom: solid 8px #1DE9B6;
 }
 
 #summary-wrapper .summary .container,
 .summary-wrapper .summary .container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 #summary-wrapper,
 .summary-wrapper {
-    background-color: #000;
-    background-size: cover;
-    background-position: 50% 10%;
-    transition: all .5s;
-    height: 550px;
-    color: #fff;
-    position: relative;
+  background-color: #000;
+  background-size: cover;
+  background-position: 50% 10%;
+  transition: all .5s;
+  height: 550px;
+  color: #fff;
+  position: relative;
 }
 
 
 .grey-text {
-    color:#999;
+  color: #999;
 }
 
+
+
 #summary-wrapper .summary .container h1,
 .summary-wrapper .summary .container h1 {
-    margin: 0;
-    text-shadow: 1px 1px 5px #000;
-    line-height: 1.2;
+  margin: 0;
+  text-shadow: 1px 1px 5px #000;
+  line-height: 1.2;
 }
 
 #info-wrapper {
-    min-height: 600px;
+  min-height: 600px;
 }
 
 
 #info-wrapper .sidebar.affixable.affix-top {
-    position: relative !important;
+  position: relative !important;
 }
 
 #info-wrapper .sidebar-poster {
-    margin-top: -280px;
-    width: 250px;
+  margin-top: -280px;
+  width: 250px;
 }
 
 #info-wrapper .sidebar .poster {
-    border: solid 3px #fff !important;
-    position: relative;
-    -webkit-box-shadow: 0 0 20px 0 #666;
-    box-shadow: 0 0 20px 0 #666;
+  border: solid 3px #fff !important;
+  position: relative;
+  -webkit-box-shadow: 0 0 20px 0 #666;
+  box-shadow: 0 0 20px 0 #666;
 }
 
 #info-wrapper .sidebar .poster img {
-    width: 100%;
+  width: 100%;
 }
 
 .full-width {
-    width: 100%;
+  width: 100%;
 }
 
 #info-wrapper .sidebar .poster .real {
-    height: 100%;
-    top: 0;
-    left: 0;
+  height: 100%;
+  top: 0;
+  left: 0;
 }
 
 .card-spacer {
-    padding-top:1%;
+  padding-top: 1%;
 }
 
 .card-full {
-    height: 100%;
+  height: 100%;
 }
 
 .imdb-color {
-    color:black;
-    background-color: #f5de50;
+  color: black;
+  background-color: #f5de50;
 }
 
 .btn-spacing {
-    margin-right:10px !important;
+  margin-right: 10px !important;
 }
 
 .spacing-below {
-    margin-bottom: 15px !important;
+  margin-bottom: 15px !important;
 }
 
 .left-seperator {
-    margin-left:40px;
+  margin-left: 40px;
 }
 
 .tagline {
-    margin-top: 10px;
-    margin-left: 10px;
-    text-shadow: 1px 1px 5px #000;
+  margin-top: 10px;
+  margin-left: 10px;
+  text-shadow: 1px 1px 5px #000;
 }
 
 .preview-poster {
-    width: 173px;
+  width: 173px;
 }
 
 .media-icons {
-    color: mat-color($ombi-app-primary) !important;
-    padding: 1%;
+  color: mat-color($ombi-app-primary) !important;
+  padding: 1%;
 }
 
 .media-row {
-    padding-top: 2%;
+  padding-top: 2%;
 }
 
 .cast-profile-img {
-    border-radius: 10%;
-    width: 170px;
+  border-radius: 10%;
+  width: 170px;
 }
 
-.small-middle-container{
-	margin: auto;
-	width: 95%;
+.small-middle-container {
+  margin: auto;
+  width: 95%;
 }
 
 .keywords-panel {
-    margin-top: 8%;
+  margin-top: 8%;
 }
 
 .medium-font {
-    font-size:16px;
-}
\ No newline at end of file
+  font-size: 16px;
+}
diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss
index 171b833a2..e2c888362 100644
--- a/src/Ombi/ClientApp/src/styles/shared.scss
+++ b/src/Ombi/ClientApp/src/styles/shared.scss
@@ -61,4 +61,9 @@ body {
 
 table {
   width: 100%;
+}
+
+.loading-spinner {
+    display: flex;
+    padding-bottom: 4%;
 }
\ No newline at end of file