mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 21:03:17 -07:00
Put some icons in the discover panel
This commit is contained in:
TidusJar
parent
c18efc5a3a
commit
df9f5cb339
6 changed files with 79 additions and 34 deletions
|
|
@ -2,14 +2,45 @@
|
|||
<mat-spinner *ngIf="loading" [color]="'accent'"></mat-spinner>
|
||||
</div>
|
||||
<div *ngIf="!loading" mat-dialog-content class="background">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<a (click)="openDetails()">
|
||||
<img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
|
||||
</a>
|
||||
<img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-4 offset-8 text-right" id="icons">
|
||||
<span *ngIf="movie">
|
||||
<a *ngIf="movie.plexUrl" class="media-icons" href="{{movie.plexUrl}}" target="_blank">
|
||||
<i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
|
||||
class="fa fa-play-circle fa-2x grow"></i>
|
||||
</a>
|
||||
<a *ngIf="movie.embyUrl" class="media-icons" href="{{movie.embyUrl}}" target="_blank">
|
||||
<i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
|
||||
class="fa fa-play-circle fa-2x grow"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span *ngIf="tv">
|
||||
<a *ngIf="tv.plexUrl" class="media-icons" href="{{tv.plexUrl}}" target="_blank">
|
||||
<i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
|
||||
class="fa fa-play-circle fa-2x grow"></i>
|
||||
</a>
|
||||
<a *ngIf="tv.embyUrl" class="media-icons" href="{{tv.embyUrl}}" target="_blank">
|
||||
<i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
|
||||
class="fa fa-play-circle fa-2x grow"></i>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<a class="media-icons" (click)="close()">
|
||||
<i class="fa fa-window-close fa-2x grow"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h3><strong>{{data.title}}</strong></h3>
|
||||
|
|
@ -95,41 +126,32 @@
|
|||
'Common.Request' | translate }}</button>
|
||||
</ng-template>
|
||||
</span>
|
||||
|
||||
<span *ngIf="movie.available">
|
||||
<a *ngIf="movie.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
|
||||
href="{{movie.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
|
||||
translate}}</a>
|
||||
<a *ngIf="movie.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{movie.embyUrl}}"
|
||||
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
|
||||
translate}}</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12" *ngIf="tv">
|
||||
|
||||
<div *ngIf="!tv.fullyAvailable" class="dropdown">
|
||||
<button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
|
||||
<i class="fa fa-plus"></i>
|
||||
{{ 'Common.Request' | translate }}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="!tv.fullyAvailable" class="dropdown">
|
||||
<button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
|
||||
<i class="fa fa-plus"></i>
|
||||
{{ 'Common.Request' | translate }}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
|
||||
'Common.Available' | translate }}</button>
|
||||
<button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable"> {{
|
||||
<button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable"> {{
|
||||
'Common.PartlyAvailable' | translate }}</button>
|
||||
|
||||
<span *ngIf="tv.available">
|
||||
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
|
||||
href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
|
||||
<span *ngIf="tv.available">
|
||||
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
|
||||
href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
|
||||
translate}}</a>
|
||||
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
|
||||
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
|
||||
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
|
||||
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
|
||||
translate}}</a>
|
||||
</span>
|
||||
<button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
|
||||
</span>
|
||||
<button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
|
||||
'Common.ViewDetails' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
.details {
|
||||
padding: 2%;
|
||||
border-radius: 10px;
|
||||
background: $background;
|
||||
background: $backgroundTint;
|
||||
div.dark & {
|
||||
background: $backgroundTint-dark;
|
||||
}
|
||||
|
|
@ -16,7 +16,13 @@
|
|||
.details strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.grow {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
.grow:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
h3 strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -28,4 +34,13 @@ h3 strong {
|
|||
|
||||
.btn-spacing {
|
||||
margin-right: 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.media-icons {
|
||||
color: $primary;
|
||||
padding: 2%;
|
||||
div.dark & {
|
||||
color: $warn-dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ export class DiscoverCardDetailsComponent implements OnInit {
|
|||
this.loading = false;
|
||||
}
|
||||
|
||||
public onNoClick(): void {
|
||||
public close(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="row justify-content-md-center top-spacing">
|
||||
<div class="btn-group" role="group" aria-label="Basic example">
|
||||
<button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button
|
||||
class="btn" color="primary">Popular</button>
|
||||
class="btn grow" color="primary">Popular</button>
|
||||
<button type="button" (click)="trending()" [ngClass]="trendingActive ? 'active-button' : ''"
|
||||
mat-raised-button class="btn" color="primary">Trending</button>
|
||||
mat-raised-button class="btn grow" color="primary">Trending</button>
|
||||
<button type="button" (click)="upcoming()" [ngClass]="upcomingActive ? 'active-button' : ''"
|
||||
mat-raised-button class="btn" color="primary">Upcoming</button>
|
||||
mat-raised-button class="btn grow" color="primary">Upcoming</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@import "~@angular/material/theming";
|
||||
@import "~styles/Styles.scss";
|
||||
@import "~styles/variables.scss";
|
||||
//MINE
|
||||
@media (max-width: 570px) {
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -34,4 +34,12 @@
|
|||
}
|
||||
.sidenav ::-webkit-scrollbar-track {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.grow {
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.grow:hover {
|
||||
transform: scale(1.1);
|
||||
color: black;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue