github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

UI !wip

Browse source
This commit is contained in:
TidusJar 2019-01-28 10:19:07 +00:00
commit c32835dc1b
10 changed files with 128 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,20 +1,19 @@
<div class="card-spacing" *ngIf="result">
<mat-card class="mat-elevation-z8">
<div class="rating">{{result.rating | number:'1.0-1'}}</div>
<mat-card class="mat-elevation-z8 dark-card grow">
<a [routerLink]="result.type === RequestType.movie ? '/details/movie/' + result.id : '/details/tv/' + result.id">
<img mat-card-image src="{{result.posterPath}}" class="card-poster" alt="{{result.title}}">
<img id="cardImage" mat-card-image src="{{result.posterPath}}" class="card-poster" [ngClass]="(result.type === RequestType.movie)?'movie-image':'tv-image'" alt="{{result.title}}">
</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" matTooltip="{{result.title}}">{{result.title | truncate:13}}</h6>
<small>{{result.overview | truncate: 25}}</small>
</mat-card-content>
<mat-card-actions>
<button *ngIf="!result.requested && !result.available" mat-raised-button color="primary">Request</button>
<button *ngIf="result.requested && !result.available" mat-raised-button color="warn">Requested</button>
<button *ngIf="!result.requested && result.available" mat-raised-button class="btn-green">Available</button>
<mat-card-actions class="expand">
<button mat-icon-button>
<mat-icon>expand_more</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>

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

@ -1,12 +1,41 @@
.card-poster {
max-height: 225px;
$ombi-primary:#3f3f3f;
#cardImage {
max-height: 153px;
border-radius: 5px 5px 0px 0px;
}
.dark-card {
background-color: $ombi-primary;
border-radius: 8px;
color: white;
}
.card-spacing {
margin-top:10%;
margin-top: 10%;
}
.rating {
position: absolute;
font-weight: bold;
}
$border-width: 2px;
.movie-image {
border-bottom: $border-width orange solid;
}
.tv-image {
border-bottom: $border-width teal solid;
}
.expand {
text-align: center;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}

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

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

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

@ -1,3 +1,9 @@
.full-height {
height:100%;
height: 100%;
}
.small-middle-container{
margin: auto;
width: 95%;
}

4
src/Ombi/ClientApp/src/app/discover/discover.component.ts
View file

@ -40,7 +40,8 @@ export class DiscoverComponent implements OnInit {
type: RequestType.movie,
id: m.id,
url: `http://www.imdb.com/title/${m.imdbId}/`,
rating: m.voteAverage
rating: m.voteAverage,
overview: m.overview
});
});
this.tvShows.forEach(m => {
@ -53,6 +54,7 @@ export class DiscoverComponent implements OnInit {
id: m.id,
url: undefined,
rating: +m.rating,
overview: m.overview
});
});

1
src/Ombi/ClientApp/src/app/discover/interfaces.ts
View file

@ -9,4 +9,5 @@ export interface IDiscoverCardResult {
available: boolean;
requested: boolean;
rating: number;
overview: string;
}

8
src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
View file

@ -7,17 +7,17 @@
<mat-icon aria-label="Side nav toggle icon">find_replace</mat-icon>
Discover
</a>
<a mat-list-item routerLink="/search">
<a mat-list-item [routerLinkActive]="['active']" routerLink="/search">
<mat-icon aria-label="Side nav toggle icon">search</mat-icon> Search
</a>
<a mat-list-item routerLink="/requests">
<a mat-list-item [routerLinkActive]="['active']" routerLink="/requests">
<mat-icon aria-label="Side nav toggle icon">list</mat-icon> Requests
</a>
<a mat-list-item routerLink="/Settings/About">
<a mat-list-item [routerLinkActive]="['active']" routerLink="/Settings/About">
<mat-icon aria-label="Side nav toggle icon">settings</mat-icon> Settings
</a>
<a mat-list-item aria-label="Toggle sidenav" (click)="logOut();">
<a mat-list-item [routerLinkActive]="['active']" aria-label="Toggle sidenav" (click)="logOut();">
<mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
{{ 'NavigationBar.Logout' | translate }}
</a>

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 } from "@angular/material";
import { MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule } from "@angular/material";
@NgModule({
declarations: [
@ -35,6 +35,7 @@ import {
MatListModule,
MatToolbarModule,
MatCheckboxModule,
MatExpansionModule,
],
exports: [
TranslateModule,
@ -56,6 +57,7 @@ import {
MatTooltipModule,
MatAutocompleteModule,
MatCheckboxModule,
MatExpansionModule,
],
})
export class SharedModule {}

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

@ -1,4 +1,5 @@
@import '~@angular/material/theming';
@import "./mat-palette.scss";
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
@ -9,8 +10,8 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$ombi-app-primary: mat-palette($mat-blue-grey, 900);
$ombi-app-accent: mat-palette($mat-pink, A200, A100, A400);
$ombi-app-primary: mat-palette($ombi-primary, 500);
$ombi-app-accent: mat-palette($ombi-accent, A200, A100, A400);
// The warn palette is optional (defaults to red).
$ombi-app-warn: mat-palette($mat-deep-orange);

66
src/Ombi/ClientApp/src/styles/mat-palette.scss Normal file
View file

@ -0,0 +1,66 @@
$ombi-accent: (
50 : #e5f1ed,
100 : #bedcd3,
200 : #92c5b6,
300 : #66ad99,
400 : #469c83,
500 : #258a6d,
600 : #218265,
700 : #1b775a,
800 : #166d50,
900 : #0d5a3e,
A100 : #90ffd2,
A200 : #5dffbd,
A400 : #2affa8,
A700 : #10ff9e,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$ombi-primary: (
50 : #e8e8e8,
100 : #c5c5c5,
200 : #9f9f9f,
300 : #797979,
400 : #5c5c5c,
500 : #3f3f3f,
600 : #393939,
700 : #313131,
800 : #292929,
900 : #1b1b1b,
A100 : #f07575,
A200 : #eb4747,
A400 : #ff0000,
A700 : #e60000,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);