Skip to content

Commit

Permalink
Small fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
1dagranholm committed Mar 18, 2020
1 parent 58e85c3 commit 982d285
Show file tree
Hide file tree
Showing 11 changed files with 146 additions and 13 deletions.
4 changes: 2 additions & 2 deletions src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ListComponent } from './list/list.component';
import { TrendingTvComponent } from './trending-tv/trending-tv.component';
import { TrendingMoviesComponent } from './trending-movies/trending-movies.component';
import { ViewMovieComponent } from './view-movie/view-movie.component';
import { ViewTvComponent } from './view-tv/view-tv.component';
import { ViewActorComponent } from './view-actor/view-actor.component';
import { SearchResultComponent } from './search-result/search-result.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'list', component: ListComponent },
{ path: 'trending-tv', component: TrendingTvComponent },
{ path: 'trending-movies', component: TrendingMoviesComponent },
{ path: 'search-result/:search', component: SearchResultComponent },
{ path: 'view-movie/:id', component: ViewMovieComponent },
{ path: 'view-tv/:id', component: ViewTvComponent },
Expand Down
4 changes: 2 additions & 2 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@

<ul class="navbar-nav mr-auto">
<li class="nav-item ml-2">
<a class="nav-link" href="#" routerLink="/list">Popular movies</a>
<a class="nav-link" href="#" routerLink="/trending-movies">Trending movies</a>
</li>
<li class="nav-item ml-2">
<a class="nav-link" href="#" routerLink="/trending-tv">Trending TV-show</a>
<a class="nav-link" href="#" routerLink="/trending-tv">Trending TV-shows</a>
</li>
</ul>

Expand Down
4 changes: 3 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { ViewActorComponent } from './view-actor/view-actor.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { TrendingTvComponent } from './trending-tv/trending-tv.component';
import { ViewTvComponent } from './view-tv/view-tv.component';
import { TrendingMoviesComponent } from './trending-movies/trending-movies.component';

@NgModule({
declarations: [
Expand All @@ -25,7 +26,8 @@ import { ViewTvComponent } from './view-tv/view-tv.component';
ViewMovieComponent,
ViewActorComponent,
TrendingTvComponent,
ViewTvComponent
ViewTvComponent,
TrendingMoviesComponent
],
imports: [
BrowserModule,
Expand Down
10 changes: 5 additions & 5 deletions src/app/home/home.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
</div>
<div class="overlay">
<div class="cover-text text-center">
<h1 class="display-4 font-weight-normal">Popular movies</h1>
<h1 class="display-4 font-weight-normal">Trending movies</h1>
<p class="lead font-weight-normal">The most popular movies gathered.</p>
<a class="btn btn-lg white-btn" routerLink="/list">Take me there</a>
<a class="btn btn-lg white-btn" routerLink="/trending-movies">Take me there</a>
</div>
</div>
</div>
Expand All @@ -27,11 +27,11 @@ <h1 class="display-4 font-weight-normal">Popular movies</h1>
<div *ngIf="!series">
<div class="no-backdrop"></div>
</div>
<div class="overlay">
<div class="cover-text text-center">
<div class="overlay-light">
<div class="cover-text-black text-center">
<h1 class="display-4 font-weight-normal">Trending TV-shows</h1>
<p class="lead font-weight-normal">Gotta catch 'em all.</p>
<a class="btn btn-lg white-btn" routerLink="/trending-tv">Show me</a>
<a class="btn btn-lg blue-btn" routerLink="/trending-tv">Show me</a>
</div>
</div>
</div>
Expand Down
27 changes: 27 additions & 0 deletions src/app/home/home.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,15 @@
color: white;
}

.cover-text-black {
position: absolute;
top: 200px;
left: 0;
right: 0;
z-index: 1000;
color: black;
}

.flex-equal > * {
-ms-flex: 1;
flex: 1;
Expand Down Expand Up @@ -74,3 +83,21 @@
left: 0;
right: 0;
}

.overlay-blue {
background-color: rgba(24, 21, 31, 0.85);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.overlay-light {
background-color: rgba(255, 255, 255, 0.75);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
2 changes: 1 addition & 1 deletion src/app/home/home.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class HomeComponent implements OnInit {
ngOnInit() {
this.randomize = Math.round(Math.random() * 10);

this._http.getPopularMovies().subscribe(data => {
this._http.getTrendingMovies().subscribe(data => {
this.movies = data['results'];
});

Expand Down
59 changes: 59 additions & 0 deletions src/app/trending-movies/trending-movies.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<section class="jumbotron text-center text-light bg-green-blue">
<div class="container">
<h1>Trending movies</h1>
<p class="lead">On big screens right now.</p>
</div>
</section>

<div class="album py-5 bg-light">
<div *ngIf="movies" class="container">
<div class="row">
<div
*ngFor="let movie of movies; index as id"
class="order-{{ movie.vote_average }} col-12 col-md-6 col-lg-4 col-xl-3"
>
<div class="card mb-4 shadow-sm">
<a [routerLink]="['/view-movie', movie.id]"
><img
src="{{
movie.poster_path == null
? 'assets/no-image.png'
: 'https://image.tmdb.org/t/p/w185_and_h278_bestv2/' +
movie.poster_path
}}"
class="poster_path bd-placeholder-img card-img-top"
width="100%"
focusable="false"
role="img"
/></a>
<div class="card-body">
<h3 class="mb-0">{{ movie.title }}</h3>
<p>
<small class="text-muted"
>Release: {{ movie.release_date }}</small
>
</p>
<p class="card-text" style="height:120px;">
{{ movie.overview.substring(0, 200) }}...
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button
type="button"
[routerLink]="['/view-movie', movie.id]"
class="btn btn-sm btn-outline-secondary"
>
More info
</button>
</div>
<small class="text-muted"
>Average vote: {{ movie.vote_average }}</small
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Empty file.
25 changes: 25 additions & 0 deletions src/app/trending-movies/trending-movies.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TrendingMoviesComponent } from './trending-movies.component';

describe('TrendingMoviesComponent', () => {
let component: TrendingMoviesComponent;
let fixture: ComponentFixture<TrendingMoviesComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ TrendingMoviesComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(TrendingMoviesComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
22 changes: 22 additions & 0 deletions src/app/trending-movies/trending-movies.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Component, OnInit } from "@angular/core";
import { HttpService } from "../http.service";

@Component({
selector: "app-trending-movies",
templateUrl: "./trending-movies.component.html",
styleUrls: ["./trending-movies.component.scss"]
})
export class TrendingMoviesComponent implements OnInit {

movies: any;
genres: any;
genreArray: any = [];

constructor(private _http: HttpService) {}

ngOnInit(): void {
this._http.getTrendingMovies().subscribe(data => {
this.movies = data["results"];
});
}
}
2 changes: 0 additions & 2 deletions src/app/trending-tv/trending-tv.component.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Component, OnInit } from "@angular/core";
import { HttpService } from "../http.service";
import { ITS_JUST_ANGULAR } from "@angular/core/src/r3_symbols";
import { isDefined } from "@angular/compiler/src/util";

@Component({
selector: "app-trending-tv",
Expand Down

0 comments on commit 982d285

Please sign in to comment.