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')
- <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')
+@section('left')
@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
\ 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 @@
-<div class="content-wrap {{ $booksViewType === 'list' ? 'thin' : '' }}">
- <h1 class="list-heading px-m">{{ trans('entities.books') }}</h1>
+<div class="content-wrap card {{ $booksViewType === 'list' ? 'thin' : '' }}">
+ <h1 class="list-heading">{{ trans('entities.books') }}</h1>
@if(count($books) > 0)
@if($booksViewType === 'list')
<div class="entity-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 @@
-<form action="{{ baseUrl("/settings/users/{$currentUser->id}/switch-book-view") }}" method="POST" class="inline">
- {!! csrf_field() !!}
- {!! method_field('PATCH') !!}
- <input type="hidden" value="{{ $booksViewType === 'list'? 'grid' : 'list' }}" name="view_type">
- @if ($booksViewType === 'list')
- <button type="submit" class="text-pos text-button">@icon('grid'){{ trans('common.grid_view') }}</button>
- @else
- <button type="submit" class="text-pos text-button">@icon('list'){{ trans('common.list_view') }}</button>
- @endif
-</form>
\ No newline at end of file
+<div>
+ <form action="{{ baseUrl("/settings/users/{$currentUser->id}/switch-book-view") }}" method="POST" class="inline">
+ {!! csrf_field() !!}
+ {!! method_field('PATCH') !!}
+ <input type="hidden" value="{{ $booksViewType === 'list'? 'grid' : 'list' }}" name="view_type">
+ @if ($booksViewType === 'list')
+ <a onclick="this.closest('form').submit()" type="submit" class="icon-list-item">
+ <span class="icon">@icon('grid')</span>
+ <span>{{ trans('common.grid_view') }}</span>
+ </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>
\ 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)
<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',
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 @@
<?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 ?? '' }}
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')
+
+ <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