Made shelf listing more unique & efficient

- Now includes listing of all books within.

resources/assets/sass/_lists.scss

@@ -307,14 +307,43 @@ ul.pagination {
   background-color: #EEEEEE;
 }
 
+.entity-list-item-children {
+  padding: $-m;
+  > div {
+    overflow: hidden;
+    padding: $-xs 0;
+    margin-top: -$-xs;
+  }
+  .entity-chip {
+    text-overflow: ellipsis;
+    height: 2.5em;
+    overflow: hidden;
+    text-align: left;
+    display: block;
+    white-space: nowrap;
+  }
+}
+
 .entity-list-item-image {
   align-self: stretch;
   width: 140px;
+  flex: none;
   background-size: cover;
   background-position: 50% 50%;
   border-radius: 3px;
   position: relative;
   margin-right: $-l;
+
+  .svg-icon {
+    color: #FFF;
+    fill: #FFF;
+    font-size: 2rem;
+    margin-right: 0;
+    position: absolute;
+    bottom: $-xs;
+    left: $-xs;
+  }
+
   @include smaller-than($m) {
     width: 80px;
   }

resources/assets/sass/_pages.scss

@@ -389,20 +389,25 @@
   justify-content: center;
   text-align: center;
   font-size: 0.9em;
-  border-radius: 2em;
+  border-radius: 3px;
   position: relative;
   overflow: hidden;
-  padding: $-xs $-m;
-  color: #666;
+  padding: $-xs $-s;
   fill: currentColor;
+  opacity: 0.85;
+  transition: opacity ease-in-out 120ms;
   &:after {
     content: '';
     position: absolute;
     background-color: currentColor;
-    opacity: 0.2;
+    opacity: 0.15;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }
+  &:hover {
+    text-decoration: none;
+    opacity: 1;
+  }
 }

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

@@ -1,5 +1,6 @@
 <a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">
     <div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')">
+        @icon('book')
     </div>
     <div class="content">
         <h4 class="entity-list-item-name break-text">{{ $book->name }}</h4>

resources/views/shelves/list-item.blade.php

@@ -1,10 +1,21 @@
 <a href="{{ $shelf->getUrl() }}" class="shelf entity-list-item" data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
-    <div class="entity-list-item-image bg-shelf" style="background-image: url('{{ $shelf->getBookCover() }}')">
+    <div class="entity-list-item-image bg-shelf @if($shelf->image_id) has-image @endif" style="background-image: url('{{ $shelf->getBookCover() }}')">
+        @icon('bookshelf')
     </div>
-    <div class="content">
+    <div class="content py-xs">
         <h4 class="entity-list-item-name break-text">{{ $shelf->name }}</h4>
         <div class="entity-item-snippet">
-            <p class="text-muted break-text mb-s">{{ $shelf->getExcerpt() }}</p>
+            <p class="text-muted break-text mb-none">{{ $shelf->getExcerpt() }}</p>
         </div>
     </div>
-</a>
+</a>
+<div class="entity-shelf-books grid third entity-list-item-children">
+    @foreach($shelf->books as $book)
+        <div>
+            <a href="{{ $book->getUrl() }}" class="entity-chip text-book">
+                @icon('book')
+                {{ $book->name }}
+            </a>
+        </div>
+    @endforeach
+</div>

resources/views/shelves/list.blade.php

@@ -12,7 +12,10 @@
     @if(count($shelves) > 0)
         @if($view === 'list')
             <div class="entity-list">
-                @foreach($shelves as $shelf)
+                @foreach($shelves as $index => $shelf)
+                    @if ($index !== 0)
+                        <hr class="my-m">
+                    @endif
                     @include('shelves.list-item', ['shelf' => $shelf])
                 @endforeach
             </div>