From ff0b9004bc5457ae76311a9e32439923fd0a2ee0 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 9 Dec 2018 14:04:28 +0000
Subject: [PATCH] Cleaned existing grid view up a little

---
 resources/assets/sass/_grid.scss          | 21 ++++++++++-----------
 resources/assets/sass/_lists.scss         |  9 ++++-----
 resources/views/books/grid-item.blade.php | 19 +++++++++----------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 9411db17b..e7ca26860 100644
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -204,18 +204,22 @@ div[class^="col-"] img {
   display: flex;
   flex-direction: column;
   border: 1px solid #ddd;
+  margin-bottom: $-l;
+  border-radius: 4px;
+  overflow: hidden;
   min-width: 100px;
+  color: $text-dark;
+  transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
+  &:hover {
+    color: $text-dark;
+    text-decoration: none;
+    box-shadow: $bs-card;
+  }
   h2 {
     width: 100%;
     font-size: 1.5em;
     margin: 0 0 10px;
   }
-  h2 a {
-    display: block;
-    width: 100%;
-    line-height: 1.2;
-    text-decoration: none;
-  }
   p {
     font-size: .85em;
     margin: 0;
@@ -234,11 +238,6 @@ div[class^="col-"] img {
   }
 }
 
-.book-grid-item .grid-card-content h2 a  {
-    color: $color-book;
-    fill: $color-book;
-}
-
 .bookshelf-grid-item .grid-card-content h2 a  {
   color: $color-bookshelf;
   fill: $color-bookshelf;
diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index 8a0db05c2..386113f46 100644
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -404,7 +404,6 @@ ul.pagination {
 .featured-image-container {
   position: relative;
   overflow: hidden;
-  background: #F2F2F2;
   a {
     display: block;
   }
@@ -415,10 +414,10 @@ ul.pagination {
     height: auto;
     transition: all .5s ease-in-out;
   }
-  img:hover {
-    transform: scale(1.15);
-    opacity: .5;
-  }
+}
+.grid-card:hover .featured-image-container img {
+  transform: scale(1.15);
+  opacity: .5;
 }
 
 .action-link-list {
diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
index 9bbf69100..bfb95e33e 100644
--- a/resources/views/books/grid-item.blade.php
+++ b/resources/views/books/grid-item.blade.php
@@ -1,18 +1,17 @@
-<div class="book-grid-item grid-card"  data-entity-type="book" data-entity-id="{{$book->id}}">
-    <div class="featured-image-container">
-        <a href="{{$book->getUrl()}}" title="{{$book->name}}">
-            <img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
-        </a>
+<a href="{{$book->getUrl()}}" class="grid-card"  data-entity-type="book" data-entity-id="{{$book->id}}">
+    <div class="featured-image-container bg-book">
+        <img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
     </div>
     <div class="grid-card-content">
-        <h2><a class="break-text" href="{{$book->getUrl()}}" title="{{$book->name}}">{{$book->getShortName(35)}}</a></h2>
+        <h2>{{$book->getShortName(35)}}</h2>
         @if(isset($book->searchSnippet))
-            <p >{!! $book->searchSnippet !!}</p>
+            <p class="text-muted">{!! $book->searchSnippet !!}</p>
         @else
-            <p >{{ $book->getExcerpt(130) }}</p>
+            <p class="text-muted">{{ $book->getExcerpt(130) }}</p>
         @endif
     </div>
     <div class="grid-card-footer text-muted text-small">
-        <span>@include('partials.entity-meta', ['entity' => $book])</span>
+        {{--<span>@include('partials.entity-meta', ['entity' => $book])</span>--}}
+        {{--TODO - Add in meta details, in list view too--}}
     </div>
-</div>
\ No newline at end of file
+</a>
\ No newline at end of file