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">
+        <div class="nav-item">
-        </li> -->
+          <div class="col-xs-4">
+            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          </div>
+        </div>
       </ul>
-      <div class="container-fluid" style="max-width: 400px">
+      
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <!-- TODO: Implement autocomplete for searching -->
-      </div>
 
       <!-- 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 >
@@ -20,6 +19,7 @@
           <button ngbDropdownItem (click)="logout()">Logout</button>
         </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,24 +1,20 @@
 <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}}">
+      <img (click)="handleClick()" class="card-img-top" src="{{isNullOrEmpty(imageUrl) ? placeholderImage : imageUrl}}" alt="{{title}}">
-
+      <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>
+                <div ngbDropdownMenu attr.aria-labelledby="actions-{{title}}">
+                  <button ngbDropdownItem *ngFor="let action of actions" (click)="performAction($event, action)">{{action.title}}</button>
+                </div>
+              </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 class="pull-right">
-          <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>
-                  <div ngbDropdownMenu attr.aria-labelledby="actions-{{title}}">
-                    <button ngbDropdownItem *ngFor="let action of actions" (click)="performAction($event, action)">{{action.title}}</button>
-                  </div>
-                </div>
-          </ng-container>
-        </div>
-      
-        
-        
     </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 {
@@ -18,4 +55,4 @@
 
 .dropdown-toggle:after {
     content: none !important;
-}
+}