colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned existing grid view up a little

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; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid #ddd; border: 1px solid #ddd;
margin-bottom: $-l;
border-radius: 4px;
overflow: hidden;
min-width: 100px; 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 { h2 {
width: 100%; width: 100%;
font-size: 1.5em; font-size: 1.5em;
margin: 0 0 10px; margin: 0 0 10px;
} }
h2 a {
display: block;
width: 100%;
line-height: 1.2;
text-decoration: none;
}
p { p {
font-size: .85em; font-size: .85em;
margin: 0; 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 { .bookshelf-grid-item .grid-card-content h2 a {
color: $color-bookshelf; color: $color-bookshelf;
fill: $color-bookshelf; fill: $color-bookshelf;

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

@ -404,7 +404,6 @@ ul.pagination {
.featured-image-container { .featured-image-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #F2F2F2;
a { a {
display: block; display: block;
} }
@ -415,10 +414,10 @@ ul.pagination {
height: auto; height: auto;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
} }
img:hover { }
transform: scale(1.15); .grid-card:hover .featured-image-container img {
opacity: .5; transform: scale(1.15);
} opacity: .5;
} }
.action-link-list { .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}}"> <a href="{{$book->getUrl()}}" class="grid-card" data-entity-type="book" data-entity-id="{{$book->id}}">
<div class="featured-image-container"> <div class="featured-image-container bg-book">
<a href="{{$book->getUrl()}}" title="{{$book->name}}"> <img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
<img src="{{$book->getBookCover()}}" alt="{{$book->name}}">
</a>
</div> </div>
<div class="grid-card-content"> <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)) @if(isset($book->searchSnippet))
<p >{!! $book->searchSnippet !!}</p> <p class="text-muted">{!! $book->searchSnippet !!}</p>
@else @else
<p >{{ $book->getExcerpt(130) }}</p> <p class="text-muted">{{ $book->getExcerpt(130) }}</p>
@endif @endif
</div> </div>
<div class="grid-card-footer text-muted text-small"> <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>
</div> </a>