Updated books listing to three column layout design

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 {

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

resources/assets/sass/_pages.scss

@@ -364,8 +364,8 @@
   }
 }
 
-.entity-icon {
+.entity-list-item > .icon, .icon-list-item > .icon {
-  font-size: 1.3em;
+  font-size: 0.8rem;
   width: 1.88em;
   height: 1.88em;
   display: flex;

resources/views/books/index.blade.php

@@ -1,19 +1,6 @@
-@extends('sidebar-layout')
+@extends('tri-layout')
 
-@section('toolbar')
+@section('left')
-    <div class="grid halves">
-        <div class="action-buttons text-left">
-            @include('books.view-toggle', ['booksViewType' => $booksViewType])
-        </div>
-        <div class="action-buttons">
-            @if($currentUser->can('book-create-all'))
-                <a href="{{ baseUrl("/create-book") }}" class="text-pos text-button">@icon('add'){{ trans('entities.books_create') }}</a>
-            @endif
-        </div>
-    </div>
-@stop
-
-@section('sidebar')
     @if($recents)
         <div id="recents" class="mb-xl">
             <h5>{{ trans('entities.recently_viewed') }}</h5>
@@ -42,4 +29,21 @@
 
 @section('body')
     @include('books.list', ['books' => $books, 'bookViewType' => $booksViewType])
+@stop
+
+@section('right')
+
+    <div class="actions mb-xl px-xl">
+        <h5>Actions</h5>
+        <div class="icon-list text-primary">
+            @if($currentUser->can('book-create-all'))
+                <a href="{{ baseUrl("/create-book") }}" class="icon-list-item">
+                    <span class="icon">@icon('add')</span>
+                    <span>{{ trans('entities.books_create') }}</span>
+                </a>
+            @endif
+            @include('books.view-toggle', ['booksViewType' => $booksViewType])
+        </div>
+    </div>
+
 @stop

resources/views/books/list.blade.php

@@ -1,6 +1,6 @@
 
-<div class="content-wrap {{ $booksViewType === 'list' ? 'thin' : '' }}">
+<div class="content-wrap card {{ $booksViewType === 'list' ? 'thin' : '' }}">
-    <h1 class="list-heading px-m">{{ trans('entities.books') }}</h1>
+    <h1 class="list-heading">{{ trans('entities.books') }}</h1>
     @if(count($books) > 0)
         @if($booksViewType === 'list')
             <div class="entity-list">

resources/views/books/view-toggle.blade.php

@@ -1,10 +1,18 @@
-<form action="{{ baseUrl("/settings/users/{$currentUser->id}/switch-book-view") }}" method="POST" class="inline">
+<div>
-    {!! csrf_field() !!}
+    <form action="{{ baseUrl("/settings/users/{$currentUser->id}/switch-book-view") }}" method="POST" class="inline">
-    {!! method_field('PATCH') !!}
+        {!! csrf_field() !!}
-    <input type="hidden" value="{{ $booksViewType === 'list'? 'grid' : 'list' }}" name="view_type">
+        {!! method_field('PATCH') !!}
-    @if ($booksViewType === 'list')
+        <input type="hidden" value="{{ $booksViewType === 'list'? 'grid' : 'list' }}" name="view_type">
-        <button type="submit" class="text-pos text-button">@icon('grid'){{ trans('common.grid_view') }}</button>
+        @if ($booksViewType === 'list')
-    @else
+            <a onclick="this.closest('form').submit()" type="submit" class="icon-list-item">
-        <button type="submit" class="text-pos text-button">@icon('list'){{ trans('common.list_view') }}</button>
+                <span class="icon">@icon('grid')</span>
-    @endif
+                <span>{{ trans('common.grid_view') }}</span>
-</form>
+            </a>
+        @else
+            <a onclick="this.closest('form').submit()" type="submit" class="icon-list-item">
+                <span class="icon">@icon('list')</span>
+                <span>{{ trans('common.list_view') }}</span>
+            </a>
+        @endif
+    </form>
+</div>

resources/views/common/home.blade.php

@@ -12,24 +12,28 @@
             @if(count($draftPages) > 0)
                 <div id="recent-drafts" class="card mb-xl">
                     <h3>{{ trans('entities.my_recent_drafts') }}</h3>
-                    @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
+                    <div class="px-m">
+                        @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
+                    </div>
                 </div>
             @endif
 
             <div id="{{ $signedIn ? 'recently-viewed' : 'recent-books' }}" class="card mb-xl">
                 <h3>{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
-                @include('partials/entity-list', [
+                <div class="px-m">
+                    @include('partials/entity-list', [
                     'entities' => $recents,
                     'style' => 'compact',
                     'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
                     ])
+                </div>
             </div>
         </div>
 
         <div>
             <div id="recent-pages" class="card mb-xl">
                 <h3><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
-                <div id="recently-updated-pages">
+                <div id="recently-updated-pages" class="px-m">
                     @include('partials/entity-list', [
                     'entities' => $recentlyUpdatedPages,
                     'style' => 'compact',

resources/views/partials/entity-list-item-basic.blade.php

@@ -1,6 +1,6 @@
 <?php $type = $entity->getType(); ?>
 <a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
-    <div class="entity-icon text-{{$type}}">@icon($type)</div>
+    <div class="icon text-{{$type}}">@icon($type)</div>
     <div class="content">
             <h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
             {{ $slot ?? '' }}

resources/views/tri-layout.blade.php

@@ -0,0 +1,31 @@
+@extends('base')
+
+@section('body-class', 'tri-layout')
+
+@section('content')
+
+    <div class="toolbar px-xl py-m">
+        @yield('toolbar')
+    </div>
+
+    <div class="flex-fill flex" @yield('container-attrs') >
+
+        <div sidebar class="sidebar flex print-hidden tri-layout-left" id="sidebar">
+            <div class="sidebar-toggle primary-background-light">@icon('caret-right-circle')
+            </div>
+            <div class="scroll-body px-xl">
+                @yield('left')
+            </div>
+        </div>
+
+        <div class="flex @yield('body-wrap-classes')">
+            @yield('body')
+        </div>
+
+        <div class="flex tri-layout-right">
+            @yield('right')
+        </div>
+    </div>
+
+
+@stop