Cleaned up the card items

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

@@ -2,17 +2,16 @@
     <div class="container">
       <a class="navbar-brand" routerLink="/" routerLinkActive="active"><i class="fa fa-home"></i> Kavita</a>
       <ul class="navbar-nav mr-auto">
-        <!-- <li class="nav-item">
-          <input type="text" placeholder="Search bar">
-        </li> -->
-      </ul>
-      <div class="container-fluid" style="max-width: 400px">
+
+        <div class="nav-item">
+          <div class="col-xs-4">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <!-- TODO: Implement autocomplete for searching -->
           </div>
+        </div>
+      </ul>
+      
 
       <!-- TODO: Put SignalR notification button dropdown here. -->
-
       <div ngbDropdown class="nav-item dropdown" *ngIf="(accountService.currentUser$ | async) as user" dropdown>
         <button class="btn btn-outline-secondary" ngbDropdownToggle>{{user.username | titlecase}}</button>
         <div ngbDropdownMenu >
@@ -21,6 +20,7 @@
         </div>
       </div>
       
+  
     </div>
   </nav>
   

src/app/series-detail/series-detail.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
+import { NgbRatingConfig } from '@ng-bootstrap/ng-bootstrap';
 import { Series } from '../_models/series';
 import { Volume } from '../_models/volume';
 import { SeriesService } from '../_services/series.service';
@@ -14,7 +15,9 @@ export class SeriesDetailComponent implements OnInit {
   series: Series | undefined;
   volumes: Volume[] = [];
 
-  constructor(private route: ActivatedRoute, private seriesService: SeriesService) { }
+  constructor(private route: ActivatedRoute, private seriesService: SeriesService, private ratingConfig: NgbRatingConfig) {
+    ratingConfig.max = 5;
+  }
 
   ngOnInit(): void {
 

src/app/shared/card-item/card-item.component.html

@@ -1,13 +1,7 @@
 <div class="card" style="width: 18rem;">
-    <!-- TODO: I need an anchor around this so you can open in new page easily -->
+    <div class="overlay">
       <img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
-
-    <div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0">
-      
-        <span class="card-title" (click)="handleClick()">
-          {{title}}
-        </span>
-        <div class="pull-right">
+      <div class="overlay-item card-actions">
         <ng-container *ngIf="actions.length > 0">
               <div ngbDropdown container="body" class="d-inline-block">
                 <button class="btn" id="actions-{{title}}" ngbDropdownToggle><i class="fa fa-ellipsis-v" aria-hidden="true"></i></button>
@@ -17,8 +11,10 @@
               </div>
         </ng-container>
       </div>
-      
-        
-        
+    </div>
+    <div class="card-body text-center" *ngIf="title.length > 0 || actions.length > 0">
+        <span class="card-title" (click)="handleClick()">
+          {{title}}
+        </span>
     </div>
 </div>

src/app/shared/card-item/card-item.component.scss

@@ -1,15 +1,52 @@
+$primary-color: #cc7b19;
+
 .card {
     margin: 10px;
     // max-width: 130px;
     // max-height: 195px;
     max-width: 160px;
-    max-height: 320px;
+    //max-height: 320px;
 
     // 370 x 210 roughly
 }
 
 .card-title {
     margin-top: 5px;
+    line-height: 20px;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: normal;
+    max-width: 150px;
+    height: 52px;
+    padding-top: 10px;
+}
+
+.card-img-top {
+    height: 230px;
+}
+
+.overlay {
+    height: 230px;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+        visibility: visible;
+
+        .overlay-item {
+            visibility: visible;
+        }
+    }
+    
+    .overlay-item {
+        visibility: hidden;
+    }
+    
+    z-index: 10;
+}
+
+.card-actions {
+    position: absolute;
+    top: 195px;
+    right: -5px;
 }
 
 .card-body {