github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-20 05:13:18 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fixed the loading spinner and mobile styling on the details page

Browse source
This commit is contained in:
Jamie Rees 2019-05-07 21:30:23 +01:00
commit 2f8c8f9c71
6 changed files with 121 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
View file

@ -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> <mat-spinner [color]="'accent'"></mat-spinner>
</div> </div>
@ -54,7 +54,7 @@
<i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }} <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
</button> </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()"> (click)="deny()">
<i class="fa fa-times"></i> {{ <i class="fa fa-times"></i> {{
'Requests.Deny' | translate }}</button> 'Requests.Deny' | translate }}</button>
@ -63,7 +63,7 @@
</span> </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"> class="btn-spacing" color="warn">
<i class="fa fa-times"></i> {{ <i class="fa fa-times"></i> {{
'MediaDetails.Denied' | translate }}</button> 'MediaDetails.Denied' | translate }}</button>

2
src/Ombi/ClientApp/src/app/media-details/components/shared/media-poster/media-poster.component.html
View file

@ -1,6 +1,6 @@
<div class="col-md-2 col-sm-3 hidden-xs"> <div class="col-md-2 col-sm-3 hidden-xs">
<div class="sidebar sidebar-poster affixable affix-top"> <div class="sidebar sidebar-poster affixable affix-top">
<div class="poster"> <div class="poster mobile-poster">
<img class="real" src="{{posterPath}}" alt="Poster" <img class="real" src="{{posterPath}}" alt="Poster"
style="display: block;"> style="display: block;">
</div> </div>

2
src/Ombi/ClientApp/src/app/media-details/components/shared/top-banner/top-banner.component.html
View file

@ -7,7 +7,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div <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"> <h1>{{title}} <span *ngIf="releaseDate" class="grey-text align-middle">
({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span> ({{releaseDate | amLocal | amDateFormat: 'YYYY'}})</span>
</h1> </h1>

3
src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
View file

@ -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"> <div *ngIf="tv">
<top-banner [background]="tv.background" [available]="tv.available" [title]="tv.title" [releaseDate]="tv.firstAired" <top-banner [background]="tv.background" [available]="tv.available" [title]="tv.title" [releaseDate]="tv.firstAired"

197
src/Ombi/ClientApp/src/app/media-details/media-details.component.scss
View file

@ -1,41 +1,58 @@
@import "~@angular/material/theming"; @import "~@angular/material/theming";
@import "~styles/variables.scss"; @import "~styles/variables.scss";
//MINE //MINE
@media (max-width: 570px) { @media (max-width: 570px) {
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.mobile-poster {
display: block;
position: absolute;
width: 70px;
left: 12px;
bottom: 2px;
}
#info-wrapper .sidebar-poster {
margin-top: -126px !important;
}
} }
// Change @media (max-width: 767px) {
#summary-wrapper {
height: 350px !important;
}
}
#summary-wrapper .full-screenshot, #summary-wrapper .full-screenshot,
.summary-wrapper .full-screenshot, .summary-wrapper .full-screenshot,
#watching-wrapper .full-screenshot, #watching-wrapper .full-screenshot,
.hero-wrapper .full-screenshot, .hero-wrapper .full-screenshot,
#statics-top-wrapper .full-screenshot { #statics-top-wrapper .full-screenshot {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-position: 50% 10%; background-position: 50% 10%;
opacity: 0; opacity: 0;
transition: all 1s; transition: all 1s;
} }
#summary-wrapper, #summary-wrapper,
.summary-wrapper { .summary-wrapper {
background-color: #000; background-color: #000;
background-size: cover; background-size: cover;
background-position: 50% 10%; background-position: 50% 10%;
transition: all .5s; transition: all .5s;
height: 450px; height: 450px;
color: #fff; color: #fff;
position: relative; position: relative;
} }
@ -44,159 +61,161 @@
#watching-wrapper .full-screenshot.enabled, #watching-wrapper .full-screenshot.enabled,
.hero-wrapper .full-screenshot.enabled, .hero-wrapper .full-screenshot.enabled,
#statics-top-wrapper .full-screenshot.enabled { #statics-top-wrapper .full-screenshot.enabled {
opacity: 1; opacity: 1;
} }
#summary-wrapper .shadow-base, #summary-wrapper .shadow-base,
.summary-wrapper .shadow-base { .summary-wrapper .shadow-base {
bottom: 0; bottom: 0;
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%); 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: -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-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.shadow-base { .shadow-base {
height: 75px; height: 75px;
width: 100%; width: 100%;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.3) 100%); 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: -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-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4D000000', GradientType=0);
} }
.available-bottom-border { .available-bottom-border {
border-bottom: solid 8px #1DE9B6; border-bottom: solid 8px #1DE9B6;
} }
#summary-wrapper .summary .container, #summary-wrapper .summary .container,
.summary-wrapper .summary .container { .summary-wrapper .summary .container {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
} }
#summary-wrapper, #summary-wrapper,
.summary-wrapper { .summary-wrapper {
background-color: #000; background-color: #000;
background-size: cover; background-size: cover;
background-position: 50% 10%; background-position: 50% 10%;
transition: all .5s; transition: all .5s;
height: 550px; height: 550px;
color: #fff; color: #fff;
position: relative; position: relative;
} }
.grey-text { .grey-text {
color:#999; color: #999;
} }
#summary-wrapper .summary .container h1, #summary-wrapper .summary .container h1,
.summary-wrapper .summary .container h1 { .summary-wrapper .summary .container h1 {
margin: 0; margin: 0;
text-shadow: 1px 1px 5px #000; text-shadow: 1px 1px 5px #000;
line-height: 1.2; line-height: 1.2;
} }
#info-wrapper { #info-wrapper {
min-height: 600px; min-height: 600px;
} }
#info-wrapper .sidebar.affixable.affix-top { #info-wrapper .sidebar.affixable.affix-top {
position: relative !important; position: relative !important;
} }
#info-wrapper .sidebar-poster { #info-wrapper .sidebar-poster {
margin-top: -280px; margin-top: -280px;
width: 250px; width: 250px;
} }
#info-wrapper .sidebar .poster { #info-wrapper .sidebar .poster {
border: solid 3px #fff !important; border: solid 3px #fff !important;
position: relative; position: relative;
-webkit-box-shadow: 0 0 20px 0 #666; -webkit-box-shadow: 0 0 20px 0 #666;
box-shadow: 0 0 20px 0 #666; box-shadow: 0 0 20px 0 #666;
} }
#info-wrapper .sidebar .poster img { #info-wrapper .sidebar .poster img {
width: 100%; width: 100%;
} }
.full-width { .full-width {
width: 100%; width: 100%;
} }
#info-wrapper .sidebar .poster .real { #info-wrapper .sidebar .poster .real {
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
} }
.card-spacer { .card-spacer {
padding-top:1%; padding-top: 1%;
} }
.card-full { .card-full {
height: 100%; height: 100%;
} }
.imdb-color { .imdb-color {
color:black; color: black;
background-color: #f5de50; background-color: #f5de50;
} }
.btn-spacing { .btn-spacing {
margin-right:10px !important; margin-right: 10px !important;
} }
.spacing-below { .spacing-below {
margin-bottom: 15px !important; margin-bottom: 15px !important;
} }
.left-seperator { .left-seperator {
margin-left:40px; margin-left: 40px;
} }
.tagline { .tagline {
margin-top: 10px; margin-top: 10px;
margin-left: 10px; margin-left: 10px;
text-shadow: 1px 1px 5px #000; text-shadow: 1px 1px 5px #000;
} }
.preview-poster { .preview-poster {
width: 173px; width: 173px;
} }
.media-icons { .media-icons {
color: mat-color($ombi-app-primary) !important; color: mat-color($ombi-app-primary) !important;
padding: 1%; padding: 1%;
} }
.media-row { .media-row {
padding-top: 2%; padding-top: 2%;
} }
.cast-profile-img { .cast-profile-img {
border-radius: 10%; border-radius: 10%;
width: 170px; width: 170px;
} }
.small-middle-container{ .small-middle-container {
margin: auto; margin: auto;
width: 95%; width: 95%;
} }
.keywords-panel { .keywords-panel {
margin-top: 8%; margin-top: 8%;
} }
.medium-font { .medium-font {
font-size:16px; font-size: 16px;
} }

5
src/Ombi/ClientApp/src/styles/shared.scss
View file

@ -61,4 +61,9 @@ body {
table { table {
width: 100%; width: 100%;
}
.loading-spinner {
display: flex;
padding-bottom: 4%;
} }