diff --git a/resources/assets/sass/_forms.scss b/resources/assets/sass/_forms.scss index 6b3ed3815..d955b7efc 100644 --- a/resources/assets/sass/_forms.scss +++ b/resources/assets/sass/_forms.scss @@ -206,11 +206,9 @@ input:checked + .toggle-switch { } .form-group[collapsible] { - margin-left: -$-m; - margin-right: -$-m; padding: 0 $-m; - border-top: 1px solid #DDD; - border-bottom: 1px solid #DDD; + border: 1px solid #DDD; + border-radius: 4px; .collapse-title { margin-left: -$-m; margin-right: -$-m; @@ -238,9 +236,6 @@ input:checked + .toggle-switch { &.open .collapse-title label:before { transform: rotate(90deg); } - &+.form-group[collapsible] { - margin-top: -($-s + 1); - } } .inline-input-style { diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss index e7ca26860..f326b2acf 100644 --- a/resources/assets/sass/_grid.scss +++ b/resources/assets/sass/_grid.scss @@ -50,6 +50,13 @@ body.flexbox { flex: 1; } +.content-wrap.card { + padding: $-l $-xxl; + margin-left: auto; + margin-right: auto; + margin-bottom: $-xl; + overflow: auto; +} .tri-layout-container { display: grid; @@ -68,17 +75,6 @@ body.flexbox { .tri-layout-middle { grid-area: b; } - .content-wrap.card { - padding: $-l $-xxl; - margin-left: auto; - margin-right: auto; - margin-bottom: $-xl; - overflow: auto; - &.thin { - width: 940px; - max-width: 100%; - } - } } @include smaller-than($xxl) { .tri-layout-container { @@ -97,6 +93,7 @@ body.flexbox { position: sticky; top: $-m; max-height: 100vh; + min-height: 50vh; overflow-y: scroll; overflow-x: visible; scrollbar-width: none; @@ -150,7 +147,7 @@ body.flexbox { } .tri-layout-left, .tri-layout-right { - opacity: 0.8; + opacity: 0.7; transition: opacity ease-in-out 120ms; &:hover { opacity: 1; diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 386113f46..d26997c8f 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -271,6 +271,9 @@ ul.pagination { color: $color-page-draft; fill: $color-page-draft; } + > .dropdown-container { + display: block; + } } .entity-list-item, .icon-list-item { diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index 3e6da03f0..8cc7c830f 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -38,11 +38,7 @@ width: 100%; max-width: 840px; margin: 0 auto; - margin-top: $-xxl; overflow-wrap: break-word; - &.flex { - margin-top: $-xl; - } .align-left { text-align: left; } @@ -342,15 +338,10 @@ } } -.comments-container { - width: 100%; - margin-top: $-xl; - margin-bottom: $-m; - h5 { - color: #888; - font-weight: normal; - margin-top: 0.5em; - } +.comments-container h5 { + color: #888; + font-weight: normal; + margin-top: 0.5em; } .comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll { @@ -401,6 +392,8 @@ position: relative; overflow: hidden; padding: $-xs $-m; + color: #666; + fill: currentColor; &:after { content: ''; position: absolute; diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 908a65536..07820c57e 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -26,7 +26,7 @@ $-s: 12px; $-xs: 6px; $-xxs: 3px; -$spacing: (('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl)); +$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl)); // Fonts $text: -apple-system, BlinkMacSystemFont, diff --git a/resources/views/books/create.blade.php b/resources/views/books/create.blade.php index 2d5e6c455..b21fb3012 100644 --- a/resources/views/books/create.blade.php +++ b/resources/views/books/create.blade.php @@ -1,28 +1,24 @@ @extends('simple-layout') -@section('toolbar') - <div class="col-sm-8 faded"> - <div class="breadcrumbs"> - <a href="{{ baseUrl('/books') }}" class="text-button">@icon('book'){{ trans('entities.books') }}</a> - <span class="sep">»</span> - <a href="{{ baseUrl('/create-book') }}" class="text-button">@icon('add'){{ trans('entities.books_create') }}</a> - </div> - </div> -@stop - @section('body') + <div class="container small"> + <div class="breadcrumbs my-l"> + <a href="{{ baseUrl('/books') }}" class=""> + @icon('book'){{ trans('entities.books') }} + </a> + <div class="separator">@icon('chevron-right')</div> + <a href="{{ baseUrl('/create-book') }}" class=""> + @icon('add'){{ trans('entities.books_create') }} + </a> + </div> -<div class="container small"> - <p> </p> - <div class="card"> - <h3>@icon('add') {{ trans('entities.books_create') }}</h3> - <div class="body"> + <div class="content-wrap card"> + <h1 class="list-heading">{{ trans('entities.books_create') }}</h1> <form action="{{ baseUrl("/books") }}" method="POST" enctype="multipart/form-data"> @include('books/form') </form> </div> </div> -</div> -<p class="margin-top large"><br></p> + @include('components.image-manager', ['imageType' => 'cover']) @stop \ No newline at end of file diff --git a/resources/views/books/form.blade.php b/resources/views/books/form.blade.php index bf94b5b07..97ddd9681 100644 --- a/resources/views/books/form.blade.php +++ b/resources/views/books/form.blade.php @@ -41,5 +41,5 @@ <div class="form-group text-right"> <a href="{{ isset($book) ? $book->getUrl() : baseUrl('/books') }}" class="button outline">{{ trans('common.cancel') }}</a> - <button type="submit" class="button pos">{{ trans('entities.books_save') }}</button> + <button type="submit" class="button primary">{{ trans('entities.books_save') }}</button> </div> \ No newline at end of file diff --git a/resources/views/books/grid-item.blade.php b/resources/views/books/grid-item.blade.php index bfb95e33e..fd576e7ed 100644 --- a/resources/views/books/grid-item.blade.php +++ b/resources/views/books/grid-item.blade.php @@ -11,7 +11,8 @@ @endif </div> <div class="grid-card-footer text-muted text-small"> - {{--<span>@include('partials.entity-meta', ['entity' => $book])</span>--}} - {{--TODO - Add in meta details, in list view too--}} + @icon('star')<span title="{{$book->created_at->toDayDateTimeString()}}">{{ trans('entities.meta_created', ['timeLength' => $book->created_at->diffForHumans()]) }}</span> + <br> + @icon('edit')<span title="{{ $book->updated_at->toDayDateTimeString() }}">{{ trans('entities.meta_updated', ['timeLength' => $book->updated_at->diffForHumans()]) }}</span> </div> </a> \ No newline at end of file diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php index 59be7e362..fcf9cb4bb 100644 --- a/resources/views/books/index.blade.php +++ b/resources/views/books/index.blade.php @@ -1,5 +1,7 @@ @extends('tri-layout') +@section('container-classes', 'mt-xl') + @section('left') @if($recents) <div id="recents" class="mb-xl"> diff --git a/resources/views/books/list-item.blade.php b/resources/views/books/list-item.blade.php index 05d7e90ef..966f67b22 100644 --- a/resources/views/books/list-item.blade.php +++ b/resources/views/books/list-item.blade.php @@ -1,10 +1,10 @@ -<div class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}"> - <h4 class="text-book"><a class="text-book entity-list-item-link" href="{{$book->getUrl()}}">@icon('book')<span class="entity-list-item-name break-text">{{$book->name}}</span></a></h4> - <div class="entity-item-snippet"> - @if(isset($book->searchSnippet)) - <p class="text-muted break-text">{!! $book->searchSnippet !!}</p> - @else - <p class="text-muted break-text">{{ $book->getExcerpt() }}</p> - @endif +<a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}"> + <div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')"> </div> -</div> \ No newline at end of file + <div class="content"> + <h4 class="entity-list-item-name break-text">{{ $book->name }}</h4> + <div class="entity-item-snippet"> + <p class="text-muted break-text mb-s">{{ $book->getExcerpt() }}</p> + </div> + </div> +</a> \ No newline at end of file diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php index 2155cd5c8..5e077727b 100644 --- a/resources/views/books/list.blade.php +++ b/resources/views/books/list.blade.php @@ -1,5 +1,5 @@ -<div class="content-wrap card {{ $view === 'list' ? 'thin' : '' }}"> +<div class="content-wrap card"> <div class="grid halves v-center"> <h1 class="list-heading">{{ trans('entities.books') }}</h1> <div class="text-right"> @@ -12,18 +12,8 @@ @if($view === 'list') <div class="entity-list"> @foreach($books as $book) - <a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}"> - <div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')"> - </div> - <div class="content"> - <h4 class="entity-list-item-name break-text">{{ $book->name }}</h4> - <div class="entity-item-snippet"> - <p class="text-muted break-text">{{ $book->getExcerpt() }}</p> - </div> - </div> - </a> + @include('books.list-item', ['book' => $book]) @endforeach - {!! $books->render() !!} </div> @else <div class="grid third"> @@ -31,10 +21,10 @@ @include('books.grid-item', ['book' => $book]) @endforeach </div> - <div> - {!! $books->render() !!} - </div> @endif + <div> + {!! $books->render() !!} + </div> @else <p class="text-muted">{{ trans('entities.books_empty') }}</p> @if(userCan('books-create-all')) diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php index d47bb660d..282ae21d2 100644 --- a/resources/views/pages/show.blade.php +++ b/resources/views/pages/show.blade.php @@ -1,46 +1,7 @@ -@extends('sidebar-layout') +@extends('tri-layout') +@section('container-classes', 'mt-xl') -@section('toolbar') - <div class="grid halves"> - <div> - @include('pages._breadcrumbs', ['page' => $page]) - </div> - <div class="action-buttons"> - <span dropdown class="dropdown-container"> - <div dropdown-toggle class="text-button text-primary">@icon('export'){{ trans('entities.export') }}</div> - <ul class="wide"> - <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li> - <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li> - <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li> - </ul> - </span> - @if(userCan('page-update', $page)) - <a href="{{ $page->getUrl('/edit') }}" class="text-primary text-button" >@icon('edit'){{ trans('common.edit') }}</a> - @endif - @if(userCan('page-update', $page) || userCan('restrictions-manage', $page) || userCan('page-delete', $page)) - <div dropdown class="dropdown-container"> - <a dropdown-toggle class="text-primary text-button">@icon('more') {{ trans('common.more') }}</a> - <ul> - @if(userCan('page-update', $page)) - <li><a href="{{ $page->getUrl('/copy') }}" class="text-primary" >@icon('copy'){{ trans('common.copy') }}</a></li> - <li><a href="{{ $page->getUrl('/move') }}" class="text-primary" >@icon('folder'){{ trans('common.move') }}</a></li> - <li><a href="{{ $page->getUrl('/revisions') }}" class="text-primary">@icon('history'){{ trans('entities.revisions') }}</a></li> - @endif - @if(userCan('restrictions-manage', $page)) - <li><a href="{{ $page->getUrl('/permissions') }}" class="text-primary">@icon('lock'){{ trans('entities.permissions') }}</a></li> - @endif - @if(userCan('page-delete', $page)) - <li><a href="{{ $page->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('common.delete') }}</a></li> - @endif - </ul> - </div> - @endif - - </div> - </div> -@stop - -@section('sidebar') +@section('left') @if($page->tags->count() > 0) <section> @@ -49,8 +10,8 @@ @endif @if ($page->attachments->count() > 0) - <div id="page-attachments" class="card mb-m"> - <h3>@icon('attach') {{ trans('entities.pages_attachments') }}</h3> + <div id="page-attachments" class="mb-xl"> + <h5>{{ trans('entities.pages_attachments') }}</h5> <div class="body"> @foreach($page->attachments as $attachment) <div class="attachment"> @@ -62,8 +23,8 @@ @endif @if (isset($pageNav) && count($pageNav)) - <div id="page-navigation" class="card mb-m"> - <h3>@icon('open-book') {{ trans('entities.pages_navigation') }}</h3> + <div id="page-navigation" class="mb-xl"> + <h5>{{ trans('entities.pages_navigation') }}</h5> <div class="body"> <div class="sidebar-page-nav menu"> @foreach($pageNav as $navItem) @@ -76,8 +37,8 @@ </div> @endif - <div id="page-details" class="card entity-details mb-m"> - <h3>@icon('info') {{ trans('common.details') }}</h3> + <div id="page-details" class="entity-details mb-xl"> + <h5>{{ trans('common.details') }}</h5> <div class="body text-muted text-small blended-links"> @include('partials.entity-meta', ['entity' => $page]) @@ -114,14 +75,15 @@ </div> @include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree]) - @stop -@section('body-wrap-classes', 'flex-fill columns') - @section('body') - <div class="content-wrap thin"> + <div class="mb-m"> + @include('pages._breadcrumbs', ['page' => $page]) + </div> + + <div class="content-wrap card"> <div class="page-content flex" page-display="{{ $page->id }}"> <div class="pointer-container" id="pointer"> @@ -138,13 +100,68 @@ </div> </div> - @include('pages/page-display') + @include('pages.page-display') </div> </div> @if ($commentsEnabled) - <div class="container small nopad comments-container"> - @include('comments/comments', ['page' => $page]) + <div class="container small nopad comments-container mb-l"> + @include('comments.comments', ['page' => $page]) + <div class="clearfix"></div> </div> @endif @stop + +@section('right') + <div class="actions mb-xl"> + <h5>Actions</h5> + + <div class="icon-list text-primary"> + {{--Export--}} + <div dropdown class="dropdown-container block"> + <div dropdown-toggle class="icon-list-item"> + <span class="icon">@icon('export')</span> + <span>{{ trans('entities.export') }}</span> + </div> + <ul class="wide"> + <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li> + <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li> + <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li> + </ul> + </div> + + {{--User Actions--}} + @if(userCan('page-update', $page)) + <a href="{{ $page->getUrl('/edit') }}" class="icon-list-item"> + <span class="icon">@icon('edit')</span> + <span>{{ trans('common.edit') }}</span> + </a> + <a href="{{ $page->getUrl('/copy') }}" class="icon-list-item"> + <span class="icon">@icon('copy')</span> + <span>{{ trans('common.copy') }}</span> + </a> + <a href="{{ $page->getUrl('/move') }}" class="icon-list-item"> + <span class="icon">@icon('folder')</span> + <span>{{ trans('common.move') }}</span> + </a> + <a href="{{ $page->getUrl('/revisions') }}" class="icon-list-item"> + <span class="icon">@icon('history')</span> + <span>{{ trans('entities.revisions') }}</span> + </a> + @endif + @if(userCan('restrictions-manage', $page)) + <a href="{{ $page->getUrl('/permissions') }}" class="icon-list-item"> + <span class="icon">@icon('lock')</span> + <span>{{ trans('entities.permissions') }}</span> + </a> + @endif + @if(userCan('page-delete', $page)) + <a href="{{ $page->getUrl('/delete') }}" class="icon-list-item"> + <span class="icon">@icon('delete')</span> + <span>{{ trans('common.delete') }}</span> + </a> + @endif + </div> + + </div> +@stop diff --git a/resources/views/partials/book-tree.blade.php b/resources/views/partials/book-tree.blade.php index 29e313fb4..360162b2f 100644 --- a/resources/views/partials/book-tree.blade.php +++ b/resources/views/partials/book-tree.blade.php @@ -1,11 +1,12 @@ -<div id="book-tree" class="card book-tree mb-m" v-pre> +<div id="book-tree" class="book-tree mb-xl" v-pre> + <h5>{{ trans('entities.books_navigation') }}</h5> @if (userCan('view', $book)) - @include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')]) - @else - <h3>@icon('book') {{ trans('entities.books_navigation') }}</h3> + <div class="entity-list"> + @include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')]) + </div> @endif - <ul class="sidebar-page-list menu"> + <ul class="sidebar-page-list menu entity-list"> @foreach($sidebarTree as $bookChild) <li class="list-item-{{ $bookChild->getClassName() }} {{ $bookChild->getClassName() }} {{ $bookChild->isA('page') && $bookChild->draft ? 'draft' : '' }}"> diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php index e008130da..cda9e5047 100644 --- a/resources/views/partials/breadcrumbs.blade.php +++ b/resources/views/partials/breadcrumbs.blade.php @@ -1,18 +1,18 @@ -<div class="breadcrumbs"> +<div class="breadcrumbs text-center"> @if (isset($book) && userCan('view', $book)) - <a href="{{ $book->getUrl() }}" class="entity-chip text-book"> + <a href="{{ $book->getUrl() }}" class="text-book"> @icon('book'){{ $book->getShortName() }} </a> <div class="separator">@icon('chevron-right')</div> @endif @if(isset($chapter) && userCan('view', $chapter)) - <a href="{{ $chapter->getUrl() }}" class="entity-chip text-chapter"> + <a href="{{ $chapter->getUrl() }}" class="text-chapter"> @icon('chapter'){{ $chapter->getShortName() }} </a> <div class="separator">@icon('chevron-right')</div> @endif @if(isset($page) && userCan('view', $page)) - <a href="{{ $page->getUrl() }}" class="entity-chip text-page"> + <a href="{{ $page->getUrl() }}" class="text-page"> @icon('page'){{ $page->getShortName() }} </a> @endif diff --git a/resources/views/simple-layout.blade.php b/resources/views/simple-layout.blade.php index b87cd37db..27ba07965 100644 --- a/resources/views/simple-layout.blade.php +++ b/resources/views/simple-layout.blade.php @@ -8,7 +8,6 @@ @yield('toolbar') </div> - <div class="flex-fill flex"> <div class="content flex"> <div class="scroll-body"> diff --git a/resources/views/tri-layout.blade.php b/resources/views/tri-layout.blade.php index 33ba6f616..9ae65b037 100644 --- a/resources/views/tri-layout.blade.php +++ b/resources/views/tri-layout.blade.php @@ -4,11 +4,11 @@ @section('content') - <div class="toolbar px-xl py-m"> + <div class="toolbar px-xl"> @yield('toolbar') </div> - <div class="tri-layout-container" tri-layout @yield('container-attrs') > + <div class="tri-layout-container @yield('container-classes')" tri-layout @yield('container-attrs') > <div class="tri-layout-left print-hidden " id="sidebar"> <div class="tri-layout-left-contents">