mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 05:13:18 -07:00
fixed the loading spinner and mobile styling on the details page
This commit is contained in:
parent
bfaf2b8f8c
commit
2f8c8f9c71
6 changed files with 121 additions and 94 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -1,14 +1,31 @@
|
|||
@import "~@angular/material/theming";
|
||||
@import "~styles/variables.scss";
|
||||
|
||||
//MINE
|
||||
@media (max-width: 570px) {
|
||||
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,
|
||||
|
@ -94,9 +111,11 @@
|
|||
|
||||
|
||||
.grey-text {
|
||||
color:#999;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#summary-wrapper .summary .container h1,
|
||||
.summary-wrapper .summary .container h1 {
|
||||
margin: 0;
|
||||
|
@ -140,7 +159,7 @@
|
|||
}
|
||||
|
||||
.card-spacer {
|
||||
padding-top:1%;
|
||||
padding-top: 1%;
|
||||
}
|
||||
|
||||
.card-full {
|
||||
|
@ -148,12 +167,12 @@
|
|||
}
|
||||
|
||||
.imdb-color {
|
||||
color:black;
|
||||
color: black;
|
||||
background-color: #f5de50;
|
||||
}
|
||||
|
||||
.btn-spacing {
|
||||
margin-right:10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.spacing-below {
|
||||
|
@ -161,7 +180,7 @@
|
|||
}
|
||||
|
||||
.left-seperator {
|
||||
margin-left:40px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
|
@ -188,7 +207,7 @@
|
|||
width: 170px;
|
||||
}
|
||||
|
||||
.small-middle-container{
|
||||
.small-middle-container {
|
||||
margin: auto;
|
||||
width: 95%;
|
||||
}
|
||||
|
@ -198,5 +217,5 @@
|
|||
}
|
||||
|
||||
.medium-font {
|
||||
font-size:16px;
|
||||
font-size: 16px;
|
||||
}
|
|
@ -62,3 +62,8 @@ body {
|
|||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: flex;
|
||||
padding-bottom: 4%;
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue