Made shelf listing more unique & efficient

- Now includes listing of all books within.
This commit is contained in:
Dan Brown 2019-02-16 17:13:01 +00:00
parent e9be2b7174
commit f1e571a57c
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
9 changed files with 75 additions and 13 deletions

View File

@ -38,7 +38,7 @@ class Book extends Entity
*/
public function getBookCover($width = 440, $height = 250)
{
$default = baseUrl('/book_default_cover.png');
$default = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
if (!$this->image_id) {
return $default;
}

View File

@ -51,7 +51,7 @@ class Bookshelf extends Entity
public function getBookCover($width = 440, $height = 250)
{
// TODO - Make generic, focused on books right now, Perhaps set-up a better image
$default = baseUrl('/book_default_cover.png');
$default = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
if (!$this->image_id) {
return $default;
}

View File

@ -182,15 +182,26 @@ class EntityRepo
* @param int $count
* @param string $sort
* @param string $order
* @param null|callable $queryAddition
* @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
*/
public function getAllPaginated($type, int $count = 10, string $sort = 'name', string $order = 'asc')
public function getAllPaginated($type, int $count = 10, string $sort = 'name', string $order = 'asc', $queryAddition = null)
{
$query = $this->entityQuery($type);
$query = $this->addSortToQuery($query, $sort, $order);
if ($queryAddition) {
$queryAddition($query);
}
return $query->paginate($count);
}
/**
* Add sorting operations to an entity query.
* @param Builder $query
* @param string $sort
* @param string $order
* @return Builder
*/
protected function addSortToQuery(Builder $query, string $sort = 'name', string $order = 'asc')
{
$order = ($order === 'asc') ? 'asc' : 'desc';

View File

@ -47,7 +47,9 @@ class BookshelfController extends Controller
'updated_at' => trans('common.sort_updated_at'),
];
$shelves = $this->entityRepo->getAllPaginated('bookshelf', 18, $sort, $order);
$shelves = $this->entityRepo->getAllPaginated('bookshelf', 18, $sort, $order, function($query) {
$query->with(['books']);
});
$recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('bookshelf', 4, 0) : false;
$popular = $this->entityRepo->getPopular('bookshelf', 4, 0);
$new = $this->entityRepo->getRecentlyCreated('bookshelf', 4, 0);

View File

@ -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;
}

View File

@ -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;
}
}

View File

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

View File

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

View File

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