}
.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;
&.open .collapse-title label:before {
transform: rotate(90deg);
}
- &+.form-group[collapsible] {
- margin-top: -($-s + 1);
- }
}
.inline-input-style {
flex: 1;
}
+.content-wrap.card {
+ padding: $-l $-xxl;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: $-xl;
+ overflow: auto;
+}
.tri-layout-container {
display: grid;
.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 {
position: sticky;
top: $-m;
max-height: 100vh;
+ min-height: 50vh;
overflow-y: scroll;
overflow-x: visible;
scrollbar-width: none;
}
.tri-layout-left, .tri-layout-right {
- opacity: 0.8;
+ opacity: 0.7;
transition: opacity ease-in-out 120ms;
&:hover {
opacity: 1;
color: $color-page-draft;
fill: $color-page-draft;
}
+ > .dropdown-container {
+ display: block;
+ }
}
.entity-list-item, .icon-list-item {
width: 100%;
max-width: 840px;
margin: 0 auto;
- margin-top: $-xxl;
overflow-wrap: break-word;
- &.flex {
- margin-top: $-xl;
- }
.align-left {
text-align: left;
}
}
}
-.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 {
position: relative;
overflow: hidden;
padding: $-xs $-m;
+ color: #666;
+ fill: currentColor;
&:after {
content: '';
position: absolute;
$-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,
@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
<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
@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
@extends('tri-layout')
+@section('container-classes', 'mt-xl')
+
@section('left')
@if($recents)
<div id="recents" class="mb-xl">
-<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
-<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">
@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">
@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'))
-@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>
@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">
@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)
</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])
</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">
</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
-<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' : '' }}">
-<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
@yield('toolbar')
</div>
-
<div class="flex-fill flex">
<div class="content flex">
<div class="scroll-body">
@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">
projects / bookstack / commitdiff