From 89be30ff0ed8a8a59d1bebb7f4e6828f179a35f5 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 16 Oct 2018 18:49:16 +0100 Subject: [PATCH 01/59] Started on a design update - Added base of new grid system. - Added new margin/padding/visiblity helpers. - Made header collapse to overflow menu on mobile. --- app/Entities/Entity.php | 14 +++ app/Entities/Page.php | 11 -- resources/assets/icons/bookshelf.svg | 3 +- .../js/components/header-mobile-toggle.js | 31 +++++ resources/assets/js/components/index.js | 1 + resources/assets/sass/_blocks.scss | 71 ++++++----- resources/assets/sass/_colors.scss | 100 ++++++++++++++++ resources/assets/sass/_grid.scss | 68 ++++++++++- resources/assets/sass/_header.scss | 112 ++++++++++++------ resources/assets/sass/_lists.scss | 47 +++++--- resources/assets/sass/_mixins.scss | 3 + resources/assets/sass/_pages.scss | 27 +++++ resources/assets/sass/_text.scss | 100 ---------------- resources/assets/sass/_variables.scss | 6 +- resources/assets/sass/styles.scss | 1 + resources/views/base.blade.php | 61 ++-------- resources/views/common/header.blade.php | 58 +++++++++ resources/views/common/home.blade.php | 74 ++++++------ resources/views/pages/list-item.blade.php | 73 ++++++------ .../views/partials/_header-dropdown.blade.php | 17 --- .../views/partials/activity-item.blade.php | 12 +- .../views/partials/entity-list-item.blade.php | 13 ++ .../views/partials/entity-list.blade.php | 19 +-- resources/views/simple-layout.blade.php | 8 +- 24 files changed, 556 insertions(+), 374 deletions(-) create mode 100644 resources/assets/js/components/header-mobile-toggle.js create mode 100644 resources/assets/sass/_colors.scss create mode 100644 resources/views/common/header.blade.php delete mode 100644 resources/views/partials/_header-dropdown.blade.php create mode 100644 resources/views/partials/entity-list-item.blade.php diff --git a/app/Entities/Entity.php b/app/Entities/Entity.php index 21d172e70..7917f83f8 100644 --- a/app/Entities/Entity.php +++ b/app/Entities/Entity.php @@ -218,6 +218,20 @@ class Entity extends Ownable return $this->{$this->textField}; } + /** + * Get an excerpt of this entity's descriptive content to the specified length. + * @param int $length + * @return mixed + */ + public function getExcerpt(int $length = 100) + { + $text = $this->getText(); + if (mb_strlen($text) > $length) { + $text = mb_substr($text, 0, $length-3) . '...'; + } + return trim($text); + } + /** * Return a generalised, common raw query that can be 'unioned' across entities. * @return string diff --git a/app/Entities/Page.php b/app/Entities/Page.php index ea7df16f4..1c2cc5cff 100644 --- a/app/Entities/Page.php +++ b/app/Entities/Page.php @@ -102,17 +102,6 @@ class Page extends Entity return baseUrl('/books/' . urlencode($bookSlug) . $midText . $idComponent); } - /** - * Get an excerpt of this page's content to the specified length. - * @param int $length - * @return mixed - */ - public function getExcerpt($length = 100) - { - $text = strlen($this->text) > $length ? substr($this->text, 0, $length-3) . '...' : $this->text; - return mb_convert_encoding($text, 'UTF-8'); - } - /** * Return a generalised, common raw query that can be 'unioned' across entities. * @param bool $withContent diff --git a/resources/assets/icons/bookshelf.svg b/resources/assets/icons/bookshelf.svg index 03da68f96..f1e45eaf9 100644 --- a/resources/assets/icons/bookshelf.svg +++ b/resources/assets/icons/bookshelf.svg @@ -1,2 +1 @@ - - + \ No newline at end of file diff --git a/resources/assets/js/components/header-mobile-toggle.js b/resources/assets/js/components/header-mobile-toggle.js new file mode 100644 index 000000000..eccd4b8f0 --- /dev/null +++ b/resources/assets/js/components/header-mobile-toggle.js @@ -0,0 +1,31 @@ + +class HeaderMobileToggle { + + constructor(elem) { + this.elem = elem; + this.toggleButton = elem.querySelector('.mobile-menu-toggle'); + this.menu = elem.querySelector('.header-links'); + this.open = false; + + this.toggleButton.addEventListener('click', this.onToggle.bind(this)); + this.onWindowClick = this.onWindowClick.bind(this); + } + + onToggle(event) { + this.open = !this.open; + this.menu.classList.toggle('show', this.open); + if (this.open) { + window.addEventListener('click', this.onWindowClick) + } else { + window.removeEventListener('click', this.onWindowClick) + } + event.stopPropagation(); + } + + onWindowClick(event) { + this.onToggle(event); + } + +} + +module.exports = HeaderMobileToggle; \ No newline at end of file diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js index 768e0983f..a9ce31362 100644 --- a/resources/assets/js/components/index.js +++ b/resources/assets/js/components/index.js @@ -20,6 +20,7 @@ let componentMapping = { 'page-display': require('./page-display'), 'shelf-sort': require('./shelf-sort'), 'homepage-control': require('./homepage-control'), + 'header-mobile-toggle': require('./header-mobile-toggle'), }; window.components = {}; diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index c0f02ed7d..a19ca0278 100644 --- a/resources/assets/sass/_blocks.scss +++ b/resources/assets/sass/_blocks.scss @@ -24,33 +24,9 @@ } } -/* -* Bordering -*/ -.bordered { - border: 1px solid #BBB; - &.pos { - border-color: $positive; - } - &.neg { - border-color: $negative; - } - &.primary { - border-color: $primary; - } - &.secondary { - border-color: $secondary; - } - &.thick { - border-width: 2px; - } -} -.rounded { - border-radius: 3px; -} - /* * Padding +* TODO - Remove these older styles */ .nopadding { padding: 0; @@ -94,6 +70,7 @@ /* * Margins +* TODO - Remove these older styles */ .margins { margin: $-l; @@ -126,6 +103,38 @@ } } +@mixin spacing($prop, $propLetter) { + @each $sizeLetter, $size in $spacing { + .#{$propLetter}-#{$sizeLetter} { + #{$prop}: $size; + } + .#{$propLetter}x-#{$sizeLetter} { + #{$prop}-left: $size; + #{$prop}-right: $size; + } + .#{$propLetter}y-#{$sizeLetter} { + #{$prop}-top: $size; + #{$prop}-bottom: $size; + } + .#{$propLetter}t-#{$sizeLetter} { + #{$prop}-top: $size; + } + .#{$propLetter}r-#{$sizeLetter} { + #{$prop}-right: $size; + } + .#{$propLetter}b-#{$sizeLetter} { + #{$prop}-bottom: $size; + } + .#{$propLetter}l-#{$sizeLetter} { + #{$prop}-left: $size; + } + } + +} + +@include spacing('margin', 'm') +@include spacing('padding', 'p') + /** * Callouts @@ -183,18 +192,18 @@ } .card { - margin: $-m; background-color: #FFF; - box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); + border-radius: 3px; + padding-bottom: $-xs; h3 { padding: $-m; - border-bottom: 1px solid #E8E8E8; + padding-bottom: $-xs; margin: 0; font-size: $fs-s; - color: #888; - fill: #888; + color: #444; + fill: #666; font-weight: 400; - text-transform: uppercase; } h3 a { line-height: 1; diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss new file mode 100644 index 000000000..044a9498b --- /dev/null +++ b/resources/assets/sass/_colors.scss @@ -0,0 +1,100 @@ +/* + * Text colors + */ +p.pos, p .pos, span.pos, .text-pos { + color: $positive; + fill: $positive; + &:hover { + color: $positive; + fill: $positive; + } +} + +p.neg, p .neg, span.neg, .text-neg { + color: $negative; + fill: $negative; + &:hover { + color: $negative; + fill: $negative; + } +} + +p.muted, p .muted, span.muted, .text-muted { + color: lighten($text-dark, 26%); + fill: lighten($text-dark, 26%); + &.small, .small { + color: lighten($text-dark, 32%); + fill: lighten($text-dark, 32%); + } +} + +p.primary, p .primary, span.primary, .text-primary { + color: $primary; + fill: $primary; + &:hover { + color: $primary; + fill: $primary; + } +} + +p.secondary, p .secondary, span.secondary, .text-secondary { + color: $secondary; + fill: $secondary; + &:hover { + color: $secondary; + fill: $secondary; + } +} + +.text-bookshelf { + color: $color-bookshelf; + fill: $color-bookshelf; + &:hover { + color: $color-bookshelf; + fill: $color-bookshelf; + } +} +.text-book { + color: $color-book; + fill: $color-book; + &:hover { + color: $color-book; + fill: $color-book; + } +} +.text-page { + color: $color-page; + fill: $color-page; + &:hover { + color: $color-page; + fill: $color-page; + } + &.draft { + color: $color-page-draft; + fill: $color-page-draft; + } + &.draft:hover { + color: $color-page-draft; + fill: $color-page-draft; + } +} +.text-chapter { + color: $color-chapter; + fill: $color-chapter; + &:hover { + color: $color-chapter; + fill: $color-chapter; + } +} +.faded .text-book:hover { + color: $color-book !important; + fill: $color-book !important; +} +.faded .text-chapter:hover { + color: $color-chapter !important; + fill: $color-chapter !important; +} +.faded .text-page:hover { + color: $color-page !important; + fill: $color-page !important; +} \ No newline at end of file diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss index 0e1f85ce6..f4d155dde 100644 --- a/resources/assets/sass/_grid.scss +++ b/resources/assets/sass/_grid.scss @@ -270,6 +270,8 @@ div[class^="col-"] img { display: inline-block; } + +// TODO - Remove old BS grid system .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; @@ -908,18 +910,12 @@ div[class^="col-"] img { } .clearfix:before, .clearfix:after, -.container:before, -.container:after, -.container-fluid:before, -.container-fluid:after, .row:before, .row:after { content: " "; display: table; } .clearfix:after, -.container:after, -.container-fluid:after, .row:after { clear: both; } @@ -928,3 +924,63 @@ div[class^="col-"] img { margin-left: auto; margin-right: auto; } + + + + + + +.grid { + display: grid; + grid-column-gap: $-m; + grid-row-gap: 0; + &.contained { + max-width: $max-width; + padding-left: $-m; + padding-right: $-m; + margin-left: auto; + margin-right: auto; + } +} + +@each $sizeLetter, $size in $spacing { + .grid.contained.space-#{$sizeLetter} { + padding-left: $size; + padding-right: $size; + grid-column-gap: $size; + } +} + +@mixin grid-layout($name, $times) { + .grid.#{$name} { + grid-template-columns: repeat(#{$times}, 1fr); + } +} + +@include grid-layout('thirds', 3) + +@each $sizeLetter, $size in $screen-sizes { + @include smaller-than($size) { + .grid.break-#{$sizeLetter} { + grid-template-columns: 1fr; + } + } +} + + +/** + * Visibility + */ + +@each $sizeLetter, $size in $screen-sizes { + @include smaller-than($size) { + .hide-under-#{$sizeLetter} { + display: none !important; + } + } + @include larger-than($size) { + .hide-over-#{$sizeLetter} { + display: none !important; + } + } +} \ No newline at end of file diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index b66bab394..d42ec8064 100644 --- a/resources/assets/sass/_header.scss +++ b/resources/assets/sass/_header.scss @@ -2,21 +2,22 @@ * Includes the main navigation header and the faded toolbar. */ +header .grid { + grid-template-columns: auto min-content auto; +} + header { + position: relative; display: block; z-index: 2; top: 0; background-color: $primary-dark; color: #fff; fill: #fff; - .padded { - padding: $-m; - } border-bottom: 1px solid #DDD; .links { display: inline-block; vertical-align: top; - margin-left: $-m; } .links a { display: inline-block; @@ -28,15 +29,6 @@ header { padding-left: $-m; padding-right: 0; } - @include smaller-than($screen-md) { - .links a { - padding-left: $-s; - padding-right: $-s; - } - .dropdown-container { - padding-left: $-s; - } - } .avatar, .user-name { display: inline-block; } @@ -63,27 +55,17 @@ header { padding-top: 4px; font-size: 18px; } - @include smaller-than($screen-md) { + @include between($l, $xl) { padding-left: $-xs; .name { display: none; } } } - @include smaller-than($screen-sm) { - text-align: center; - .float.right { - float: none; - } - .links a { - padding: $-s; - } - .user-name { - padding-top: $-s; - } - } } + + .header-search { display: inline-block; } @@ -115,20 +97,11 @@ header .search-box { :-moz-placeholder { /* Firefox 18- */ color: #DDD; } - @include smaller-than($screen-lg) { - max-width: 250px; - } - @include smaller-than($l) { + @include between($l, $xl) { max-width: 200px; } } -@include smaller-than($s) { - .header-search { - display: block; - } -} - .logo { display: inline-block; &:hover { @@ -151,6 +124,73 @@ header .search-box { height: 43px; } +.mobile-menu-toggle { + color: #FFF; + fill: #FFF; + font-size: 2em; + border: 2px solid rgba(255, 255, 255, 0.8); + border-radius: 4px; + padding: 0 $-xs; + position: absolute; + right: $-m; + top: 8px; + line-height: 1; + cursor: pointer; + user-select: none; + svg { + margin: 0; + } +} + +@include smaller-than($l) { + header .header-links { + display: none; + background-color: #FFF; + z-index: 10; + right: $-m; + border-radius: 4px; + overflow: hidden; + position: absolute; + box-shadow: $bs-hover; + margin-top: -$-xs; + &.show { + display: block; + } + } + header .links a, header .dropdown-container ul li a { + text-align: left; + display: block; + padding: $-s $-m; + color: $text-dark; + fill: $text-dark; + svg { + margin-right: $-s; + } + &:hover { + background-color: #EEE; + color: #444; + fill: #444; + text-decoration: none; + } + } + header .dropdown-container { + display: block; + padding-left: 0; + } + header .links { + display: block; + } + header .dropdown-container ul { + display: block !important; + position: relative; + background-color: transparent; + border: 0; + padding: 0; + margin: 0; + box-shadow: none; + } +} + .breadcrumbs span.sep { color: #aaa; padding: 0 $-xs; diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 18a7ea9ce..c28d7219f 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -227,20 +227,13 @@ } .activity-list-item { - padding: $-s 0; + padding: $-s $-m; + display: grid; + grid-template-columns: min-content 1fr; + grid-column-gap: $-m; color: #888; fill: #888; - border-bottom: 1px solid #EEE; font-size: 0.9em; - .left { - float: left; - } - .left + .right { - margin-left: 30px + $-s; - } - &:last-of-type { - border-bottom: 0; - } } ul.pagination { @@ -281,9 +274,6 @@ ul.pagination { } .entity-list { - > div { - padding: $-m 0; - } h4 { margin: 0; } @@ -304,13 +294,29 @@ ul.pagination { } } -.card .entity-list-item, .card .activity-list-item { - padding-left: $-m; - padding-right: $-m; +.entity-list-item { + padding: $-s $-m; + display: grid; + grid-template-columns: min-content 1fr; + grid-column-gap: $-m; + align-items: top; + > .content { + padding-top: 2px; + } + .icon { + font-size: 1rem; + } + h4 a { + color: #666; + } +} +a.entity-list-item:hover { + text-decoration: none; + background-color: #F2F2F2; } .entity-list.compact { - font-size: 0.6em; + font-size: 0.6 * $fs-m; h4, a { line-height: 1.2; } @@ -331,6 +337,11 @@ ul.pagination { hr { margin: 0; } + @include smaller-than($m) { + h4 { + font-size: 1.666em; + } + } } .dropdown-container { diff --git a/resources/assets/sass/_mixins.scss b/resources/assets/sass/_mixins.scss index 3d3101ca7..13c81ae9e 100644 --- a/resources/assets/sass/_mixins.scss +++ b/resources/assets/sass/_mixins.scss @@ -5,6 +5,9 @@ @mixin larger-than($size) { @media screen and (min-width: $size) { @content; } } +@mixin between($min, $max) { + @media screen and (min-width: $min) and (max-width: $max) { @content; } +} @mixin clearfix() { &:after { display: block; diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index 21fdf90de..2d3a5852d 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -363,4 +363,31 @@ .mce-open { display: none; } +} + +.entity-icon { + font-size: 1.3em; + width: 1.88em; + height: 1.88em; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + border-radius: 1em; + position: relative; + overflow: hidden; + svg { + margin: 0; + bottom: 0; + } + &:after { + content: ''; + position: absolute; + background-color: currentColor; + opacity: 0.2; + left: 0; + top: 0; + width: 100%; + height: 100%; + } } \ No newline at end of file diff --git a/resources/assets/sass/_text.scss b/resources/assets/sass/_text.scss index 0063c4672..fa34d7fc8 100644 --- a/resources/assets/sass/_text.scss +++ b/resources/assets/sass/_text.scss @@ -233,106 +233,6 @@ pre code { display: block; line-height: 1.6; } -/* - * Text colors - */ -p.pos, p .pos, span.pos, .text-pos { - color: $positive; - fill: $positive; - &:hover { - color: $positive; - fill: $positive; - } -} - -p.neg, p .neg, span.neg, .text-neg { - color: $negative; - fill: $negative; - &:hover { - color: $negative; - fill: $negative; - } -} - -p.muted, p .muted, span.muted, .text-muted { - color: lighten($text-dark, 26%); - fill: lighten($text-dark, 26%); - &.small, .small { - color: lighten($text-dark, 32%); - fill: lighten($text-dark, 32%); - } -} - -p.primary, p .primary, span.primary, .text-primary { - color: $primary; - fill: $primary; - &:hover { - color: $primary; - fill: $primary; - } -} - -p.secondary, p .secondary, span.secondary, .text-secondary { - color: $secondary; - fill: $secondary; - &:hover { - color: $secondary; - fill: $secondary; - } -} - -.text-bookshelf { - color: $color-bookshelf; - fill: $color-bookshelf; - &:hover { - color: $color-bookshelf; - fill: $color-bookshelf; - } -} -.text-book { - color: $color-book; - fill: $color-book; - &:hover { - color: $color-book; - fill: $color-book; - } -} -.text-page { - color: $color-page; - fill: $color-page; - &:hover { - color: $color-page; - fill: $color-page; - } - &.draft { - color: $color-page-draft; - fill: $color-page-draft; - } - &.draft:hover { - color: $color-page-draft; - fill: $color-page-draft; - } -} -.text-chapter { - color: $color-chapter; - fill: $color-chapter; - &:hover { - color: $color-chapter; - fill: $color-chapter; - } -} -.faded .text-book:hover { - color: $color-book !important; - fill: $color-book !important; -} -.faded .text-chapter:hover { - color: $color-chapter !important; - fill: $color-chapter !important; -} -.faded .text-page:hover { - color: $color-page !important; - fill: $color-page !important; -} span.highlight { //background-color: rgba($primary, 0.2); diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 006d1b3f0..e32b2ab2c 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -8,7 +8,7 @@ $max-width: 1400px; $xl: 1100px; $ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality. $l: 1000px; -$m: 800px; +$m: 880px; $s: 600px; $xs: 400px; $xxs: 360px; @@ -16,6 +16,8 @@ $screen-lg: 1200px; $screen-md: 992px; $screen-sm: 768px; +$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl)); + // Spacing (Margins+Padding) $-xxxl: 64px; $-xxl: 48px; @@ -26,6 +28,8 @@ $-s: 12px; $-xs: 6px; $-xxs: 3px; +$spacing: (('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl)); + // Fonts $text: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index 49ef77f39..2c657891a 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -3,6 +3,7 @@ @import "mixins"; @import "html"; @import "text"; +@import "colors"; @import "grid"; @import "blocks"; @import "buttons"; diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php index e6d0b7761..bc139e17f 100644 --- a/resources/views/base.blade.php +++ b/resources/views/base.blade.php @@ -17,57 +17,14 @@ @yield('head') - - @include('partials/custom-styles') - + @include('partials.custom-styles') @include('partials.custom-head') + - + - @include('partials/notifications') - - + @include('partials.notifications') + @include('common.header')
@yield('content') @@ -78,8 +35,10 @@ @icon('chevron-up') {{ trans('common.back_to_top') }} -@yield('bottom') - -@yield('scripts') + + @yield('bottom') + + @yield('scripts') + diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php new file mode 100644 index 000000000..7f309e21f --- /dev/null +++ b/resources/views/common/header.blade.php @@ -0,0 +1,58 @@ + \ No newline at end of file diff --git a/resources/views/common/home.blade.php b/resources/views/common/home.blade.php index cc20fc68e..72db5f6d2 100644 --- a/resources/views/common/home.blade.php +++ b/resources/views/common/home.blade.php @@ -1,57 +1,53 @@ @extends('simple-layout') -@section('toolbar') -
-
- @icon('expand-text'){{ trans('common.toggle_details') }} -
-
-@stop @section('body') -
-
+
+ @icon('expand-text'){{ trans('common.toggle_details') }} +
-
- @if(count($draftPages) > 0) -
-

@icon('edit') {{ trans('entities.my_recent_drafts') }}

- @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact']) -
- @endif +
+
+ @if(count($draftPages) > 0) +
+

{{ trans('entities.my_recent_drafts') }}

+ @include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact']) +
+ @endif -
-

@icon($signedIn ? 'view' : 'star-circle') {{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}

+
+

{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}

+ @include('partials/entity-list', [ + 'entities' => $recents, + 'style' => 'compact', + 'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty') + ]) +
+
+ +
+
+

{{ trans('entities.recently_updated_pages') }}

+
@include('partials/entity-list', [ - 'entities' => $recents, - 'style' => 'compact', - 'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty') - ]) + 'entities' => $recentlyUpdatedPages, + 'style' => 'compact', + 'emptyText' => trans('entities.no_pages_recently_updated') + ])
+
-
-
-

@icon('file') {{ trans('entities.recently_updated_pages') }}

-
- @include('partials/entity-list', [ - 'entities' => $recentlyUpdatedPages, - 'style' => 'compact', - 'emptyText' => trans('entities.no_pages_recently_updated') - ]) -
-
-
- -
-
-

@icon('time') {{ trans('entities.recent_activity') }}

+
+
+
+

{{ trans('entities.recent_activity') }}

@include('partials/activity-list', ['activity' => $activity])
-
+
diff --git a/resources/views/pages/list-item.blade.php b/resources/views/pages/list-item.blade.php index b13bb0f12..f3c79791a 100644 --- a/resources/views/pages/list-item.blade.php +++ b/resources/views/pages/list-item.blade.php @@ -1,44 +1,51 @@
-

- @if (isset($showPath) && $showPath) - - @icon('book'){{ $page->book->getShortName() }} - -   »   - @if($page->chapter) - - @icon('chapter'){{ $page->chapter->getShortName() }} +
@icon('page')
+
+ +

+ @if (isset($showPath) && $showPath) + + @icon('book'){{ $page->book->getShortName() }}   »   + @if($page->chapter) + + @icon('chapter'){{ $page->chapter->getShortName() }} + +   »   + @endif @endif - @endif - @icon('page'){{ $page->name }} -

+ {{ $page->name }} +

-
- @if(isset($page->searchSnippet)) -

{!! $page->searchSnippet !!}

- @else -

{{ $page->getExcerpt() }}

+ +
+ @if(isset($page->searchSnippet)) +

{!! $page->searchSnippet !!}

+ @else +

{{ $page->getExcerpt() }}

+ @endif +
+ + @if(isset($style) && $style === 'detailed') +
+
+ @include('partials.entity-meta', ['entity' => $page]) +
+
+ @icon('book'){{ $page->book->getShortName(30) }} +
+ @if($page->chapter) + @icon('chapter'){{ $page->chapter->getShortName(30) }} + @else + @icon('chapter') {{ trans('entities.pages_not_in_chapter') }} + @endif +
+
@endif +
- @if(isset($style) && $style === 'detailed') -
-
- @include('partials.entity-meta', ['entity' => $page]) -
-
- @icon('book'){{ $page->book->getShortName(30) }} -
- @if($page->chapter) - @icon('chapter'){{ $page->chapter->getShortName(30) }} - @else - @icon('chapter') {{ trans('entities.pages_not_in_chapter') }} - @endif -
-
- @endif
\ No newline at end of file diff --git a/resources/views/partials/_header-dropdown.blade.php b/resources/views/partials/_header-dropdown.blade.php deleted file mode 100644 index 176e00739..000000000 --- a/resources/views/partials/_header-dropdown.blade.php +++ /dev/null @@ -1,17 +0,0 @@ -
- - {{ $currentUser->name }} - {{ $currentUser->getShortName(9) }} @icon('caret-down') - - -
\ No newline at end of file diff --git a/resources/views/partials/activity-item.blade.php b/resources/views/partials/activity-item.blade.php index 1dbfc9de8..39fb35fe2 100644 --- a/resources/views/partials/activity-item.blade.php +++ b/resources/views/partials/activity-item.blade.php @@ -1,13 +1,13 @@ {{--Requires an Activity item with the name $activity passed in--}} -@if($activity->user) -
- {{ $activity->user->name }} -
-@endif +
+ @if($activity->user) + {{ $activity->user->name }} + @endif +
-
+
@if($activity->user) {{ $activity->user->name }} @else diff --git a/resources/views/partials/entity-list-item.blade.php b/resources/views/partials/entity-list-item.blade.php new file mode 100644 index 000000000..32d22853f --- /dev/null +++ b/resources/views/partials/entity-list-item.blade.php @@ -0,0 +1,13 @@ +getType(); ?> + +
@icon($type)
+
+ +

{{ $entity->name }}

+ +
+

{{ $entity->getExcerpt() }}

+
+ +
+ \ No newline at end of file diff --git a/resources/views/partials/entity-list.blade.php b/resources/views/partials/entity-list.blade.php index 371f38d71..b2a26f1e4 100644 --- a/resources/views/partials/entity-list.blade.php +++ b/resources/views/partials/entity-list.blade.php @@ -1,25 +1,12 @@ -
+
@if(count($entities) > 0) @foreach($entities as $index => $entity) - @if($entity->isA('page')) - @include('pages/list-item', ['page' => $entity]) - @elseif($entity->isA('book')) - @include('books/list-item', ['book' => $entity]) - @elseif($entity->isA('chapter')) - @include('chapters/list-item', ['chapter' => $entity, 'hidePages' => true]) - @elseif($entity->isA('bookshelf')) - @include('shelves/list-item', ['bookshelf' => $entity]) - @endif - - @if($index !== count($entities) - 1) -
- @endif - + @include('partials.entity-list-item', ['entity' => $entity]) @endforeach @else

- {{ $emptyText or trans('common.no_items') }} + {{ $emptyText ?? trans('common.no_items') }}

@endif
\ No newline at end of file diff --git a/resources/views/simple-layout.blade.php b/resources/views/simple-layout.blade.php index eeb4129e0..b87cd37db 100644 --- a/resources/views/simple-layout.blade.php +++ b/resources/views/simple-layout.blade.php @@ -5,13 +5,7 @@ @section('content')
-
-
-
- @yield('toolbar') -
-
-
+ @yield('toolbar')
From 0e395b1e21171ca702bc5b2a4ae32617511ffdc4 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 21 Oct 2018 20:05:11 +0100 Subject: [PATCH 02/59] Started reworking of page-show design - Updated core toolbar & breadcrumb design --- resources/assets/icons/chevron-right.svg | 1 + .../assets/js/components/page-display.js | 2 +- resources/assets/sass/_blocks.scss | 29 ++-------- resources/assets/sass/_grid.scss | 5 +- resources/assets/sass/_header.scss | 57 ++++++++++++------- resources/assets/sass/_html.scss | 9 +-- resources/assets/sass/_pages.scss | 24 +++++++- resources/assets/sass/_variables.scss | 4 +- resources/views/pages/_breadcrumbs.blade.php | 10 ++-- resources/views/pages/show.blade.php | 16 +++--- resources/views/partials/book-tree.blade.php | 2 +- resources/views/public.blade.php | 2 +- resources/views/sidebar-layout.blade.php | 14 ++--- 13 files changed, 93 insertions(+), 82 deletions(-) create mode 100644 resources/assets/icons/chevron-right.svg diff --git a/resources/assets/icons/chevron-right.svg b/resources/assets/icons/chevron-right.svg new file mode 100644 index 000000000..96540b9ea --- /dev/null +++ b/resources/assets/icons/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js index 3fd8fb8ef..cffaf373d 100644 --- a/resources/assets/js/components/page-display.js +++ b/resources/assets/js/components/page-display.js @@ -136,7 +136,7 @@ class PageDisplay { // Fix the tree as a sidebar function stickTree() { - $sidebar.width($bookTreeParent.width() + 15); + $sidebar.width($bookTreeParent.width() - 32); $sidebar.addClass("fixed"); isFixed = true; } diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index a19ca0278..1e4641338 100644 --- a/resources/assets/sass/_blocks.scss +++ b/resources/assets/sass/_blocks.scss @@ -1,29 +1,9 @@ /* -* This file container all block styling including background shading, -* margins, paddings & borders. +* This file container all block styling including margins, paddings & borders. */ -/* -* Background Shading -*/ -.shaded { - background-color: #f1f1f1; - &.pos { - background-color: lighten($positive, 40%); - } - &.neg { - background-color: lighten($negative, 20%); - } - &.primary { - background-color: lighten($primary, 40%); - } - &.secondary { - background-color: lighten($secondary, 30%); - } -} - /* * Padding * TODO - Remove these older styles @@ -193,7 +173,7 @@ .card { background-color: #FFF; - box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1); + box-shadow: $bs-card; border-radius: 3px; padding-bottom: $-xs; h3 { @@ -218,9 +198,12 @@ } .sidebar .card { - h3, .body, .empty-text { + .body, .empty-text { padding: $-s $-m; } + h3 + .body { + padding-top: $-xs; + } } .card.drag-card { diff --git a/resources/assets/sass/_grid.scss b/resources/assets/sass/_grid.scss index f4d155dde..aeb31460b 100644 --- a/resources/assets/sass/_grid.scss +++ b/resources/assets/sass/_grid.scss @@ -63,7 +63,8 @@ body.flexbox { flex: 3; background-color: #FFFFFF; padding: 0 $-l; - border-left: 1px solid #DDD; + box-shadow: $bs-card; + border-radius: 4px; max-width: 100%; } .flex.sidebar .sidebar-toggle { @@ -135,6 +136,7 @@ body.flexbox { position: fixed; top: 0; padding-right: $-m; + padding-top: $-m; width: 30%; left: 0; height: 100%; @@ -958,6 +960,7 @@ div[class^="col-"] img { } @include grid-layout('thirds', 3) +@include grid-layout('halves', 2) @each $sizeLetter, $size in $screen-sizes { @include smaller-than($size) { diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index d42ec8064..3f4841a7f 100644 --- a/resources/assets/sass/_header.scss +++ b/resources/assets/sass/_header.scss @@ -15,6 +15,8 @@ header { color: #fff; fill: #fff; border-bottom: 1px solid #DDD; + box-shadow: $bs-card; + padding: $-xxs 0; .links { display: inline-block; vertical-align: top; @@ -74,13 +76,16 @@ header .search-box { margin-top: 10px; input { background-color: rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.3); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 40px; color: #EEE; z-index: 2; + padding-left: 40px; } button { fill: #EEE; z-index: 1; + left: 16px; svg { margin-right: 0; } @@ -191,10 +196,20 @@ header .search-box { } } -.breadcrumbs span.sep { - color: #aaa; - padding: 0 $-xs; +.breadcrumbs { + display: flex; + flex-direction: row; + align-items: center; } + +.breadcrumbs .separator { + fill: #aaa; + font-size: 1.6em; + line-height: 0.8; + margin: 0 $-xs; + margin-top: -2px; +} + .faded { a, button, span, span > div { color: #666; @@ -222,13 +237,24 @@ header .search-box { background-color: $primary-faded; } -.toolbar-container { - background-color: #FFF; +.toolbar { + position: relative; + > .grid > div { + opacity: 0.8; + transition: opacity ease-in-out 120ms; + &:hover { + opacity: 1; + } + } + .text-button { + color: #666; + fill: #666; + } } -.breadcrumbs .text-button, .action-buttons .text-button { +.action-buttons .text-button { display: inline-block; - padding: $-s; + padding: $-xs $-s; &:last-child { padding-right: 0; } @@ -257,25 +283,12 @@ header .search-box { } @include smaller-than($m) { - .breadcrumbs .text-button, .action-buttons .text-button { + .action-buttons .text-button { padding: $-xs $-xs; } .action-buttons .dropdown-container:last-child a { padding-left: $-xs; } - .breadcrumbs .text-button { - font-size: 0; - } - .breadcrumbs .text-button svg { - font-size: $fs-m; - } - .breadcrumbs a i { - font-size: $fs-m; - padding-right: 0; - } - .breadcrumbs span.sep { - padding: 0 $-xxs; - } .toolbar .col-xs-1:first-child { padding-right: 0; } diff --git a/resources/assets/sass/_html.scss b/resources/assets/sass/_html.scss index 65f05a71d..32756a600 100644 --- a/resources/assets/sass/_html.scss +++ b/resources/assets/sass/_html.scss @@ -3,15 +3,12 @@ } html { - background-color: #FFFFFF; height: 100%; overflow-y: scroll; + background-color: #F2F2F2; &.flexbox { overflow-y: hidden; } - &.shaded { - background-color: #F2F2F2; - } } body { @@ -19,9 +16,7 @@ body { line-height: 1.6; color: #616161; -webkit-font-smoothing: antialiased; - &.shaded { - background-color: #F2F2F2; - } + background-color: #F2F2F2; } button { diff --git a/resources/assets/sass/_pages.scss b/resources/assets/sass/_pages.scss index 2d3a5852d..bb604e188 100755 --- a/resources/assets/sass/_pages.scss +++ b/resources/assets/sass/_pages.scss @@ -41,7 +41,7 @@ margin-top: $-xxl; overflow-wrap: break-word; &.flex { - margin-top: $-m; + margin-top: $-xl; } .align-left { text-align: left; @@ -390,4 +390,26 @@ width: 100%; height: 100%; } +} + +.entity-chip { + display: inline-block; + align-items: center; + justify-content: center; + text-align: center; + font-size: 0.9em; + border-radius: 2em; + position: relative; + overflow: hidden; + padding: $-xs $-m; + &:after { + content: ''; + position: absolute; + background-color: currentColor; + opacity: 0.2; + left: 0; + top: 0; + width: 100%; + height: 100%; + } } \ No newline at end of file diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index e32b2ab2c..ea0fcba5b 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -53,7 +53,7 @@ $primary-faded: rgba(21, 101, 192, 0.15); // Item Colors $color-bookshelf: #af5a5a; $color-book: #009688; -$color-chapter: #ef7c3c; +$color-chapter: #e56236; $color-page: $primary; $color-page-draft: #9A60DA; @@ -64,5 +64,5 @@ $text-light: #EEE; // Shadows $bs-light: 0 0 4px 1px #CCC; $bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26); -$bs-card: 0 1px 3px 1px rgba(76, 76, 76, 0.26), 0 1px 12px 0px rgba(76, 76, 76, 0.2); +$bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1); $bs-hover: 0 2px 2px 1px rgba(0,0,0,.13); \ No newline at end of file diff --git a/resources/views/pages/_breadcrumbs.blade.php b/resources/views/pages/_breadcrumbs.blade.php index 19bab40e0..8bbda0411 100644 --- a/resources/views/pages/_breadcrumbs.blade.php +++ b/resources/views/pages/_breadcrumbs.blade.php @@ -1,14 +1,14 @@
@if (userCan('view', $page->book)) - @icon('book'){{ $page->book->getShortName() }} - » + @icon('book'){{ $page->book->getShortName() }} +
@icon('chevron-right')
@endif @if($page->hasChapter() && userCan('view', $page->chapter)) - + @icon('chapter') {{ $page->chapter->getShortName() }} - » +
@icon('chevron-right')
@endif - @icon('page'){{ $page->getShortName() }} + @icon('page'){{ $page->getShortName() }}
\ No newline at end of file diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php index 0b6aa7d14..06c3529d5 100644 --- a/resources/views/pages/show.blade.php +++ b/resources/views/pages/show.blade.php @@ -1,10 +1,10 @@ @extends('sidebar-layout') @section('toolbar') -
- @include('pages._breadcrumbs', ['page' => $page]) -
-
+
+
+ @include('pages._breadcrumbs', ['page' => $page]) +
@icon('export'){{ trans('entities.export') }}
@@ -49,7 +49,7 @@ @endif @if ($page->attachments->count() > 0) -
+

@icon('attach') {{ trans('entities.pages_attachments') }}

@foreach($page->attachments as $attachment) @@ -62,7 +62,7 @@ @endif @if (isset($pageNav) && count($pageNav)) -
+

@icon('open-book') {{ trans('entities.pages_navigation') }}

@@ -76,7 +76,7 @@
@endif -
+

@icon('info') {{ trans('common.details') }}

@include('partials.entity-meta', ['entity' => $page]) @@ -113,7 +113,7 @@
- @include('partials/book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree]) + @include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree]) @stop diff --git a/resources/views/partials/book-tree.blade.php b/resources/views/partials/book-tree.blade.php index 0f895cf59..b0e5bff64 100644 --- a/resources/views/partials/book-tree.blade.php +++ b/resources/views/partials/book-tree.blade.php @@ -1,4 +1,4 @@ -
+

@icon('book') {{ trans('entities.books_navigation') }}

    diff --git a/resources/views/public.blade.php b/resources/views/public.blade.php index f6135cd1b..54918b19c 100644 --- a/resources/views/public.blade.php +++ b/resources/views/public.blade.php @@ -1,5 +1,5 @@ - + {{ setting('app-name') }} diff --git a/resources/views/sidebar-layout.blade.php b/resources/views/sidebar-layout.blade.php index bf853c09e..9df8ba813 100644 --- a/resources/views/sidebar-layout.blade.php +++ b/resources/views/sidebar-layout.blade.php @@ -4,14 +4,8 @@ @section('content') -
    -
    -
    -
    - @yield('toolbar') -
    -
    -
    +
    + @yield('toolbar')
    @@ -20,12 +14,12 @@
\ No newline at end of file diff --git a/resources/views/partials/breadcrumbs.blade.php b/resources/views/partials/breadcrumbs.blade.php new file mode 100644 index 000000000..e008130da --- /dev/null +++ b/resources/views/partials/breadcrumbs.blade.php @@ -0,0 +1,19 @@ +
+ @if (isset($book) && userCan('view', $book)) + + @icon('book'){{ $book->getShortName() }} + +
@icon('chevron-right')
+ @endif + @if(isset($chapter) && userCan('view', $chapter)) + + @icon('chapter'){{ $chapter->getShortName() }} + +
@icon('chevron-right')
+ @endif + @if(isset($page) && userCan('view', $page)) + + @icon('page'){{ $page->getShortName() }} + + @endif +
\ No newline at end of file diff --git a/resources/views/partials/entity-list-item-basic.blade.php b/resources/views/partials/entity-list-item-basic.blade.php new file mode 100644 index 000000000..020522e23 --- /dev/null +++ b/resources/views/partials/entity-list-item-basic.blade.php @@ -0,0 +1,8 @@ +getType(); ?> + +
@icon($type)
+
+

{{ $entity->name }}

+ {{ $slot ?? '' }} +
+ \ No newline at end of file diff --git a/resources/views/partials/entity-list-item.blade.php b/resources/views/partials/entity-list-item.blade.php index 32d22853f..d971ae0db 100644 --- a/resources/views/partials/entity-list-item.blade.php +++ b/resources/views/partials/entity-list-item.blade.php @@ -1,13 +1,5 @@ -getType(); ?> - -
@icon($type)
-
- -

{{ $entity->name }}

- -
-

{{ $entity->getExcerpt() }}

-
- -
- \ No newline at end of file +@component('partials.entity-list-item-basic', ['entity' => $entity]) +
+

{{ $entity->getExcerpt() }}

+
+@endcomponent \ No newline at end of file From aabd4c04128f738d88a6a6ac756f1554105811df Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 1 Dec 2018 16:29:57 +0000 Subject: [PATCH 05/59] Started looking at the books listing design --- resources/assets/sass/_blocks.scss | 6 +++--- resources/assets/sass/_colors.scss | 4 ++++ resources/assets/sass/_grid.scss | 15 +++++++++++--- resources/assets/sass/_lists.scss | 9 +++++++- resources/assets/sass/_pages.scss | 1 - resources/assets/sass/_text.scss | 6 +++++- resources/assets/sass/_variables.scss | 6 +++--- resources/views/books/index.blade.php | 26 +++++++++++------------- resources/views/books/list.blade.php | 26 ++++++++++++++++-------- resources/views/pages/show.blade.php | 24 ++++++++++++---------- resources/views/sidebar-layout.blade.php | 4 ++-- 11 files changed, 80 insertions(+), 47 deletions(-) diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss index 1e4641338..b000c7ed6 100644 --- 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 044a9498b..d89b26463 100644 --- 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 0ee934b3f..0d0b38aca 100644 --- 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 a979363c0..ef3c59f4d 100644 --- 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 bb604e188..3dfdce8a2 100755 --- 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 900c677ff..43b3e5898 100644 --- 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 ea0fcba5b..229480410 100644 --- 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 84150203f..bed51e7fd 100644 --- a/resources/views/books/index.blade.php +++ b/resources/views/books/index.blade.php @@ -1,12 +1,10 @@ @extends('sidebar-layout') @section('toolbar') -
+
- @include('books/view-toggle', ['booksViewType' => $booksViewType]) + @include('books.view-toggle', ['booksViewType' => $booksViewType])
-
-
@if($currentUser->can('book-create-all')) @icon('add'){{ trans('entities.books_create') }} @@ -17,25 +15,25 @@ @section('sidebar') @if($recents) -
-

@icon('view') {{ trans('entities.recently_viewed') }}

- @include('partials/entity-list', ['entities' => $recents, 'style' => 'compact']) +
+
{{ trans('entities.recently_viewed') }}
+ @include('partials.entity-list', ['entities' => $recents, 'style' => 'compact'])
@endif -