ui changes

SooryaSoorya · Apr 29, 2020 · b22c35b · b22c35b
1 parent a1d4a54
commit b22c35b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 58 deletions.
diff --git a/src/app/movie-detail/movie-detail.component.scss b/src/app/movie-detail/movie-detail.component.scss
@@ -2,6 +2,7 @@
 
 .ngma-movie-details-container {
   width: 100%;
+  margin-left: 100px;
 }
 
 .ngma-movie-cover {
@@ -140,6 +141,9 @@
 }
 
 @media only screen and (max-width: 48em) {
+  .ngma-movie-details-container {
+    margin-left: 50px;
+  }
   .ngma-movie-details {
     flex-direction: column-reverse;
     transform: translateY(0);

diff --git a/src/app/movie/movie.component.html b/src/app/movie/movie.component.html
@@ -1,46 +1,48 @@
-<app-search-bar (onSearch)="onSearch($event)"></app-search-bar>
-<app-nav-menu (onNavMenuChange)="onNavMenuChange($event)" (showLoading)="showLoading($event)"></app-nav-menu>
-<app-loader [loading]="loading"></app-loader>
+<div class="ngma-movie">
+    <app-search-bar (onSearch)="onSearch($event)"></app-search-bar>
+    <app-nav-menu (onNavMenuChange)="onNavMenuChange($event)" (showLoading)="showLoading($event)"></app-nav-menu>
+    <app-loader [loading]="loading"></app-loader>
 
-<div class="ngma-main-container">
-    <div *ngIf="movies; else elseBlock" class="ngma-movies-container">
-        <div class="ngma-movies-list-header">
-            <span class="ngma-movies-count">
-                {{movies.length}} Movies
-            </span>
-            <div class="ngma-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 class="ngma-main-container">
+        <div *ngIf="movies; else elseBlock" class="ngma-movies-container">
+            <div class="ngma-movies-list-header">
+                <span class="ngma-movies-count">
+                    {{movies.length}} Movies
+                </span>
+                <div class="ngma-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>
-        </div>
-        <hr>
-        <div class="ngma-movies-list">
-            <div *ngFor="let movie of movies" class="ngma-movie">
-                <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="ngma-noimageposter">
-                        <img src="assets/icons/notfound.svg" alt="search icon" class="ngma-noimage">
-                    </div>
-                    <ng-template #elseBlock>
-                        <figure>
-                            <img src="{{movie.Poster}}" alt="movie poster" class="ngma-poster">
-                        </figure>
-                    </ng-template>
+            <hr>
+            <div class="ngma-movies-list">
+                <div *ngFor="let movie of movies" class="ngma-movie">
+                    <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="ngma-noimageposter">
+                            <img src="assets/icons/notfound.svg" alt="search icon" class="ngma-noimage">
+                        </div>
+                        <ng-template #elseBlock>
+                            <figure>
+                                <img src="{{movie.Poster}}" alt="movie poster" class="ngma-poster">
+                            </figure>
+                        </ng-template>
 
-                    <h3 class="ngma-movie-title">{{movie.Title}}</h3>
-                    <div class="ngma-movie-year">
-                        <img src="assets/icons/calender.svg" alt="movie poster" class="ngma-rateimg">
-                        {{movie.Year}}
-                    </div>
-                </a>
+                        <h3 class="ngma-movie-title">{{movie.Title}}</h3>
+                        <div class="ngma-movie-year">
+                            <img src="assets/icons/calender.svg" alt="movie poster" class="ngma-rateimg">
+                            {{movie.Year}}
+                        </div>
+                    </a>
+                </div>
             </div>
         </div>
+        <ng-template #elseBlock>
+            <app-no-data></app-no-data>
+        </ng-template>
     </div>
-    <ng-template #elseBlock>
-        <app-no-data></app-no-data>
-    </ng-template>
 </div>
diff --git a/src/app/movie/movie.component.scss b/src/app/movie/movie.component.scss
@@ -6,6 +6,9 @@
   flex-direction: column;
 }
 
+.ngma-movie {
+  margin-left: 100px;
+}
 .ngma-main-container {
   display: flex;
   justify-content: flex-start;
@@ -132,28 +135,16 @@
 }
 
 @media only screen and (max-width: 48em) {
+  .ngma-movie {
+    margin-left: 50px;
+  }
+
+  .ngma-movies-sort {
+    flex-direction: column;
+  }
   .main-container {
     flex-direction: column;
 
-    .genres-list {
-      width: 100%;
-      height: auto;
-      padding: 0.8em;
-    }
-
-    .genre-list-items {
-      display: flex;
-      justify-content: flex-start;
-      flex-direction: row;
-      overflow-x: scroll;
-      overflow-y: hidden;
-      margin: 0;
-
-      li {
-        margin-right: 1em;
-      }
-    }
-
     .movies-container {
       width: 100%;
 

diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss
@@ -3,6 +3,7 @@
 .ngma-sidebar {
   width: 100px;
   height: 100%;
+  position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;