From: Dan Brown Date: Sun, 21 Oct 2018 19:05:11 +0000 (+0100) Subject: Started reworking of page-show design X-Git-Tag: v0.26.0~1^2~23^2~63 X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/0e395b1e21171ca702bc5b2a4ae32617511ffdc4 Started reworking of page-show design - Updated core toolbar & breadcrumb design --- 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 @@