From df6d8d63d51a04fa13fd5b24599845a3dfc34de3 Mon Sep 17 00:00:00 2001
From: SooryaSoorya <haisoorya.s@gmail.com>
Date: Tue, 28 Apr 2020 22:10:15 +0300
Subject: [PATCH] ui changes

---
 src/app/loader/loader.component.scss         |  2 +-
 src/app/movie/movie.component.html           | 20 +++++++++++---------
 src/app/movie/movie.component.scss           |  8 +++++---
 src/app/movie/movie.component.ts             | 17 ++++++++++++++++-
 src/app/nav-menu/nav-menu.component.html     |  5 ++---
 src/app/search-bar/search-bar.component.html |  4 ++--
 src/app/search-bar/search-bar.component.scss |  7 +++++++
 src/assets/icons/calender.svg                |  7 +++++++
 8 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 src/assets/icons/calender.svg

diff --git a/src/app/loader/loader.component.scss b/src/app/loader/loader.component.scss
index 19a8e9c..120d076 100644
--- a/src/app/loader/loader.component.scss
+++ b/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;
   }
   
diff --git a/src/app/movie/movie.component.html b/src/app/movie/movie.component.html
index ec5961d..e3788b1 100644
--- a/src/app/movie/movie.component.html
+++ b/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>
diff --git a/src/app/movie/movie.component.scss b/src/app/movie/movie.component.scss
index bb2931c..c99f2e4 100644
--- a/src/app/movie/movie.component.scss
+++ b/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;
diff --git a/src/app/movie/movie.component.ts b/src/app/movie/movie.component.ts
index bd71631..588f05e 100644
--- a/src/app/movie/movie.component.ts
+++ b/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;
+  }
 }
diff --git a/src/app/nav-menu/nav-menu.component.html b/src/app/nav-menu/nav-menu.component.html
index cb69d0c..695d305 100644
--- a/src/app/nav-menu/nav-menu.component.html
+++ b/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>
diff --git a/src/app/search-bar/search-bar.component.html b/src/app/search-bar/search-bar.component.html
index 8529afe..0f32234 100644
--- a/src/app/search-bar/search-bar.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/search-bar/search-bar.component.scss b/src/app/search-bar/search-bar.component.scss
index 02f1cd7..0f3e662 100644
--- a/src/app/search-bar/search-bar.component.scss
+++ b/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;
     }
diff --git a/src/assets/icons/calender.svg b/src/assets/icons/calender.svg
new file mode 100644
index 0000000..cc059bf
--- /dev/null
+++ b/src/assets/icons/calender.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 120" x="0px" y="0px">
+	<style xmlns="http://www.w3.org/2000/svg">
+        path {
+          fill: #ED671E;
+        }
+      </style>
+      <path d="M76,20H72V16a4,4,0,0,0-8,0v4H32V16a4,4,0,0,0-8,0v4H20A12,12,0,0,0,8,32V72A12,12,0,0,0,20,84H76A12,12,0,0,0,88,72V32A12,12,0,0,0,76,20Zm4,20H16V32a4,4,0,0,1,4-4h4v4a4,4,0,0,0,8,0V28H64v4a4,4,0,0,0,8,0V28h4a4,4,0,0,1,4,4Z"/></svg>
\ No newline at end of file