Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 05:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated books listing to three column layout design

Browse Source
This commit is contained in:
Dan Brown 2018-12-01 20:28:17 +00:00
parent aabd4c0412
commit 2a882a43ff
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
9 changed files with 108 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/assets/sass/_grid.scss
View File

@ -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 {

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

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

4
resources/assets/sass/_pages.scss
View File

@ -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;

34
resources/views/books/index.blade.php
View File

@ -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

4
resources/views/books/list.blade.php
View File

@ -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">

28
resources/views/books/view-toggle.blade.php
View File

@ -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>

10
resources/views/common/home.blade.php
View File

@ -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',

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

@ -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
View 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