Aligned book and shelf grid item views

Updated the titles so they are limited via CSS rather than by a
estimated hardcoded limit.

For #1469

diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index e01ecebc949c2e7154ae4186d13d3171b67bcd79..c51f0165922b3c274e200fa79585a2ca246dc158 100644 (file)
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -92,6 +92,6 @@
 .bg-chapter {
   background-color: var(--color-chapter);
 }
-.bg-shelf {
+.bg-bookshelf {
   background-color: var(--color-bookshelf);
 }

diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 4ada3472592e4089c30c4c1ddb3e3fec5ad39985..4322cb5a606da731f00a692ed97f1c8ee325a723 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -352,12 +352,21 @@ li > ol, li > ul {
   overflow-wrap: break-word;
 }
 
-.limit-text {
+.text-limit-lines-1 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.text-limit-lines-2 {
+  // -webkit use here is actually standardised cross-browser:
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
 /**
  * Grouping
  */

diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php
deleted file mode 100644 (file)
index e1d3775..0000000
--- a/resources/views/books/grid-item.blade.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<a href="{{$book->getUrl()}}" class="grid-card"  data-entity-type="book" data-entity-id="{{$book->id}}">
-    <div class="bg-book featured-image-container-wrap">
-        <div class="featured-image-container" @if($book->cover) style="background-image: url('{{ $book->getBookCover() }}')"@endif>
-        </div>
-        @icon('book')
-    </div>
-    <div class="grid-card-content">
-        <h2>{{$book->getShortName(35)}}</h2>
-        @if(isset($book->searchSnippet))
-            <p class="text-muted">{!! $book->searchSnippet !!}</p>
-        @else
-            <p class="text-muted">{{ $book->getExcerpt(130) }}</p>
-        @endif
-    </div>
-    <div class="grid-card-footer text-muted ">
-        <p>@icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span></p>
-        <p>@icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span></p>
-    </div>
-</a>
\ No newline at end of file

diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php
index 42a2757f94e0e949d536791f6dd79f4daa5ea38a..52cd935d1182a7babb4b2926e56f8586ecf08cf8 100644 (file)
--- a/resources/views/books/list.blade.php
+++ b/resources/views/books/list.blade.php
@@ -1,4 +1,3 @@
-
 <main class="content-wrap mt-m card">
     <div class="grid half v-center no-row-gap">
         <h1 class="list-heading">{{ trans('entities.books') }}</h1>
@@ -22,7 +21,7 @@
         @else
              <div class="grid third">
                 @foreach($books as $key => $book)
-                    @include('books.grid-item', ['book' => $book])
+                    @include('partials.entity-grid-item', ['entity' => $book])
                 @endforeach
              </div>
         @endif

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 48c88434e00bafd25cff7befb7e39e95f0f475e1..13125464a7114396012f3685fa56e38ae23b81b9 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -49,7 +49,7 @@
                 <div class="sidebar-page-nav menu">
                     @foreach($pageNav as $navItem)
                         <li class="page-nav-item h{{ $navItem['level'] }}">
-                            <a href="{{ $navItem['link'] }}" class="limit-text block">{{ $navItem['text'] }}</a>
+                            <a href="{{ $navItem['link'] }}" class="text-limit-lines-1 block">{{ $navItem['text'] }}</a>
                             <div class="primary-background sidebar-page-nav-bullet"></div>
                         </li>
                     @endforeach

diff --git a/resources/views/partials/entity-grid-item.blade.php b/resources/views/partials/entity-grid-item.blade.php
new file mode 100644 (file)
index 0000000..ee31b53
--- /dev/null
+++ b/resources/views/partials/entity-grid-item.blade.php
@@ -0,0 +1,16 @@
+<a href="{{ $entity->getUrl() }}" class="grid-card"
+   data-entity-type="{{ $entity->getType() }}" data-entity-id="{{ $entity->id }}">
+    <div class="bg-{{ $entity->getType() }} featured-image-container-wrap">
+        <div class="featured-image-container" @if($entity->cover) style="background-image: url('{{ $entity->getBookCover() }}')"@endif>
+        </div>
+        @icon($entity->getType())
+    </div>
+    <div class="grid-card-content">
+        <h2 class="text-limit-lines-2">{{ $entity->name }}</h2>
+        <p class="text-muted">{{ $entity->getExcerpt(130) }}</p>
+    </div>
+    <div class="grid-card-footer text-muted ">
+        <p>@icon('star')<span title="{{ $entity->created_at->toDayDateTimeString() }}">{{ trans('entities.meta_created', ['timeLength' => $entity->created_at->diffForHumans()]) }}</span></p>
+        <p>@icon('edit')<span title="{{ $entity->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $entity->updated_at->diffForHumans()]) }}</span></p>
+    </div>
+</a>
\ No newline at end of file

diff --git a/resources/views/shelves/grid-item.blade.php b/resources/views/shelves/grid-item.blade.php
deleted file mode 100644 (file)
index 25b35b9..0000000
--- a/resources/views/shelves/grid-item.blade.php
+++ /dev/null
@@ -1,21 +0,0 @@
-<a href="{{$shelf->getUrl()}}" class="bookshelf-grid-item grid-card"
-   data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
-    <div class="bg-shelf featured-image-container-wrap">
-        <div class="featured-image-container" @if($shelf->cover) style="background-image: url('{{ $shelf->getBookCover() }}')"@endif>
-        </div>
-        @icon('bookshelf')
-    </div>
-    <div class="grid-card-content">
-        <h2>{{$shelf->getShortName(35)}}</h2>
-        @if(isset($shelf->searchSnippet))
-            <p class="text-muted">{!! $shelf->searchSnippet !!}</p>
-        @else
-            <p class="text-muted">{{ $shelf->getExcerpt(130) }}</p>
-        @endif
-    </div>
-    <div class="grid-card-footer text-muted text-small">
-        @icon('star')<span title="{{$shelf->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $shelf->created_at->diffForHumans()]) }}</span>
-        <br>
-        @icon('edit')<span title="{{ $shelf->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $shelf->updated_at->diffForHumans()]) }}</span>
-    </div>
-</a>
\ No newline at end of file

diff --git a/resources/views/shelves/list-item.blade.php b/resources/views/shelves/list-item.blade.php
index 6e5ed29a5fa41ef09156e58456b842e77b4039de..00cacfa707c3c28f927695e7cf7fc71c3f629ba1 100644 (file)
--- a/resources/views/shelves/list-item.blade.php
+++ b/resources/views/shelves/list-item.blade.php
@@ -1,5 +1,5 @@
 <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 @if($shelf->image_id) has-image @endif" style="background-image: url('{{ $shelf->getBookCover() }}')">
+    <div class="entity-list-item-image bg-bookshelf @if($shelf->image_id) has-image @endif" style="background-image: url('{{ $shelf->getBookCover() }}')">
         @icon('bookshelf')
     </div>
     <div class="content py-xs">

diff --git a/resources/views/shelves/list.blade.php b/resources/views/shelves/list.blade.php
index b20b08a2c59e40f8a110394404f63ac198c91f8f..3600a8c795f70303dc464eb73b6fe503ec1bef90 100644 (file)
--- a/resources/views/shelves/list.blade.php
+++ b/resources/views/shelves/list.blade.php
@@ -21,7 +21,7 @@
         @else
             <div class="grid third">
                 @foreach($shelves as $key => $shelf)
-                    @include('shelves.grid-item', ['shelf' => $shelf])
+                    @include('partials.entity-grid-item', ['entity' => $shelf])
                 @endforeach
             </div>
         @endif

diff --git a/resources/views/shelves/show.blade.php b/resources/views/shelves/show.blade.php
index 6fee6f45d522718ac0829dd7b9cf33e4a9b2874d..46432c1b92594372b196fdb35fec9951833fffa9 100644 (file)
--- a/resources/views/shelves/show.blade.php
+++ b/resources/views/shelves/show.blade.php
@@ -22,7 +22,7 @@
                 @else
                     <div class="grid third">
                         @foreach($shelf->visibleBooks as $key => $book)
-                            @include('books.grid-item', ['book' => $book])
+                            @include('partials.entity-grid-item', ['entity' => $book])
                         @endforeach
                     </div>
                 @endif