Started looking at the books listing design

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 1e46413384276d3396c095d86fb7dc92f09fce65..b000c7ed6f240f8f4958ca4647e094bd55c9af16 100644 (file)
--- a/resources/assets/sass/_blocks.scss
+++ b/resources/assets/sass/_blocks.scss
@@ -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 {

diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index 044a9498bf0f83990919218391698853dbb69d3c..d89b264636a0d2474bd4274b8310c2badfd013c4 100644 (file)
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -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;
 }
\ No newline at end of file

diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss
index 0ee934b3f2cc05207f05802a97728e2ee8e82e61..0d0b38aca6ee18b6b88bb56ffa9eacf3f38c00a2 100644 (file)
--- a/resources/assets/sass/_grid.scss
+++ b/resources/assets/sass/_grid.scss
@@ -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;

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index a979363c008dc80eea5c05180d7115db556eaba6..ef3c59f4d3f649a3004b1f9773624657eb5e007b 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/resources/assets/sass/_lists.scss
@@ -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 {

diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss
index bb604e1889f3af5c1767fa9869eaad2fdc557e42..3dfdce8a21a5c2af1744d5527ead3b614b832a79 100755 (executable)
--- a/resources/assets/sass/_pages.scss
+++ b/resources/assets/sass/_pages.scss
@@ -344,7 +344,6 @@
 
 .comments-container {
   width: 100%;
-  border-top: 1px solid #DDD;
   margin-top: $-xl;
   margin-bottom: $-m;
   h5 {

diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss
index 900c677ffb1d9b575a45d768164d8bb4943beeda..43b3e58989159bccc764c7a8c7e1cde15f4c852c 100644 (file)
--- a/resources/assets/sass/_text.scss
+++ b/resources/assets/sass/_text.scss
@@ -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
  */

diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index ea0fcba5be9fd05cdd08f910a8395af5fe583b5c..2294804104863b40e5366f34154a1b452ce190cb 100644 (file)
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -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;
 

diff --git a/resources/views/books/index.blade.php b/resources/views/books/index.blade.php
index 84150203f081e2345f466a0f0b3399da3acb2298..bed51e7fd756c87cb30a6951e72df706763dcbe8 100644 (file)
--- a/resources/views/books/index.blade.php
+++ b/resources/views/books/index.blade.php
@@ -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
\ No newline at end of file

diff --git a/resources/views/books/list.blade.php b/resources/views/books/list.blade.php
index 9459cc0088b9864c6badfa5a44246565b47e84ab..4b7280cf1ce10f30d0f959fa65a755adb266554d 100644 (file)
--- a/resources/views/books/list.blade.php
+++ b/resources/views/books/list.blade.php
@@ -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>

diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 06c3529d5e464b7ed86e1f3ec1d9864088e2a12e..d47bb660de114bca6c7a1f789b23667e5c979148 100644 (file)
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -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)

diff --git a/resources/views/sidebar-layout.blade.php b/resources/views/sidebar-layout.blade.php
index f5e04f4e0556735f37810addee0143adb3717f50..512b64e91fc87664dbb55c9b6af49c1a7fc4b0f7 100644 (file)
--- a/resources/views/sidebar-layout.blade.php
+++ b/resources/views/sidebar-layout.blade.php
@@ -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>