Updated grid view to use CSS grid and flexbox

Provides a cleaner height-matched design.
Closes #701

app/Http/Controllers/BookController.php

@@ -36,7 +36,7 @@ class BookController extends Controller
      */
     public function index()
     {
-        $books = $this->entityRepo->getAllPaginated('book', 20);
+        $books = $this->entityRepo->getAllPaginated('book', 18);
         $recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('book', 4, 0) : false;
         $popular = $this->entityRepo->getPopular('book', 4, 0);
         $new = $this->entityRepo->getRecentlyCreated('book', 4, 0);

resources/assets/sass/_grid.scss

@@ -175,6 +175,43 @@ div[class^="col-"] img {
   margin-right: -$-m;
 }
 
+.grid {
+  display: grid;
+  grid-column-gap: $-l;
+  grid-row-gap: $-l;
+  &.third {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.grid-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ddd;
+  min-width: 100px;
+  .grid-card-content {
+    flex: 1;
+  }
+  .grid-card-content, .grid-card-footer {
+    padding: $-l;
+  }
+  .grid-card-content + .grid-card-footer {
+    padding-top: 0;
+  }
+}
+
+@include smaller-than($m) {
+  .grid.third {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@include smaller-than($s) {
+  .grid.third {
+    grid-template-columns: 1fr;
+  }
+}
+
 .float {
   float: left;
   &.right {
@@ -195,14 +232,6 @@ div[class^="col-"] img {
   display: inline-block;
 }
 
-@include larger-than(991px) {
-  .row.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
-}
-
-@include smaller-than(992px) {
-  .row.auto-clear .col-xs-6:nth-child(2n+1){clear:left;}
-}
-
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;

resources/assets/sass/_lists.scss

@@ -382,13 +382,15 @@ ul.pagination {
   position: relative;
   overflow: hidden;
   background: #F2F2F2;
-  border: 1px solid #ddd;
-  border-bottom: 0;
+  a {
+    display: block;
+  }
   img {
     display: block;
+    width: 100%;
     max-width: 100%;
     height: auto;
-    transition: all .5s ease;
+    transition: all .5s ease-in-out;
   }
   img:hover {
     transform: scale(1.15);
@@ -396,31 +398,33 @@ ul.pagination {
   }
 }
 
-.book-grid-content {
-  padding: 30px;
-  border: 1px solid #ddd;
+.book-grid-item .grid-card-content {
   border-top: 0;
   border-bottom-width: 2px;
   h2 {
+    width: 100%;
     font-size: 1.5em;
     margin: 0 0 10px;
   }
   h2 a {
     display: block;
+    width: 100%;
     line-height: 1.2;
     color: #009688;;
     text-decoration: none;
+    white-space: pre-wrap; /* css-3 */
+    word-wrap: break-word; /* Internet Explorer 5.5+ */
   }
   p {
     font-size: .85em;
-    margin: 0 0 10px;
+    margin: 0;
     line-height: 1.6em;
   }
-  p.small {
-    font-size: .8em;
-  }
 }
 
-.book-grid-item {
-  margin-bottom : 20px;
+.book-grid-item .grid-card-footer {
+  p.small {
+    font-size: .8em;
+    margin: 0;
+  }
 }

resources/views/books/grid-item.blade.php

@@ -1,18 +1,18 @@
-<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 book-grid-item"  data-entity-type="book" data-entity-id="{{$book->id}}">
+<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 width="1600" height="900" src="{{$book->getBookCover()}}" alt="{{$book->name}}">
+            <img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
         </a>
     </div>
-    <div class="book-grid-content">
-        <h2><a href="{{$book->getUrl()}}" title="{{$book->name}}" > {{$book->getShortName(35)}} </a></h2>
+    <div class="grid-card-content">
+        <h2><a href="{{$book->getUrl()}}" title="{{$book->name}}">{{$book->getShortName(35)}}</a></h2>
         @if(isset($book->searchSnippet))
             <p >{!! $book->searchSnippet !!}</p>
         @else
             <p >{{ $book->getExcerpt(130) }}</p>
         @endif
-        <div >
-            <span>@include('partials.entity-meta', ['entity' => $book])</span>
-        </div>
+    </div>
+    <div class="grid-card-footer">
+        <span>@include('partials.entity-meta', ['entity' => $book])</span>
     </div>
 </div>

resources/views/books/index.blade.php

@@ -66,14 +66,14 @@
                 @endforeach
                 {!! $books->render() !!}
             @else
-             <div class="row auto-clear">
+                 <div class="grid third">
                     @foreach($books as $key => $book)
                             @include('books/grid-item', ['book' => $book])
                     @endforeach
-                <div class="col-xs-12">
+                 </div>
+                <div>
                     {!! $books->render() !!}
                 </div>
-             </div>
             @endif
         @else
             <p class="text-muted">{{ trans('entities.books_empty') }}</p>