Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-07 20:02:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rolled tri-layout to page edit and book-create

Browse Source
This commit is contained in:
Dan Brown 2018-12-09 16:51:31 +00:00
parent ff0b9004bc
commit 7f95b51b00
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
16 changed files with 138 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/assets/sass/_forms.scss
View File

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

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

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

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

@ -271,6 +271,9 @@ ul.pagination {
color: $color-page-draft;
fill: $color-page-draft;
}
> .dropdown-container {
display: block;
}
}
.entity-list-item, .icon-list-item {

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

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

2
resources/assets/sass/_variables.scss
View File

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

30
resources/views/books/create.blade.php
View File

@ -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">&raquo;</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>&nbsp;</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

2
resources/views/books/form.blade.php
View File

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

5
resources/views/books/grid-item.blade.php
View File

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

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

@ -1,5 +1,7 @@
@extends('tri-layout')
@section('container-classes', 'mt-xl')
@section('left')
@if($recents)
<div id="recents" class="mb-xl">

18
resources/views/books/list-item.blade.php
View File

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

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

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

127
resources/views/pages/show.blade.php
View File

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

11
resources/views/partials/book-tree.blade.php
View File

@ -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' : '' }}">

8
resources/views/partials/breadcrumbs.blade.php
View File

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

1
resources/views/simple-layout.blade.php
View File

@ -8,7 +8,6 @@
@yield('toolbar')
</div>
<div class="flex-fill flex">
<div class="content flex">
<div class="scroll-body">

4
resources/views/tri-layout.blade.php
View File

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