From 2a882a43ffc0a9d94f6936d1d557a7fec65e62d2 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 1 Dec 2018 20:28:17 +0000 Subject: [PATCH] Updated books listing to three column layout design --- resources/assets/sass/_grid.scss | 11 ++++-- resources/assets/sass/_lists.scss | 24 ++++++++++--- resources/assets/sass/_pages.scss | 4 +-- resources/views/books/index.blade.php | 34 +++++++++++-------- resources/views/books/list.blade.php | 4 +-- resources/views/books/view-toggle.blade.php | 28 +++++++++------ resources/views/common/home.blade.php | 10 ++++-- .../partials/entity-list-item-basic.blade.php | 2 +- resources/views/tri-layout.blade.php | 31 +++++++++++++++++ 9 files changed, 108 insertions(+), 40 deletions(-) create mode 100644 resources/views/tri-layout.blade.php diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss index 0d0b38aca..b5b147a32 100644 --- a/resources/assets/sass/_grid.scss +++ b/resources/assets/sass/_grid.scss @@ -64,12 +64,10 @@ body.flexbox { max-width: 100%; } .flex.sidebar + .flex .content-wrap { - background-color: #FFFFFF; padding: $-l $-xxl; - box-shadow: $bs-card; - border-radius: 4px; margin-left: auto; margin-right: auto; + margin-bottom: $-xl; overflow: auto; &.thin { width: 940px; @@ -156,6 +154,13 @@ body.flexbox { } } +.tri-layout-left, .tri-layout-right { + opacity: 0.8; + transition: opacity ease-in-out 120ms; + &:hover { + opacity: 1; + } +} /** Rules for all columns */ div[class^="col-"] img { diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index ef3c59f4d..74d32e143 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -251,7 +251,8 @@ ul.pagination { margin: 0; } -.entity-list { +.entity-list, .icon-list { + margin: 0 (-$-m); h4 { margin: 0; } @@ -272,7 +273,7 @@ ul.pagination { } } -.entity-list-item { +.entity-list-item, .icon-list-item { padding: $-s $-m; display: grid; grid-template-columns: min-content 1fr; @@ -287,9 +288,14 @@ ul.pagination { h4 a { color: #666; } + &:hover { + text-decoration: none; + background-color: #DDD; + border-radius: 4px; + } } -a.entity-list-item:hover { - text-decoration: none; + +.card a.entity-list-item:hover { background-color: #F2F2F2; } @@ -409,3 +415,13 @@ a.entity-list-item:hover { } } +.action-link-list { + //padding: $-s 0; +} +.action-link { + background: transparent; + border: none; + color: currentColor; + padding: $-m 0; +} + diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index 3dfdce8a2..3e6da03f0 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -364,8 +364,8 @@ } } -.entity-icon { - font-size: 1.3em; +.entity-list-item > .icon, .icon-list-item > .icon { + font-size: 0.8rem; width: 1.88em; height: 1.88em; display: flex; diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php index bed51e7fd..b1998da3b 100644 --- a/resources/views/books/index.blade.php +++ b/resources/views/books/index.blade.php @@ -1,19 +1,6 @@ -@extends('sidebar-layout') +@extends('tri-layout') -@section('toolbar') -
-
- @include('books.view-toggle', ['booksViewType' => $booksViewType]) -
-
- @if($currentUser->can('book-create-all')) - @icon('add'){{ trans('entities.books_create') }} - @endif -
-
-@stop - -@section('sidebar') +@section('left') @if($recents)
{{ trans('entities.recently_viewed') }}
@@ -42,4 +29,21 @@ @section('body') @include('books.list', ['books' => $books, 'bookViewType' => $booksViewType]) +@stop + +@section('right') + +
+
Actions
+
+ @if($currentUser->can('book-create-all')) + + @icon('add') + {{ trans('entities.books_create') }} + + @endif + @include('books.view-toggle', ['booksViewType' => $booksViewType]) +
+
+ @stop \ No newline at end of file diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php index 4b7280cf1..8e2d5c93d 100644 --- a/resources/views/books/list.blade.php +++ b/resources/views/books/list.blade.php @@ -1,6 +1,6 @@ -
-

{{ trans('entities.books') }}

+
+

{{ trans('entities.books') }}

@if(count($books) > 0) @if($booksViewType === 'list')
diff --git a/resources/views/books/view-toggle.blade.php b/resources/views/books/view-toggle.blade.php index 63eb9b9d3..eb1464b02 100644 --- a/resources/views/books/view-toggle.blade.php +++ b/resources/views/books/view-toggle.blade.php @@ -1,10 +1,18 @@ -
id}/switch-book-view") }}" method="POST" class="inline"> - {!! csrf_field() !!} - {!! method_field('PATCH') !!} - - @if ($booksViewType === 'list') - - @else - - @endif -
\ No newline at end of file +
+
id}/switch-book-view") }}" method="POST" class="inline"> + {!! csrf_field() !!} + {!! method_field('PATCH') !!} + + @if ($booksViewType === 'list') + + @icon('grid') + {{ trans('common.grid_view') }} + + @else + + @icon('list') + {{ trans('common.list_view') }} + + @endif +
+
\ No newline at end of file diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php index 72db5f6d2..89583e97a 100644 --- a/resources/views/common/home.blade.php +++ b/resources/views/common/home.blade.php @@ -12,24 +12,28 @@ @if(count($draftPages) > 0)

{{ trans('entities.my_recent_drafts') }}

- @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact']) +
+ @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact']) +
@endif

{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}

- @include('partials/entity-list', [ +
+ @include('partials/entity-list', [ 'entities' => $recents, 'style' => 'compact', 'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty') ]) +

{{ trans('entities.recently_updated_pages') }}

-
+
@include('partials/entity-list', [ 'entities' => $recentlyUpdatedPages, 'style' => 'compact', diff --git a/resources/views/partials/entity-list-item-basic.blade.php b/resources/views/partials/entity-list-item-basic.blade.php index 020522e23..0f80d7d46 100644 --- a/resources/views/partials/entity-list-item-basic.blade.php +++ b/resources/views/partials/entity-list-item-basic.blade.php @@ -1,6 +1,6 @@ getType(); ?> -
@icon($type)
+
@icon($type)

{{ $entity->name }}

{{ $slot ?? '' }} diff --git a/resources/views/tri-layout.blade.php b/resources/views/tri-layout.blade.php new file mode 100644 index 000000000..a43450ed4 --- /dev/null +++ b/resources/views/tri-layout.blade.php @@ -0,0 +1,31 @@ +@extends('base') + +@section('body-class', 'tri-layout') + +@section('content') + +
+ @yield('toolbar') +
+ +
+ + + +
+ @yield('body') +
+ +
+ @yield('right') +
+
+ + +@stop