From 6ded178dc057c1be5b669c3c37519310cc51d0a5 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Thu, 3 Sep 2015 19:05:45 +0100 Subject: [PATCH] Cleaned styles further and added loading icon to search --- resources/assets/js/global.js | 8 ++++ resources/assets/sass/_animations.scss | 36 ++++++++++++--- resources/assets/sass/_header.scss | 2 +- resources/assets/sass/_lists.scss | 17 ++++--- resources/assets/sass/_variables.scss | 2 +- resources/assets/sass/styles.scss | 35 +++++++++++++++ resources/views/books/list-item.blade.php | 6 ++- resources/views/books/show.blade.php | 44 ++++--------------- resources/views/chapters/list-item.blade.php | 21 +++++++++ resources/views/chapters/show.blade.php | 17 ++----- resources/views/home.blade.php | 1 - resources/views/pages/list-item.blade.php | 10 +++++ .../views/partials/loading-icon.blade.php | 5 +++ resources/views/search/all.blade.php | 38 +++------------- resources/views/search/book.blade.php | 29 +++--------- 15 files changed, 150 insertions(+), 121 deletions(-) create mode 100644 resources/views/chapters/list-item.blade.php create mode 100644 resources/views/pages/list-item.blade.php create mode 100644 resources/views/partials/loading-icon.blade.php diff --git a/resources/assets/js/global.js b/resources/assets/js/global.js index 884727e45..41002f4f5 100644 --- a/resources/assets/js/global.js +++ b/resources/assets/js/global.js @@ -1,5 +1,6 @@ $(function () { + // Notification hiding $('.notification').click(function () { $(this).fadeOut(100); }); @@ -7,4 +8,11 @@ $(function () { // Dropdown toggles $('[data-dropdown]').dropDown(); + // Chapter page list toggles + $('.chapter-toggle').click(function(e) { + e.preventDefault(); + $(this).toggleClass('open'); + $(this).closest('.book-child').find('.inset-list').slideToggle(180); + }); + }); \ No newline at end of file diff --git a/resources/assets/sass/_animations.scss b/resources/assets/sass/_animations.scss index cc1d42be9..f2434b482 100644 --- a/resources/assets/sass/_animations.scss +++ b/resources/assets/sass/_animations.scss @@ -22,7 +22,7 @@ animation-name: searchResult; animation-duration: 220ms; animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(.62,.28,.23,.99); + animation-timing-function: cubic-bezier(.62, .28, .23, .99); } @keyframes searchResult { @@ -60,15 +60,39 @@ } @keyframes menuIn { - from { opacity: 0;transform: scale3d(0, 0, 1);} + from { + opacity: 0; + transform: scale3d(0, 0, 1); + } - to { opacity: 1; transform: scale3d(1, 1, 1);} + to { + opacity: 1; + transform: scale3d(1, 1, 1); + } } .anim.menuIn { - transform-origin: 0% 0%; + transform-origin: 100% 0%; animation-name: menuIn; animation-duration: 120ms; animation-delay: 0s; - animation-timing-function: cubic-bezier(.62,.28,.23,.99); -} \ No newline at end of file + animation-timing-function: cubic-bezier(.62, .28, .23, .99); +} + +@keyframes loadingBob { + 0% { + transform: translate3d(0, 0, 0); + } + 30% { + transform: translate3d(0, 0, 0); + } + 50% { + transform: translate3d(0, -10px, 0); + } + 70% { + transform: translate3d(0, 0, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss index 14a9626ed..b011fe129 100644 --- a/resources/assets/sass/_header.scss +++ b/resources/assets/sass/_header.scss @@ -99,7 +99,7 @@ form.search-box { position: absolute; z-index: 999; top: 0; - left: 0; + right: 0; margin: $-m 0; background-color: #FFFFFF; list-style: none; diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss index 05dadce86..2f75ea342 100644 --- a/resources/assets/sass/_lists.scss +++ b/resources/assets/sass/_lists.scss @@ -20,14 +20,17 @@ hr { margin-top: 0; } - .book-child { + .page, .chapter, .book { padding-left: $-l; - &.page { - border-left: 5px solid $color-page; - } - &.chapter { - border-left: 5px solid $color-chapter; - } + } + .page { + border-left: 5px solid $color-page; + } + .chapter { + border-left: 5px solid $color-chapter; + } + .book { + border-left: 5px solid $color-book; } } .chapter-toggle { diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index b2a88cb51..80277b9a5 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -41,7 +41,7 @@ $negative: #D32F2F; // Item Colors $color-book: #009688; -$color-chapter: #EF6C00; +$color-chapter: #ef7c3c; $color-page: $primary; // Text colours diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss index 350dea5ce..beea1c1b4 100644 --- a/resources/assets/sass/styles.scss +++ b/resources/assets/sass/styles.scss @@ -64,6 +64,41 @@ body.dragging, body.dragging * { } } +// Loading icon +$loadingSize: 10px; +.loading-container { + position: relative; + display: block; + height: $loadingSize; + margin: $-xl auto; + > div { + width: $loadingSize; + height: $loadingSize; + border-radius: $loadingSize; + display: inline-block; + vertical-align: top; + transform: translate3d(0, 0, 0); + animation-name: loadingBob; + animation-duration: 1.4s; + animation-iteration-count: infinite; + animation-timing-function: cubic-bezier(.62, .28, .23, .99); + margin-right: 4px; + background-color: $color-page; + animation-delay: 0.3s; + } + > div:first-child { + left: -($loadingSize+$-xs); + background-color: $color-book; + animation-delay: 0s; + } + > div:last-child { + left: $loadingSize+$-xs; + background-color: $color-chapter; + animation-delay: 0.6s; + } +} + + // Search results .search-results > h3 a { font-size: 0.66em; diff --git a/resources/views/books/list-item.blade.php b/resources/views/books/list-item.blade.php index 64f014331..5807bf461 100644 --- a/resources/views/books/list-item.blade.php +++ b/resources/views/books/list-item.blade.php @@ -1,4 +1,8 @@

{{$book->name}}

-

{{$book->description}}

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

{!! $book->searchSnippet !!}

+ @else +

{{ $book->getExcerpt() }}

+ @endif
\ No newline at end of file diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php index faf352f68..d8001b19a 100644 --- a/resources/views/books/show.blade.php +++ b/resources/views/books/show.blade.php @@ -39,25 +39,11 @@
@if(count($book->children()) > 0) @foreach($book->children() as $childElement) -
-

- - {{ $childElement->name }} - -

-

- {{$childElement->getExcerpt()}} -

- - @if($childElement->isA('chapter') && count($childElement->pages) > 0) -

{{ count($childElement->pages) }} Pages

-
- @foreach($childElement->pages as $page) -

{{$page->name}}

- @endforeach -
- @endif -
+ @if($childElement->isA('chapter')) + @include('chapters/list-item', ['chapter' => $childElement]) + @else + @include('pages/list-item', ['page' => $childElement]) + @endif
@endforeach @else @@ -78,6 +64,9 @@

Search Results Clear Search

+
+ @include('partials/loading-icon') +
@@ -86,7 +75,6 @@
- {{--

Search This Book

--}}
{!! csrf_field() !!} @@ -103,20 +91,6 @@
- - - - - + @stop \ No newline at end of file diff --git a/resources/views/chapters/list-item.blade.php b/resources/views/chapters/list-item.blade.php new file mode 100644 index 000000000..f4673c597 --- /dev/null +++ b/resources/views/chapters/list-item.blade.php @@ -0,0 +1,21 @@ +
+

+ + {{ $chapter->name }} + +

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

{!! $chapter->searchSnippet !!}

+ @else +

{{ $chapter->getExcerpt() }}

+ @endif + + @if(count($chapter->pages) > 0 && !isset($hidePages)) +

{{ count($chapter->pages) }} Pages

+
+ @foreach($chapter->pages as $page) +

{{$page->name}}

+ @endforeach +
+ @endif +
\ No newline at end of file diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php index 82083de9d..60965d0f6 100644 --- a/resources/views/chapters/show.blade.php +++ b/resources/views/chapters/show.blade.php @@ -38,16 +38,7 @@
@foreach($chapter->pages as $page) -
-

- - {{ $page->name }} - -

-

- {{$page->getExcerpt(180)}} -

-
+ @include('pages/list-item', ['page' => $page])
@endforeach
@@ -68,9 +59,9 @@ Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif

- -
- @include('pages/sidebar-tree-list', ['book' => $book]) +
+ @include('pages/sidebar-tree-list', ['book' => $book]) +
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php index b91820fe3..32bfbd028 100644 --- a/resources/views/home.blade.php +++ b/resources/views/home.blade.php @@ -2,7 +2,6 @@ @section('content') -
diff --git a/resources/views/pages/list-item.blade.php b/resources/views/pages/list-item.blade.php new file mode 100644 index 000000000..891a5f7e2 --- /dev/null +++ b/resources/views/pages/list-item.blade.php @@ -0,0 +1,10 @@ +
+

+ {{ $page->name }} +

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

{!! $page->searchSnippet !!}

+ @else +

{{ $page->getExcerpt() }}

+ @endif +
\ No newline at end of file diff --git a/resources/views/partials/loading-icon.blade.php b/resources/views/partials/loading-icon.blade.php new file mode 100644 index 000000000..481d9b349 --- /dev/null +++ b/resources/views/partials/loading-icon.blade.php @@ -0,0 +1,5 @@ +
+
+
+
+
\ No newline at end of file diff --git a/resources/views/search/all.blade.php b/resources/views/search/all.blade.php index 3cb61b761..122366610 100644 --- a/resources/views/search/all.blade.php +++ b/resources/views/search/all.blade.php @@ -13,17 +13,8 @@
@if(count($pages) > 0) @foreach($pages as $page) -
-

- - {{$page->name}} - -

-

- {!! $page->searchSnippet !!} -

-
-
+ @include('pages/list-item', ['page' => $page]) +
@endforeach @else

No pages matched this search

@@ -37,17 +28,8 @@

Matching Books

@foreach($books as $book) -
-

- - {{$book->name}} - -

-

- {!! $book->searchSnippet !!} -

-
-
+ @include('books/list-item', ['book' => $book]) +
@endforeach
@endif @@ -56,17 +38,7 @@

Matching Chapters

@foreach($chapters as $chapter) -
-

- - {{$chapter->name}} - -

-

- {!! $chapter->searchSnippet !!} -

-
-
+ @include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true]) @endforeach
@endif diff --git a/resources/views/search/book.blade.php b/resources/views/search/book.blade.php index 329c3889e..5af2c4d06 100644 --- a/resources/views/search/book.blade.php +++ b/resources/views/search/book.blade.php @@ -1,17 +1,8 @@ -
@if(count($pages) > 0) - @foreach($pages as $page) -
-

- - {{$page->name}} - -

- -

- {!! $page->searchSnippet !!} -

+ @foreach($pages as $pageIndex => $page) +
+ @include('pages/list-item', ['page' => $page])
@endforeach @@ -22,17 +13,9 @@ @if(count($chapters) > 0)
- @foreach($chapters as $chapter) -
-

- - {{$chapter->name}} - -

- -

- {!! $chapter->searchSnippet !!} -

+ @foreach($chapters as $chapterIndex => $chapter) +
+ @include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
@endforeach