mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-01-19 08:42:48 +08:00
Rolled tri-layout to page edit and book-create
This commit is contained in:
parent
ff0b9004bc
commit
7f95b51b00
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -271,6 +271,9 @@ ul.pagination {
|
|||
color: $color-page-draft;
|
||||
fill: $color-page-draft;
|
||||
}
|
||||
> .dropdown-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.entity-list-item, .icon-list-item {
|
||||
|
|
|
@ -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,16 +338,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
width: 100%;
|
||||
margin-top: $-xl;
|
||||
margin-bottom: $-m;
|
||||
h5 {
|
||||
.comments-container h5 {
|
||||
color: #888;
|
||||
font-weight: normal;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-editor .CodeMirror, .comment-editor .CodeMirror-scroll {
|
||||
min-height: 175px;
|
||||
|
@ -401,6 +392,8 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: $-xs $-m;
|
||||
color: #666;
|
||||
fill: currentColor;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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">
|
||||
<p> </p>
|
||||
<div class="card">
|
||||
<h3>@icon('add') {{ trans('entities.books_create') }}</h3>
|
||||
<div class="body">
|
||||
<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="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
|
|
@ -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>
|
|
@ -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>
|
|
@ -1,5 +1,7 @@
|
|||
@extends('tri-layout')
|
||||
|
||||
@section('container-classes', 'mt-xl')
|
||||
|
||||
@section('left')
|
||||
@if($recents)
|
||||
<div id="recents" class="mb-xl">
|
||||
|
|
|
@ -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>
|
||||
<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">
|
||||
@if(isset($book->searchSnippet))
|
||||
<p class="text-muted break-text">{!! $book->searchSnippet !!}</p>
|
||||
@else
|
||||
<p class="text-muted break-text">{{ $book->getExcerpt() }}</p>
|
||||
@endif
|
||||
<p class="text-muted break-text mb-s">{{ $book->getExcerpt() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
|
@ -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>
|
||||
@endif
|
||||
<div>
|
||||
{!! $books->render() !!}
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<p class="text-muted">{{ trans('entities.books_empty') }}</p>
|
||||
@if(userCan('books-create-all'))
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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))
|
||||
<div class="entity-list">
|
||||
@include('partials.entity-list-item-basic', ['entity' => $book, 'classes' => ($current->matches($book)? 'selected' : '')])
|
||||
@else
|
||||
<h3>@icon('book') {{ trans('entities.books_navigation') }}</h3>
|
||||
</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' : '' }}">
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
@yield('toolbar')
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-fill flex">
|
||||
<div class="content flex">
|
||||
<div class="scroll-body">
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue
Block a user