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

Put some icons in the discover panel

Browse source
This commit is contained in:
TidusJar 2019-02-28 12:55:05 +00:00
commit df9f5cb339
6 changed files with 79 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

74
src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html
View file

@ -2,14 +2,45 @@
<mat-spinner *ngIf="loading" [color]="'accent'"></mat-spinner> <mat-spinner *ngIf="loading" [color]="'accent'"></mat-spinner>
</div> </div>
<div *ngIf="!loading" mat-dialog-content class="background"> <div *ngIf="!loading" mat-dialog-content class="background">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<a (click)="openDetails()"> <a (click)="openDetails()">
<img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}"> <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
</a> </a>
</div> </div>
<div class="col-8"> <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="row">
<div class="col-12"> <div class="col-12">
<h3><strong>{{data.title}}</strong></h3> <h3><strong>{{data.title}}</strong></h3>
@ -95,41 +126,32 @@
'Common.Request' | translate }}</button> 'Common.Request' | translate }}</button>
</ng-template> </ng-template>
</span> </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>
<div class="col-md-12" *ngIf="tv"> <div class="col-md-12" *ngIf="tv">
<div *ngIf="!tv.fullyAvailable" class="dropdown"> <div *ngIf="!tv.fullyAvailable" class="dropdown">
<button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()"> <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
{{ 'Common.Request' | translate }} {{ 'Common.Request' | translate }}
<span class="caret"></span> <span class="caret"></span>
</button> </button>
</div> </div>
<button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{ <button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
'Common.Available' | translate }}</button> '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> 'Common.PartlyAvailable' | translate }}</button>
<span *ngIf="tv.available"> <span *ngIf="tv.available">
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem" <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' | href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
translate}}</a> translate}}</a>
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}" <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' | target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
translate}}</a> translate}}</a>
</span> </span>
<button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{ <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
'Common.ViewDetails' | translate }}</button> 'Common.ViewDetails' | translate }}</button>
</div> </div>
</div> </div>

19
src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.scss
View file

@ -7,7 +7,7 @@
.details { .details {
padding: 2%; padding: 2%;
border-radius: 10px; border-radius: 10px;
background: $background; background: $backgroundTint;
div.dark & { div.dark & {
background: $backgroundTint-dark; background: $backgroundTint-dark;
} }
@ -16,7 +16,13 @@
.details strong { .details strong {
font-weight: bold; font-weight: bold;
} }
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
h3 strong { h3 strong {
font-weight: bold; font-weight: bold;
} }
@ -28,4 +34,13 @@ h3 strong {
.btn-spacing { .btn-spacing {
margin-right: 1%; margin-right: 1%;
} }
.media-icons {
color: $primary;
padding: 2%;
div.dark & {
color: $warn-dark;
}
}

2
src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts
View file

@ -50,7 +50,7 @@ export class DiscoverCardDetailsComponent implements OnInit {
this.loading = false; this.loading = false;
} }
public onNoClick(): void { public close(): void {
this.dialogRef.close(); this.dialogRef.close();
} }

6
src/Ombi/ClientApp/src/app/discover/discover.component.html
View file

@ -3,11 +3,11 @@
<div class="row justify-content-md-center top-spacing"> <div class="row justify-content-md-center top-spacing">
<div class="btn-group" role="group" aria-label="Basic example"> <div class="btn-group" role="group" aria-label="Basic example">
<button type="button" (click)="popular()" [ngClass]="popularActive ? 'active-button' : ''" mat-raised-button <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' : ''" <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' : ''" <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> </div>
<div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner"> <div *ngIf="loadingFlag" class="row justify-content-md-center top-spacing loading-spinner">

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

@ -1,5 +1,5 @@
@import "~@angular/material/theming"; @import "~@angular/material/theming";
@import "~styles/Styles.scss"; @import "~styles/variables.scss";
//MINE //MINE
@media (max-width: 570px) { @media (max-width: 570px) {
h1 { h1 {

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

@ -34,4 +34,12 @@
} }
.sidenav ::-webkit-scrollbar-track { .sidenav ::-webkit-scrollbar-track {
display: none; display: none;
} }
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
color: black;
}