mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-17 08:42:23 +00:00
Started looking at the books listing design
This commit is contained in:
Dan Brown
parent
d39fc84301
commit
aabd4c0412
|
|
@ -180,9 +180,9 @@
|
|||
padding: $-m;
|
||||
padding-bottom: $-xs;
|
||||
margin: 0;
|
||||
font-size: $fs-s;
|
||||
color: #444;
|
||||
fill: #666;
|
||||
font-size: $fs-m;
|
||||
color: #222;
|
||||
fill: #222;
|
||||
font-weight: 400;
|
||||
}
|
||||
h3 a {
|
||||
|
|
|
|||
|
|
@ -97,4 +97,8 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
|
|||
.faded .text-page:hover {
|
||||
color: $color-page !important;
|
||||
fill: $color-page !important;
|
||||
}
|
||||
|
||||
.bg-book {
|
||||
background-color: $color-book;
|
||||
}
|
||||
|
|
@ -59,13 +59,22 @@ body.flexbox {
|
|||
margin: $-m;
|
||||
}
|
||||
}
|
||||
.flex.sidebar + .flex.content {
|
||||
.flex.sidebar + .flex {
|
||||
flex: 3;
|
||||
max-width: 100%;
|
||||
}
|
||||
.flex.sidebar + .flex .content-wrap {
|
||||
background-color: #FFFFFF;
|
||||
padding: 0 $-l;
|
||||
padding: $-l $-xxl;
|
||||
box-shadow: $bs-card;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
overflow: auto;
|
||||
&.thin {
|
||||
width: 940px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.flex.sidebar .sidebar-toggle {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
.entity-list-item.selected {
|
||||
background-color: #EEE;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
.chapter-child-menu {
|
||||
font-size: 12px;
|
||||
|
|
@ -293,6 +293,13 @@ a.entity-list-item:hover {
|
|||
background-color: #F2F2F2;
|
||||
}
|
||||
|
||||
.entity-list-item-image {
|
||||
width: 140px;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.entity-list.compact {
|
||||
font-size: 0.6 * $fs-m;
|
||||
h4, a {
|
||||
|
|
|
|||
|
|
@ -344,7 +344,6 @@
|
|||
|
||||
.comments-container {
|
||||
width: 100%;
|
||||
border-top: 1px solid #DDD;
|
||||
margin-top: $-xl;
|
||||
margin-bottom: $-m;
|
||||
h5 {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
font-weight: 400;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: #333;
|
||||
color: #222;
|
||||
.subheader {
|
||||
font-size: 0.5em;
|
||||
line-height: 1em;
|
||||
|
|
@ -79,6 +79,10 @@ h5, h6 {
|
|||
}
|
||||
}
|
||||
|
||||
.list-heading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Link styling
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ $text: -apple-system, BlinkMacSystemFont,
|
|||
sans-serif;
|
||||
$mono: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace;
|
||||
$heading: $text;
|
||||
$fs-m: 15px;
|
||||
$fs-s: 14px;
|
||||
$fs-m: 14px;
|
||||
$fs-s: 12px;
|
||||
|
||||
// Colours
|
||||
$primary: #0288D1;
|
||||
|
|
@ -53,7 +53,7 @@ $primary-faded: rgba(21, 101, 192, 0.15);
|
|||
// Item Colors
|
||||
$color-bookshelf: #af5a5a;
|
||||
$color-book: #009688;
|
||||
$color-chapter: #e56236;
|
||||
$color-chapter: #d7804a;
|
||||
$color-page: $primary;
|
||||
$color-page-draft: #9A60DA;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
@extends('sidebar-layout')
|
||||
|
||||
@section('toolbar')
|
||||
<div class="col-xs-6">
|
||||
<div class="grid halves">
|
||||
<div class="action-buttons text-left">
|
||||
@include('books/view-toggle', ['booksViewType' => $booksViewType])
|
||||
@include('books.view-toggle', ['booksViewType' => $booksViewType])
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 faded">
|
||||
<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>
|
||||
|
|
@ -17,25 +15,25 @@
|
|||
|
||||
@section('sidebar')
|
||||
@if($recents)
|
||||
<div id="recents" class="card">
|
||||
<h3>@icon('view') {{ trans('entities.recently_viewed') }}</h3>
|
||||
@include('partials/entity-list', ['entities' => $recents, 'style' => 'compact'])
|
||||
<div id="recents" class="mb-xl">
|
||||
<h5>{{ trans('entities.recently_viewed') }}</h5>
|
||||
@include('partials.entity-list', ['entities' => $recents, 'style' => 'compact'])
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div id="popular" class="card">
|
||||
<h3>@icon('popular') {{ trans('entities.books_popular') }}</h3>
|
||||
<div id="popular" class="mb-xl">
|
||||
<h5>{{ trans('entities.books_popular') }}</h5>
|
||||
@if(count($popular) > 0)
|
||||
@include('partials/entity-list', ['entities' => $popular, 'style' => 'compact'])
|
||||
@include('partials.entity-list', ['entities' => $popular, 'style' => 'compact'])
|
||||
@else
|
||||
<div class="body text-muted">{{ trans('entities.books_popular_empty') }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div id="new" class="card">
|
||||
<h3>@icon('star-circle') {{ trans('entities.books_new') }}</h3>
|
||||
<div id="new" class="mb-xl">
|
||||
<h5>{{ trans('entities.books_new') }}</h5>
|
||||
@if(count($popular) > 0)
|
||||
@include('partials/entity-list', ['entities' => $new, 'style' => 'compact'])
|
||||
@include('partials.entity-list', ['entities' => $new, 'style' => 'compact'])
|
||||
@else
|
||||
<div class="body text-muted">{{ trans('entities.books_new_empty') }}</div>
|
||||
@endif
|
||||
|
|
@ -43,5 +41,5 @@
|
|||
@stop
|
||||
|
||||
@section('body')
|
||||
@include('books/list', ['books' => $books, 'bookViewType' => $booksViewType])
|
||||
@include('books.list', ['books' => $books, 'bookViewType' => $booksViewType])
|
||||
@stop
|
||||
|
|
@ -1,17 +1,27 @@
|
|||
|
||||
<div class="container{{ $booksViewType === 'list' ? ' small' : '' }}">
|
||||
<h1>{{ trans('entities.books') }}</h1>
|
||||
<div class="content-wrap {{ $booksViewType === 'list' ? 'thin' : '' }}">
|
||||
<h1 class="list-heading px-m">{{ trans('entities.books') }}</h1>
|
||||
@if(count($books) > 0)
|
||||
@if($booksViewType === 'list')
|
||||
@foreach($books as $book)
|
||||
@include('books/list-item', ['book' => $book])
|
||||
<hr>
|
||||
@endforeach
|
||||
{!! $books->render() !!}
|
||||
<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>
|
||||
@endforeach
|
||||
{!! $books->render() !!}
|
||||
</div>
|
||||
@else
|
||||
<div class="grid third">
|
||||
@foreach($books as $key => $book)
|
||||
@include('books/grid-item', ['book' => $book])
|
||||
@include('books.grid-item', ['book' => $book])
|
||||
@endforeach
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -121,23 +121,25 @@
|
|||
|
||||
@section('body')
|
||||
|
||||
<div class="page-content flex" page-display="{{ $page->id }}">
|
||||
<div class="content-wrap thin">
|
||||
<div class="page-content flex" page-display="{{ $page->id }}">
|
||||
|
||||
<div class="pointer-container" id="pointer">
|
||||
<div class="pointer anim {{ userCan('page-update', $page) ? 'is-page-editable' : ''}}" >
|
||||
<span class="icon text-primary">@icon('link') @icon('include', ['style' => 'display:none;'])</span>
|
||||
<span class="input-group">
|
||||
<div class="pointer-container" id="pointer">
|
||||
<div class="pointer anim {{ userCan('page-update', $page) ? 'is-page-editable' : ''}}" >
|
||||
<span class="icon text-primary">@icon('link') @icon('include', ['style' => 'display:none;'])</span>
|
||||
<span class="input-group">
|
||||
<input readonly="readonly" type="text" id="pointer-url" placeholder="url">
|
||||
<button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}">@icon('copy')</button>
|
||||
</span>
|
||||
@if(userCan('page-update', $page))
|
||||
<a href="{{ $page->getUrl('/edit') }}" id="pointer-edit" data-edit-href="{{ $page->getUrl('/edit') }}"
|
||||
class="button icon heading-edit-icon" title="{{ trans('entities.pages_edit_content_link')}}">@icon('edit')</a>
|
||||
@endif
|
||||
@if(userCan('page-update', $page))
|
||||
<a href="{{ $page->getUrl('/edit') }}" id="pointer-edit" data-edit-href="{{ $page->getUrl('/edit') }}"
|
||||
class="button icon heading-edit-icon" title="{{ trans('entities.pages_edit_content_link')}}">@icon('edit')</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@include('pages/page-display')
|
||||
@include('pages/page-display')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($commentsEnabled)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<div class="toolbar px-l py-m">
|
||||
<div class="toolbar px-xl py-m">
|
||||
@yield('toolbar')
|
||||
</div>
|
||||
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content mr-xl flex @yield('body-wrap-classes')">
|
||||
<div class="mr-xl flex @yield('body-wrap-classes')">
|
||||
@yield('body')
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user