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

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

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

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">
<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 "~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;
}
#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,
#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;
}
font-size: 16px;
}

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

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