Fix view actor/movie loop and some css on nav

1dagranholm · Mar 13, 2020 · e3b37bc · e3b37bc
1 parent c16a51d
commit e3b37bc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 46 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,5 +1,5 @@
 <header>
-  <nav class="navbar navbar-expand-lg navbar-dark">
+  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
     <a class="navbar-brand" routerLink="/" title="Home">The Movie App</a>
 
     <button

diff --git a/src/app/view-actor/view-actor.component.html b/src/app/view-actor/view-actor.component.html
@@ -72,27 +72,25 @@ <h3>Facts</h3>
     <h2 *ngIf="movies[0]">Featured in</h2>
     <div class="row mt-4">
       <div class="wrapper" *ngFor="let m of movies; let i = index">
-        <div class="col-2 text-center mb-5">
-          <div *ngIf="i < 12">
-            <a [routerLink]="['/view-movie', m.id]">
-              <img
-                src="{{
-                  m.poster_path == null
-                    ? 'assets/no-image.png'
-                    : 'https://image.tmdb.org/t/p/w185_and_h278_bestv2' +
+        <div *ngIf="i < 12" class="col-2 text-center mb-5">
+          <a [routerLink]="['/view-movie', m.id]">
+            <img
+              src="{{
+                m.poster_path == null
+                  ? 'assets/no-image.png'
+                  : 'https://image.tmdb.org/t/p/w185_and_h278_bestv2' +
                     m.poster_path
-                }}"
-                class="poster_path bd-placeholder-img card-img-top cast-image"
-                width="100%"
-                focusable="false"
-                role="img"
-              />
-            </a>
-            <a [routerLink]="['/view-actor', m.id]"
-              ><h3 class="mt-3">{{ m.original_title }}</h3></a
-            >
-            <p class="card-text">Character: {{ m.character }}</p>
-          </div>
+              }}"
+              class="poster_path bd-placeholder-img card-img-top cast-image"
+              width="100%"
+              focusable="false"
+              role="img"
+            />
+          </a>
+          <a [routerLink]="['/view-actor', m.id]"
+            ><h3 class="mt-3">{{ m.original_title }}</h3></a
+          >
+          <p class="card-text">Character: {{ m.character }}</p>
         </div>
       </div>
     </div>

diff --git a/src/app/view-movie/view-movie.component.html b/src/app/view-movie/view-movie.component.html
@@ -32,7 +32,7 @@ <h1>
             movie.poster_path == null
               ? 'assets/no-image.png'
               : 'https://image.tmdb.org/t/p/w185_and_h278_bestv2' +
-              movie.poster_path
+                movie.poster_path
           }}"
           class="poster_path mb-4"
         />
@@ -82,27 +82,25 @@ <h2>Facts</h2>
     <h2 *ngIf="cast[0]">Featured actors</h2>
     <div class="row mt-4">
       <div class="wrapper" *ngFor="let c of cast; let i = index">
-        <div class="col-2 text-center mb-5">
-          <div *ngIf="i < 12">
-            <a [routerLink]="['/view-actor', c.id]">
-              <img
-                src="{{
-                  c.profile_path == null
-                    ? 'assets/no-image.png'
-                    : 'https://image.tmdb.org/t/p/w600_and_h900_bestv2' +
-                      c.profile_path
-                }}"
-                class="poster_path bd-placeholder-img card-img-top cast-image"
-                width="100%"
-                focusable="false"
-                role="img"
-              />
-            </a>
-            <a [routerLink]="['/view-actor', c.id]"
-              ><h3 class="mt-3">{{ c.name }}</h3></a
-            >
-            <p class="card-text">Character: {{ c.character }}</p>
-          </div>
+        <div *ngIf="i < 12" class="col-2 text-center mb-5">
+          <a [routerLink]="['/view-actor', c.id]">
+            <img
+              src="{{
+                c.profile_path == null
+                  ? 'assets/no-image.png'
+                  : 'https://image.tmdb.org/t/p/w600_and_h900_bestv2' +
+                    c.profile_path
+              }}"
+              class="poster_path bd-placeholder-img card-img-top cast-image"
+              width="100%"
+              focusable="false"
+              role="img"
+            />
+          </a>
+          <a [routerLink]="['/view-actor', c.id]"
+            ><h3 class="mt-3">{{ c.name }}</h3></a
+          >
+          <p class="card-text">Character: {{ c.character }}</p>
         </div>
       </div>
     </div>
@@ -116,7 +114,9 @@ <h1>
         Not available
       </h1>
       <p class="mt-3">
-        <span class="lead bg-darken rounded-sm m-1 p-2">Try the search function to find what you are looking for.</span>
+        <span class="lead bg-darken rounded-sm m-1 p-2"
+          >Try the search function to find what you are looking for.</span
+        >
       </p>
     </div>
   </section>

diff --git a/src/styles.scss b/src/styles.scss
@@ -2,15 +2,20 @@
 @import "~bootstrap/dist/css/bootstrap.css";
 
 /* General */
-.navbar,
 .dark-footer {
   background-color: #222222;
   color: white;
 }
 
+.navbar {
+  box-shadow: #222222 0 0px 20px;
+  background-color: #222222;
+  color: white;
+}
+
 /* General styling */
 body {
-  padding-bottom: 3rem;
+  padding: 3rem 0rem;
 }
 
 main {