ui changes

src/app/loader/loader.component.scss

@@ -5,7 +5,7 @@
     border-radius: 50%;
     width: 50px;
     height: 50px;
-    animation: spin 0.8s linear infinite;
+    animation: spin 1s linear infinite;
     margin: 20px auto;
   }
 

src/app/movie/movie.component.html

@@ -8,18 +8,19 @@
             <span class="ngmp-movies-count">
                 {{movies.length}} Movies
             </span>
-            <div class="ngmp-movies-sort">
-                SORT BY:
-                <select [(ngModel)]="sortBy">
-                    <option value="rate">Rate</option>
-                    <option value="id">Lastest</option>
+            <div class="ngmp-movies-sort"> Sort By:
+                <select [(ngModel)]="sortBy" (change)="sortMovies()">
+                    <option selected="true" disabled="disabled">Select</option>
+                    <option value="Title">Title</option>
+                    <option value="Year">Lastest</option>
                 </select>
             </div>
         </div>
         <hr>
         <div class="ngmp-movies-list">
             <div *ngFor="let movie of movies" class="ngmp-movie">
-                <a [routerLink]="['/movies/' + movie.Type + '/' + movie.imdbID]">
+                <a
+                    [routerLink]="(movie.Poster === MOVIE_PROPS.NO_IMG_URL || null)? ['..'] :['/movies/' + movie.Type + '/' + movie.imdbID]">
                     <div *ngIf="(movie.Poster === MOVIE_PROPS.NO_IMG_URL || null);  else elseBlock"
                         class="ngmp-noimageposter">
                         <img src="assets/icons/notfound.svg" alt="search icon" class="ngmp-noimage">
@@ -31,9 +32,10 @@
                     </ng-template>
 
                     <h3 class="ngmp-movie-title">{{movie.Title}}</h3>
-                    <p class="ngmp-movie-year">
-                        <img src="assets/icons/star.svg" alt="movie poster" class="ngma-rateimg">
-                        {{movie.Year}}</p>
+                    <div class="ngmp-movie-year">
+                        <img src="assets/icons/calender.svg" alt="movie poster" class="ngma-rateimg">
+                        {{movie.Year}}
+                    </div>
                 </a>
             </div>
         </div>

src/app/movie/movie.component.scss

@@ -110,12 +110,14 @@
     .ngmp-movie-year {
       color: $grey;
       margin: 0;
-      margin-left: 34px;
+      margin-left: 70px;
     }
     .ngma-rateimg {
-      height: 16px;
-      position: relative;
+      height: 27px;
+      position: absolute;
       width: 25px;
+      margin-top: 0px;
+      margin-left: -30px;
     }
     .ngmp-noimageposter {
       text-align: center;

src/app/movie/movie.component.ts

@@ -16,7 +16,7 @@ export class MovieComponent implements OnInit {
   public MOVIE_PROPS = MOVIE_PROPS;
   public loading: boolean;
 
-  sortBy: any = "id";
+  sortBy: any = "Select";
   public l = console.log;
 
   constructor(private movieService: MovieService) {
@@ -44,4 +44,19 @@ export class MovieComponent implements OnInit {
   showLoading(loading: boolean) {
     this.loading = loading;
   }
+
+  sortMovies() {
+    this.loading = true;
+    const sortValue = this.sortBy;
+    this.movies.sort((a: any, b: any) => {
+      if (a[sortValue] > b[sortValue]) {
+        return -1;
+      } else if (a[sortValue] < b[sortValue]) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+    this.loading = false;
+  }
 }

src/app/nav-menu/nav-menu.component.html

@@ -2,9 +2,8 @@
     <nav class="ngma-navigation">
         <ul>
             <li *ngFor="let genre of objectKeys(movieGenre)">
-                <a [ngClass]="{'active': genre.toLowerCase() == selectedGenre}" 
-                (click)="changeMenuItem($event)"
-                href="#">
+                <a [ngClass]="{'active': genre.toLowerCase() == selectedGenre}" (click)="changeMenuItem($event)"
+                    href="#">
                     {{genre}}
                 </a>
             </li>

src/app/search-bar/search-bar.component.html

@@ -1,5 +1,5 @@
 <div class="ngmp-search-bar">
     <img src="assets/icons/search.svg" alt="search icon">
-    <input [(ngModel)]="searchText" name="searchText" type="search" placeholder="Search" aria-label="Search"
-        (keyup.enter)="onEnter()">
+    <input [(ngModel)]="searchText" name="searchText" type="search" placeholder="Search movie here " aria-label="Search"
+        (keyup.enter)="onEnter()" autocomplete="off">
 </div>

src/app/search-bar/search-bar.component.scss

@@ -23,6 +23,13 @@
       color: $primary-color-light;
     }
 
+    &:-webkit-search-decoration,
+    &:-webkit-search-cancel-button,
+    &:-webkit-search-results-button,
+    &:-webkit-search-results-decoration {
+      -webkit-appearance: none;
+    }
+
     &::placeholder {
       color: $primary-color-light;
     }