mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-04 16:20:26 +00:00
Made shelf listing more unique & efficient
- Now includes listing of all books within.
This commit is contained in:
parent
e9be2b7174
commit
f1e571a57c
9 changed files with 75 additions and 13 deletions
app
resources
assets/sass
views
|
@ -38,7 +38,7 @@ class Book extends Entity
|
||||||
*/
|
*/
|
||||||
public function getBookCover($width = 440, $height = 250)
|
public function getBookCover($width = 440, $height = 250)
|
||||||
{
|
{
|
||||||
$default = baseUrl('/book_default_cover.png');
|
$default = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
|
||||||
if (!$this->image_id) {
|
if (!$this->image_id) {
|
||||||
return $default;
|
return $default;
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,7 +51,7 @@ class Bookshelf extends Entity
|
||||||
public function getBookCover($width = 440, $height = 250)
|
public function getBookCover($width = 440, $height = 250)
|
||||||
{
|
{
|
||||||
// TODO - Make generic, focused on books right now, Perhaps set-up a better image
|
// 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) {
|
if (!$this->image_id) {
|
||||||
return $default;
|
return $default;
|
||||||
}
|
}
|
||||||
|
|
|
@ -182,15 +182,26 @@ class EntityRepo
|
||||||
* @param int $count
|
* @param int $count
|
||||||
* @param string $sort
|
* @param string $sort
|
||||||
* @param string $order
|
* @param string $order
|
||||||
|
* @param null|callable $queryAddition
|
||||||
* @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
|
* @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->entityQuery($type);
|
||||||
$query = $this->addSortToQuery($query, $sort, $order);
|
$query = $this->addSortToQuery($query, $sort, $order);
|
||||||
|
if ($queryAddition) {
|
||||||
|
$queryAddition($query);
|
||||||
|
}
|
||||||
return $query->paginate($count);
|
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')
|
protected function addSortToQuery(Builder $query, string $sort = 'name', string $order = 'asc')
|
||||||
{
|
{
|
||||||
$order = ($order === 'asc') ? 'asc' : 'desc';
|
$order = ($order === 'asc') ? 'asc' : 'desc';
|
||||||
|
|
|
@ -47,7 +47,9 @@ class BookshelfController extends Controller
|
||||||
'updated_at' => trans('common.sort_updated_at'),
|
'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;
|
$recents = $this->signedIn ? $this->entityRepo->getRecentlyViewed('bookshelf', 4, 0) : false;
|
||||||
$popular = $this->entityRepo->getPopular('bookshelf', 4, 0);
|
$popular = $this->entityRepo->getPopular('bookshelf', 4, 0);
|
||||||
$new = $this->entityRepo->getRecentlyCreated('bookshelf', 4, 0);
|
$new = $this->entityRepo->getRecentlyCreated('bookshelf', 4, 0);
|
||||||
|
|
|
@ -307,14 +307,43 @@ ul.pagination {
|
||||||
background-color: #EEEEEE;
|
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 {
|
.entity-list-item-image {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
|
flex: none;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: 50% 50%;
|
background-position: 50% 50%;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-right: $-l;
|
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) {
|
@include smaller-than($m) {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -389,20 +389,25 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
border-radius: 2em;
|
border-radius: 3px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: $-xs $-m;
|
padding: $-xs $-s;
|
||||||
color: #666;
|
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
|
opacity: 0.85;
|
||||||
|
transition: opacity ease-in-out 120ms;
|
||||||
&:after {
|
&:after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: currentColor;
|
background-color: currentColor;
|
||||||
opacity: 0.2;
|
opacity: 0.15;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
<a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">
|
<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() }}')">
|
<div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')">
|
||||||
|
@icon('book')
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h4 class="entity-list-item-name break-text">{{ $book->name }}</h4>
|
<h4 class="entity-list-item-name break-text">{{ $book->name }}</h4>
|
||||||
|
|
|
@ -1,10 +1,21 @@
|
||||||
<a href="{{ $shelf->getUrl() }}" class="shelf entity-list-item" data-entity-type="bookshelf" data-entity-id="{{$shelf->id}}">
|
<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>
|
||||||
<div class="content">
|
<div class="content py-xs">
|
||||||
<h4 class="entity-list-item-name break-text">{{ $shelf->name }}</h4>
|
<h4 class="entity-list-item-name break-text">{{ $shelf->name }}</h4>
|
||||||
<div class="entity-item-snippet">
|
<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>
|
||||||
</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>
|
|
@ -12,7 +12,10 @@
|
||||||
@if(count($shelves) > 0)
|
@if(count($shelves) > 0)
|
||||||
@if($view === 'list')
|
@if($view === 'list')
|
||||||
<div class="entity-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])
|
@include('shelves.list-item', ['shelf' => $shelf])
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue