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

Started looking at the books listing design

Browse Source
This commit is contained in:
Dan Brown 2018-12-01 16:29:57 +00:00
parent d39fc84301
commit aabd4c0412
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
11 changed files with 80 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/sass/_blocks.scss
View File

@ -180,9 +180,9 @@
padding: $-m; padding: $-m;
padding-bottom: $-xs; padding-bottom: $-xs;
margin: 0; margin: 0;
font-size: $fs-s; font-size: $fs-m;
color: #444; color: #222;
fill: #666; fill: #222;
font-weight: 400; font-weight: 400;
} }
h3 a { h3 a {

4
resources/assets/sass/_colors.scss
View File

@ -97,4 +97,8 @@ p.secondary, p .secondary, span.secondary, .text-secondary {
.faded .text-page:hover { .faded .text-page:hover {
color: $color-page !important; color: $color-page !important;
fill: $color-page !important; fill: $color-page !important;
}
.bg-book {
background-color: $color-book;
} }

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

@ -59,13 +59,22 @@ body.flexbox {
margin: $-m; margin: $-m;
} }
} }
.flex.sidebar + .flex.content { .flex.sidebar + .flex {
flex: 3; flex: 3;
max-width: 100%;
}
.flex.sidebar + .flex .content-wrap {
background-color: #FFFFFF; background-color: #FFFFFF;
padding: 0 $-l; padding: $-l $-xxl;
box-shadow: $bs-card; box-shadow: $bs-card;
border-radius: 4px; border-radius: 4px;
max-width: 100%; margin-left: auto;
margin-right: auto;
overflow: auto;
&.thin {
width: 940px;
max-width: 100%;
}
} }
.flex.sidebar .sidebar-toggle { .flex.sidebar .sidebar-toggle {
display: none; display: none;

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

@ -126,7 +126,7 @@
font-size: 0.8rem; font-size: 0.8rem;
} }
.entity-list-item.selected { .entity-list-item.selected {
background-color: #EEE; background-color: #F2F2F2;
} }
.chapter-child-menu { .chapter-child-menu {
font-size: 12px; font-size: 12px;
@ -293,6 +293,13 @@ a.entity-list-item:hover {
background-color: #F2F2F2; background-color: #F2F2F2;
} }
.entity-list-item-image {
width: 140px;
background-size: cover;
background-position: 50% 50%;
border-radius: 3px;
}
.entity-list.compact { .entity-list.compact {
font-size: 0.6 * $fs-m; font-size: 0.6 * $fs-m;
h4, a { h4, a {

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

@ -344,7 +344,6 @@
.comments-container { .comments-container {
width: 100%; width: 100%;
border-top: 1px solid #DDD;
margin-top: $-xl; margin-top: $-xl;
margin-bottom: $-m; margin-bottom: $-m;
h5 { h5 {

6
resources/assets/sass/_text.scss
View File

@ -42,7 +42,7 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 400; font-weight: 400;
position: relative; position: relative;
display: block; display: block;
color: #333; color: #222;
.subheader { .subheader {
font-size: 0.5em; font-size: 0.5em;
line-height: 1em; line-height: 1em;
@ -79,6 +79,10 @@ h5, h6 {
} }
} }
.list-heading {
font-size: 2rem;
}
/* /*
* Link styling * Link styling
*/ */

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

@ -37,8 +37,8 @@ $text: -apple-system, BlinkMacSystemFont,
sans-serif; sans-serif;
$mono: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace; $mono: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace;
$heading: $text; $heading: $text;
$fs-m: 15px; $fs-m: 14px;
$fs-s: 14px; $fs-s: 12px;
// Colours // Colours
$primary: #0288D1; $primary: #0288D1;
@ -53,7 +53,7 @@ $primary-faded: rgba(21, 101, 192, 0.15);
// Item Colors // Item Colors
$color-bookshelf: #af5a5a; $color-bookshelf: #af5a5a;
$color-book: #009688; $color-book: #009688;
$color-chapter: #e56236; $color-chapter: #d7804a;
$color-page: $primary; $color-page: $primary;
$color-page-draft: #9A60DA; $color-page-draft: #9A60DA;

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

@ -1,12 +1,10 @@
@extends('sidebar-layout') @extends('sidebar-layout')
@section('toolbar') @section('toolbar')
<div class="col-xs-6"> <div class="grid halves">
<div class="action-buttons text-left"> <div class="action-buttons text-left">
@include('books/view-toggle', ['booksViewType' => $booksViewType]) @include('books.view-toggle', ['booksViewType' => $booksViewType])
</div> </div>
</div>
<div class="col-xs-6 faded">
<div class="action-buttons"> <div class="action-buttons">
@if($currentUser->can('book-create-all')) @if($currentUser->can('book-create-all'))
<a href="{{ baseUrl("/create-book") }}" class="text-pos text-button">@icon('add'){{ trans('entities.books_create') }}</a> <a href="{{ baseUrl("/create-book") }}" class="text-pos text-button">@icon('add'){{ trans('entities.books_create') }}</a>
@ -17,25 +15,25 @@
@section('sidebar') @section('sidebar')
@if($recents) @if($recents)
<div id="recents" class="card"> <div id="recents" class="mb-xl">
<h3>@icon('view') {{ trans('entities.recently_viewed') }}</h3> <h5>{{ trans('entities.recently_viewed') }}</h5>
@include('partials/entity-list', ['entities' => $recents, 'style' => 'compact']) @include('partials.entity-list', ['entities' => $recents, 'style' => 'compact'])
</div> </div>
@endif @endif
<div id="popular" class="card"> <div id="popular" class="mb-xl">
<h3>@icon('popular') {{ trans('entities.books_popular') }}</h3> <h5>{{ trans('entities.books_popular') }}</h5>
@if(count($popular) > 0) @if(count($popular) > 0)
@include('partials/entity-list', ['entities' => $popular, 'style' => 'compact']) @include('partials.entity-list', ['entities' => $popular, 'style' => 'compact'])
@else @else
<div class="body text-muted">{{ trans('entities.books_popular_empty') }}</div> <div class="body text-muted">{{ trans('entities.books_popular_empty') }}</div>
@endif @endif
</div> </div>
<div id="new" class="card"> <div id="new" class="mb-xl">
<h3>@icon('star-circle') {{ trans('entities.books_new') }}</h3> <h5>{{ trans('entities.books_new') }}</h5>
@if(count($popular) > 0) @if(count($popular) > 0)
@include('partials/entity-list', ['entities' => $new, 'style' => 'compact']) @include('partials.entity-list', ['entities' => $new, 'style' => 'compact'])
@else @else
<div class="body text-muted">{{ trans('entities.books_new_empty') }}</div> <div class="body text-muted">{{ trans('entities.books_new_empty') }}</div>
@endif @endif
@ -43,5 +41,5 @@
@stop @stop
@section('body') @section('body')
@include('books/list', ['books' => $books, 'bookViewType' => $booksViewType]) @include('books.list', ['books' => $books, 'bookViewType' => $booksViewType])
@stop @stop

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

@ -1,17 +1,27 @@
<div class="container{{ $booksViewType === 'list' ? ' small' : '' }}"> <div class="content-wrap {{ $booksViewType === 'list' ? 'thin' : '' }}">
<h1>{{ trans('entities.books') }}</h1> <h1 class="list-heading px-m">{{ trans('entities.books') }}</h1>
@if(count($books) > 0) @if(count($books) > 0)
@if($booksViewType === 'list') @if($booksViewType === 'list')
@foreach($books as $book) <div class="entity-list">
@include('books/list-item', ['book' => $book]) @foreach($books as $book)
<hr> <a href="{{ $book->getUrl() }}" class="book entity-list-item" data-entity-type="book" data-entity-id="{{$book->id}}">
@endforeach <div class="entity-list-item-image bg-book" style="background-image: url('{{ $book->getBookCover() }}')">
{!! $books->render() !!} </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 @else
<div class="grid third"> <div class="grid third">
@foreach($books as $key => $book) @foreach($books as $key => $book)
@include('books/grid-item', ['book' => $book]) @include('books.grid-item', ['book' => $book])
@endforeach @endforeach
</div> </div>
<div> <div>

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

@ -121,23 +121,25 @@
@section('body') @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-container" id="pointer">
<div class="pointer anim {{ userCan('page-update', $page) ? 'is-page-editable' : ''}}" > <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="icon text-primary">@icon('link') @icon('include', ['style' => 'display:none;'])</span>
<span class="input-group"> <span class="input-group">
<input readonly="readonly" type="text" id="pointer-url" placeholder="url"> <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> <button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}">@icon('copy')</button>
</span> </span>
@if(userCan('page-update', $page)) @if(userCan('page-update', $page))
<a href="{{ $page->getUrl('/edit') }}" id="pointer-edit" data-edit-href="{{ $page->getUrl('/edit') }}" <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> class="button icon heading-edit-icon" title="{{ trans('entities.pages_edit_content_link')}}">@icon('edit')</a>
@endif @endif
</div>
</div> </div>
</div>
@include('pages/page-display') @include('pages/page-display')
</div>
</div> </div>
@if ($commentsEnabled) @if ($commentsEnabled)

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

@ -4,7 +4,7 @@
@section('content') @section('content')
<div class="toolbar px-l py-m"> <div class="toolbar px-xl py-m">
@yield('toolbar') @yield('toolbar')
</div> </div>
@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="content mr-xl flex @yield('body-wrap-classes')"> <div class="mr-xl flex @yield('body-wrap-classes')">
@yield('body') @yield('body')
</div> </div>
</div> </div>