Cleaned existing grid view up a little

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 9411db17b36703e9ea7906deeafaa21d89439b49..e7ca268603ead0e048815fd2ffc85ddd58349a33 100644 (file)
--- 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;
   display: flex;
   flex-direction: column;
   border: 1px solid #ddd;

+  margin-bottom: $-l;
+  border-radius: 4px;
+  overflow: hidden;

   min-width: 100px;
   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 {
     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;
   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;
 .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 8a0db05c285efef81ddc54c82ab6a959d3c2d553..386113f4665844211b60716798d8df030bfbf58c 100644 (file)
--- 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;
 .featured-image-container {
   position: relative;
   overflow: hidden;

-  background: #F2F2F2;

   a {
     display: block;
   }
   a {
     display: block;
   }


@@ -415,10 +414,10 @@ ul.pagination {
     height: auto;
     transition: all .5s ease-in-out;
   }
     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 {
 }
 
 .action-link-list {

diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
index 9bbf691006822cdd4935dc6c9f46c3b93c850e5c..bfb95e33ee7e5ec890f920a1fdc8923aa11cbe98 100644 (file)
--- 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">
     </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))
         @if(isset($book->searchSnippet))

-            <p >{!! $book->searchSnippet !!}</p>
+            <p class="text-muted">{!! $book->searchSnippet !!}</p>

         @else
         @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">
         @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>

-</div>
\ No newline at end of file
+</a>
\ No newline at end of file