github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-19 21:03:17 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added in the popup !wip

Browse source
This commit is contained in:
TidusJar 2019-01-28 13:30:25 +00:00
commit 2f5dc4a498
10 changed files with 146 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,56 @@
<div mat-dialog-content class="background">
<div class="row">
<div class="col-4">
<img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
</div>
<div class="col-8">
<div class="row">
<div class="col-12">
<h3><strong>{{data.title}}</strong></h3>
</div>
</div>
<div class="row top-spacing details">
<div class="col-6">
<strong>Availability:</strong> Unavailable
</div>
<div class="col-6">
<strong>Studio: </strong> Studio1
</div>
<div class="col-6">
<strong>Request Status: </strong> Studio1
</div>
<div class="col-6">
<strong>Director: </strong> Studio1
</div>
<div class="col-6">
<strong>In Cinemas: </strong> Studio1
</div>
<div class="col-6">
<strong>Writer: </strong> Studio1
</div>
</div>
<div class="row top-spacing">
<div class="col-12">
{{data.overview}}
</div>
</div>
</div>
</div>
</div>
<div mat-dialog-actions>
<div class="action-buttons-right">
<div class="col-md-12">
<button mat-raised-button (click)="onNoClick()" class="request-btn">
<mat-icon>add</mat-icon>
Request
</button>
</div>
</div>
</div>

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

@ -0,0 +1,31 @@
$ombi-primary:#3f3f3f;
$ombi-primary-700:#313131;
$ombi-accent-700:#166d50;
.poster {
max-width: 100%;
border-radius: 2%;
}
.details {
background: $ombi-primary-700;
padding: 2%;
border-radius: 10px;
}
.details strong {
font-weight: bold;
}
h3 strong {
font-weight: bold;
}
.request-btn {
background-color: $ombi-accent-700;
color: white;
}
.action-buttons-right {
width: 100%;
text-align: right;
}

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

@ -0,0 +1,18 @@
import { Component, Inject } from "@angular/core";
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { IDiscoverCardResult } from "../interfaces";
@Component({
selector: "discover-card-details",
templateUrl: "./discover-card-details.component.html",
styleUrls: ["./discover-card-details.component.scss"],
})
export class DiscoverCardDetailsComponent {
constructor(
public dialogRef: MatDialogRef<DiscoverCardDetailsComponent>,
@Inject(MAT_DIALOG_DATA) public data: IDiscoverCardResult) { }
onNoClick(): void {
this.dialogRef.close();
}
}

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

@ -5,13 +5,12 @@
</a>
<mat-card-content>
<h5 *ngIf="result.title.length <= 10">{{result.title}}</h5>
<h6 *ngIf="result.title.length > 10 && result.title.length <= 13">{{result.title}}</h6>
<h6 *ngIf="result.title.length <= 13">{{result.title}}</h6>
<h6 *ngIf="result.title.length > 13" matTooltip="{{result.title}}">{{result.title | truncate:13}}</h6>
<small>{{result.overview | truncate: 25}}</small>
<small>{{result.overview | truncate: 50}}</small>
</mat-card-content>
<mat-card-actions class="expand">
<button mat-icon-button>
<button mat-icon-button (click)="openDetails(result);">
<mat-icon>expand_more</mat-icon>
</button>
</mat-card-actions>

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

@ -1,6 +1,6 @@
$ombi-primary:#3f3f3f;
#cardImage {
max-height: 153px;
max-height: 163px;
border-radius: 5px 5px 0px 0px;
}
@ -8,12 +8,14 @@ $ombi-primary:#3f3f3f;
background-color: $ombi-primary;
border-radius: 8px;
color: white;
height: 360px;
}
.card-spacing {
margin-top: 10%;
}
.rating {
position: absolute;
font-weight: bold;
@ -38,4 +40,10 @@ $border-width: 2px;
.grow:hover {
transform: scale(1.1);
}
::ng-deep mat-dialog-container.mat-dialog-container {
background-color: $ombi-primary;
color: white;
border-radius: 2%
}

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

@ -2,6 +2,8 @@ import { Component, OnInit, Input } from "@angular/core";
import { IDiscoverCardResult } from "../interfaces";
import { RequestType, ISearchTvResult, ISearchMovieResult } from "../../interfaces";
import { SearchService } from "../../services";
import { MatDialog } from "@angular/material";
import { DiscoverCardDetailsComponent } from "./discover-card-details.component";
@Component({
selector: "discover-card",
@ -13,7 +15,7 @@ export class DiscoverCardComponent implements OnInit {
@Input() public result: IDiscoverCardResult;
public RequestType = RequestType;
constructor(private searchService: SearchService) { }
constructor(private searchService: SearchService, private dialog: MatDialog) { }
public ngOnInit() {
if (this.result.type == RequestType.tvShow) {
@ -23,6 +25,14 @@ export class DiscoverCardComponent implements OnInit {
this.getExtraMovieInfo();
}
}
public openDetails(details: IDiscoverCardResult) {
const ref = this.dialog.open(DiscoverCardDetailsComponent, { width:"700px", data: details })
ref.afterClosed().subscribe(result => {
console.log('The dialog was closed');
});
}
public getExtraTvInfo() {
this.searchService.getShowInformation(this.result.id)

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

@ -1,6 +1,6 @@
<div class="small-middle-container">
<div *ngIf="discoverResults" class="row top-spacing full-height">
<div class="col-lg-1 col-md-4 col-6" *ngFor="let result of discoverResults" [@slideIn]>
<div class="col-lg-1 col-md-2 col-4 small-padding" *ngFor="let result of discoverResults" [@slideIn]>
<discover-card [result]="result"></discover-card>
</div>
</div>

5
src/Ombi/ClientApp/src/app/discover/discover.component.scss
View file

@ -6,4 +6,9 @@
.small-middle-container{
margin: auto;
width: 95%;
}
.small-padding {
padding-left: 5px;
padding-right: 5px;
}

11
src/Ombi/ClientApp/src/app/discover/discover.module.ts
View file

@ -8,6 +8,8 @@ import { DiscoverComponent } from "./discover.component";
import { DiscoverCardComponent } from "./card/discover-card.component";
import { AuthGuard } from "../auth/auth.guard";
import { PipeModule } from "../pipes/pipe.module";
import { DiscoverCardDetailsComponent } from "./card/discover-card-details.component";
import { MatDialog } from "@angular/material";
const routes: Routes = [
{ path: "", component: DiscoverComponent, canActivate: [AuthGuard] },
@ -20,13 +22,18 @@ const routes: Routes = [
],
declarations: [
DiscoverComponent,
DiscoverCardComponent
DiscoverCardComponent,
DiscoverCardDetailsComponent,
],
entryComponents: [
DiscoverCardDetailsComponent
],
exports: [
RouterModule,
],
providers: [
SearchService
SearchService,
MatDialog,
],
})

4
src/Ombi/ClientApp/src/app/shared/shared.module.ts
View file

@ -11,7 +11,7 @@ import { InputSwitchModule, SidebarModule } from "primeng/primeng";
import {
MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule} from '@angular/material';
import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule } from "@angular/material";
import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule } from "@angular/material";
@NgModule({
declarations: [
@ -36,6 +36,7 @@ import {
MatToolbarModule,
MatCheckboxModule,
MatExpansionModule,
MatDialogModule,
],
exports: [
TranslateModule,
@ -58,6 +59,7 @@ import {
MatAutocompleteModule,
MatCheckboxModule,
MatExpansionModule,
MatDialogModule,
],
})
export class SharedModule {}