ui changes, added nav-bar menu

SooryaSoorya · Apr 28, 2020 · 8caba20 · 8caba20
1 parent 9a09da3
commit 8caba20
Show file tree

Hide file tree

Showing 42 changed files with 524 additions and 210 deletions.
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
@@ -1,20 +1,28 @@
-import { TestBed, async } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+import { TestBed, async } from "@angular/core/testing";
+import { RouterTestingModule } from "@angular/router/testing";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { HttpClientTestingModule } from "@angular/common/http/testing";
 
-describe('AppComponent', () => {
+import { AppComponent } from "./app.component";
+import { SidebarComponent } from "./sidebar/sidebar.component";
+import { MovieService } from "../app/movie/services/movie.services";
+
+describe("AppComponent", () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
+        BrowserAnimationsModule,
+        NoopAnimationsModule,
+        HttpClientTestingModule,
+        RouterTestingModule,
       ],
+      declarations: [AppComponent, SidebarComponent],
+      providers: [MovieService],
     }).compileComponents();
   }));
 
-  it('should create the app', () => {
+  it("should create the app", () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
     expect(app).toBeTruthy();
@@ -23,13 +31,6 @@ describe('AppComponent', () => {
   it(`should have as title 'ng-movie-app'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.componentInstance;
-    expect(app.title).toEqual('ng-movie-app');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('.content span').textContent).toContain('ng-movie-app app is running!');
+    expect(app.title).toEqual("ng-movie-app");
   });
 });
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,13 +3,16 @@ import { NgModule } from "@angular/core";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
+import { SharedModule } from "./shared/shared.module";
 import { SidebarModule } from "./sidebar/sidebar.module";
 import { MovieModule } from "./movie/movie.module";
 import { SearchBarModule } from "./search-bar/search-bar.module";
 import { LoaderModule } from "./loader/loader.module";
 import { MovieDetailModule } from "./movie-detail/movie-detail.module";
 import { NoDataModule } from "./no-data/no-data.module";
-import { SharedModule } from './shared/shared.module';
+import { NavMenuModule } from "./nav-menu/nav-menu.module";
+
+import { MovieService } from "./movie/services/movie.services";
 
 @NgModule({
   declarations: [AppComponent],
@@ -22,7 +25,8 @@ import { SharedModule } from './shared/shared.module';
     SearchBarModule,
     LoaderModule,
     MovieDetailModule,
-    NoDataModule
+    NoDataModule,
+    NavMenuModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

diff --git a/src/app/movie-detail/movie-detail.component.html b/src/app/movie-detail/movie-detail.component.html
@@ -1,9 +1,9 @@
 <app-loader [loading]="loading"></app-loader>
 
 <div class="ngmp-movie-details-container" *ngIf="movie" [@simpleFadeAnimation]="'in'">
-    <div class="ngmp-movie-cover">
-        <img src="{{movie.Poster}}" alt="movie cover">
-    </div>
+        <div *ngIf="(movie.Poster !== MOVIE_PROPS.NO_IMG_URL || null)" class="ngmp-movie-cover">
+            <img src="{{movie.Poster}}" alt="movie cover">
+        </div>
     <div class="ngmp-movie-details">
         <div class="ngmp-movie-poster">
             <img src="{{movie.Poster}}" alt="movie poster">
@@ -12,15 +12,15 @@
             <h2>{{movie.Title}}</h2>
             <div class="ngmp-movie-info">
                 <div class="ngmp-movie-rate">
-                    <span>
+                    <a>
                         <img class="ngmp-star-img" src="assets/icons/star.svg" alt="movie poster">
                         <strong>{{movie.imdbRating}}</strong>
-                    </span>
+                    </a>
                 </div>
                 <div class="ngmp-movie-duration">
-                    <span><img class="ngmp-duration-img" src="assets/icons/duration.svg" alt="movie poster">
+                    <a><img class="ngmp-duration-img" src="assets/icons/duration.svg" alt="movie poster">
                         <strong>{{movie.Runtime}}</strong>
-                    </span>
+                    </a>
                 </div>
                 <div class="ngmp-movie-rating-container">
                     <strong>Ratings:</strong>
@@ -37,14 +37,21 @@ <h2>{{movie.Title}}</h2>
                     </a>
                 </div>
             </div>
-    
+
             <p class="ngmp-movie-plot">
                 <img class="ngmp-plot-img" src="assets/icons/plot.svg" alt="movie poster">
                 {{movie.Plot}}
             </p>
-            <div class="ngmp-movie-info"> 
+            <div class="ngmp-movie-info">
+                <a class="ngma-actor-details">
+                    <div class="ngma-icon-container ngma-avatar"
+                        style="background-image: url('assets/icons/director.svg');">
+                    </div>
+                    <h3 class="ngma-actorname">{{movie.Director}}</h3>
+                </a>
                 <a *ngFor="let actor of movie.Actors.split(',')" class="ngma-actor-details">
-                    <div class="icon-container avatar" style="background-image: url('assets/icons/avatar.svg');">
+                    <div class="ngma-icon-container ngma-avatar"
+                        style="background-image: url('assets/icons/avatar.svg');">
                     </div>
                     <h3 class="ngma-actorname"> {{actor}}</h3>
                 </a>

diff --git a/src/app/movie-detail/movie-detail.component.scss b/src/app/movie-detail/movie-detail.component.scss
@@ -1,28 +1,43 @@
-@import 'variables';
+@import "variables";
 
-.ngmp-movie-details-container{
+.ngmp-movie-details-container {
   width: 100%;
 }
 
-.ngmp-movie-cover{
+.ngmp-movie-cover {
   position: relative;
   max-height: 25em;
   overflow: hidden;
 
-  img{
+  img {
     width: 100%;
   }
 
-  &:after{
-    content: '';
+  &:after {
+    content: "";
     position: absolute;
-    top:0;
+    top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(4,6,13,0) 15%, rgba(237, 103, 30,.4) 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(4,6,13,0) 15%,rgba(237, 103, 30,.4) 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(4,6,13,0) 15%,rgba(237, 103, 30,.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    background: -moz-linear-gradient(
+      top,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(4, 6, 13, 0) 15%,
+      rgba(237, 103, 30, 0.4) 100%
+    ); /* FF3.6-15 */
+    background: -webkit-linear-gradient(
+      top,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(4, 6, 13, 0) 15%,
+      rgba(237, 103, 30, 0.4) 100%
+    ); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(4, 6, 13, 0) 15%,
+      rgba(237, 103, 30, 0.4) 100%
+    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#182b54',GradientType=0 ); /* IE6-9 */
   }
 }
@@ -40,7 +55,7 @@
   padding: 0 1em;
   color: darken($light, 35);
 
-  h2{
+  h2 {
     color: $primary-title;
     margin-top: 0;
     font-size: 44px;
@@ -57,23 +72,26 @@
       margin-right: 1em;
     }
 
-    strong{
+    strong {
       color: $primary-title;
     }
-    .icon-container{
+    .ngma-icon-container {
       background-position: center;
       background-size: cover;
-      border: 1px solid $green;
+      border: 1px solid $orange;
       line-height: 2;
     }
-    .avatar {
+    .ngma-avatar {
       flex-shrink: 0;
       width: 35px;
       height: 35px;
       border-radius: 50%;
       -o-object-fit: cover;
       object-fit: cover;
     }
+    .ngma-actorname {
+      font-size: 12px;
+    }
     .ngma-actor-details {
       display: flex;
       flex-direction: column;
@@ -84,8 +102,8 @@
     }
   }
 
-  .ngmp-movie-rating-container{
-    a{
+  .ngmp-movie-rating-container {
+    a {
       margin-left: 0.5em;
       background-color: $secondary-color;
       color: $grey;
@@ -100,7 +118,7 @@
     line-height: 1.8;
   }
 
-  .ngmp-plot-img{
+  .ngmp-plot-img {
     top: 10px;
     position: relative;
     height: 25px;
@@ -114,32 +132,37 @@
     width: 25px;
   }
 
-  .ngmp-duration-img{
+  .ngmp-duration-img {
     top: 10px;
     position: relative;
     height: 20px;
   }
 }
 
-@media only screen and (max-width : 48em) {
+@media only screen and (max-width: 48em) {
   .ngmp-movie-details {
     flex-direction: column-reverse;
     transform: translateY(0);
     padding: 0 0.5em;
 
-    .ngmp-movie-poster{
+    .ngmp-movie-poster {
       padding: 0 1em;
     }
     .ngmp-movie-info {
-      flex-direction: column;
-
+      display: block;
       div {
+        flex-direction: column;
+        display: flex;
+        justify-content: flex-start;
+        text-transform: capitalize;
+        margin-top: 25px;
         margin-right: 0;
         margin-bottom: 1em;
       }
     }
     .ngmp-movie-rating-container {
-      span{
+      flex-direction: column;
+      span {
         display: block;
         margin-bottom: 1em;
       }

diff --git a/src/app/movie-detail/movie-detail.component.spec.ts b/src/app/movie-detail/movie-detail.component.spec.ts
@@ -5,6 +5,7 @@ import { MovieDetailComponent } from './movie-detail.component';
 describe('MovieDetailComponent', () => {
   let component: MovieDetailComponent;
   let fixture: ComponentFixture<MovieDetailComponent>;
+
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({

diff --git a/src/app/movie-detail/movie-detail.component.ts b/src/app/movie-detail/movie-detail.component.ts
@@ -5,6 +5,7 @@ import { Movie } from "../movie/models/movie.models";
 import { MovieService } from "../movie/services/movie.services";
 import { FadeIn } from "../shared/animation";
 
+import { MOVIE_PROPS } from "../shared/constants";
 @Component({
   selector: "app-movie-detail",
   templateUrl: "./movie-detail.component.html",
@@ -15,6 +16,7 @@ export class MovieDetailComponent implements OnInit {
   public loading: boolean;
   public movie: any;
   public error: string = "";
+  public MOVIE_PROPS = MOVIE_PROPS;
 
   constructor(
     private movieService: MovieService,

diff --git a/src/app/movie-detail/movie-detail.module.ts b/src/app/movie-detail/movie-detail.module.ts
@@ -1,14 +1,16 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-
+import { HttpClient } from "@angular/common/http";
 import { MovieDetailRoutingModule } from './movie-detail-routing.module';
 
+import { MovieService } from "../movie/services/movie.services";
 
 @NgModule({
   declarations: [],
   imports: [
     CommonModule,
     MovieDetailRoutingModule
-  ]
+  ],
+  providers: [HttpClient, MovieService],
 })
 export class MovieDetailModule { }
diff --git a/src/app/movie/models/genre.model.ts b/src/app/movie/models/genre.model.ts
@@ -0,0 +1,13 @@
+export enum MovieGenre {
+  Action = "action",
+  Adventure = "adventure",
+  Comedy = "comedy",
+  Crime = "crime",
+  Horror = "horror",
+  History = "history",
+  Mystery = "mystery",
+  Science = "Science",
+  Animation = "animation",
+  Sport = "sport",
+  Thriller = "thriller",
+}