mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
Updated books listing to three column layout design
This commit is contained in:
Dan Brown
parent
aabd4c0412
commit
2a882a43ff
@ -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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
@ -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',
|
||||
|
||||
@ -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 ?? '' }}
|
||||
|
||||
31
resources/views/tri-layout.blade.php
Normal file
31
resources/views/tri-layout.blade.php
Normal file
@ -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
|
||||
Loading…
Reference in New Issue
Block a user