Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 05:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleaned existing grid view up a little

Browse Source
This commit is contained in:
Dan Brown 2018-12-09 14:04:28 +00:00
parent 8fd8652bbf
commit ff0b9004bc
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/assets/sass/_grid.scss
View File

@ -204,18 +204,22 @@ div[class^="col-"] img {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
margin-bottom: $-l;
border-radius: 4px;
overflow: hidden;
min-width: 100px;
color: $text-dark;
transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
&:hover {
color: $text-dark;
text-decoration: none;
box-shadow: $bs-card;
}
h2 {
width: 100%;
font-size: 1.5em;
margin: 0 0 10px;
}
h2 a {
display: block;
width: 100%;
line-height: 1.2;
text-decoration: none;
}
p {
font-size: .85em;
margin: 0;
@ -234,11 +238,6 @@ div[class^="col-"] img {
}
}
.book-grid-item .grid-card-content h2 a {
color: $color-book;
fill: $color-book;
}
.bookshelf-grid-item .grid-card-content h2 a {
color: $color-bookshelf;
fill: $color-bookshelf;

9
resources/assets/sass/_lists.scss
View File

@ -404,7 +404,6 @@ ul.pagination {
.featured-image-container {
position: relative;
overflow: hidden;
background: #F2F2F2;
a {
display: block;
}
@ -415,10 +414,10 @@ ul.pagination {
height: auto;
transition: all .5s ease-in-out;
}
img:hover {
transform: scale(1.15);
opacity: .5;
}
}
.grid-card:hover .featured-image-container img {
transform: scale(1.15);
opacity: .5;
}
.action-link-list {

19
resources/views/books/grid-item.blade.php
View File

@ -1,18 +1,17 @@
<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 src="{{$book->getBookCover()}}" alt="{{$book->name}}">
</a>
<a href="{{$book->getUrl()}}" class="grid-card" data-entity-type="book" data-entity-id="{{$book->id}}">
<div class="featured-image-container bg-book">
<img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
</div>
<div class="grid-card-content">
<h2><a class="break-text" href="{{$book->getUrl()}}" title="{{$book->name}}">{{$book->getShortName(35)}}</a></h2>
<h2>{{$book->getShortName(35)}}</h2>
@if(isset($book->searchSnippet))
<p >{!! $book->searchSnippet !!}</p>
<p class="text-muted">{!! $book->searchSnippet !!}</p>
@else
<p >{{ $book->getExcerpt(130) }}</p>
<p class="text-muted">{{ $book->getExcerpt(130) }}</p>
@endif
</div>
<div class="grid-card-footer text-muted text-small">
<span>@include('partials.entity-meta', ['entity' => $book])</span>
{{--<span>@include('partials.entity-meta', ['entity' => $book])</span>--}}
{{--TODO - Add in meta details, in list view too--}}
</div>
</div>
</a>