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->description}}
+ @if(isset($book->searchSnippet)) +{!! $book->searchSnippet !!}
+ @else +{{ $book->getExcerpt() }}
+ @endif- {{$childElement->getExcerpt()}} -
- - @if($childElement->isA('chapter') && count($childElement->pages) > 0) -{{ count($childElement->pages) }} Pages
-{!! $chapter->searchSnippet !!}
+ @else +{{ $chapter->getExcerpt() }}
+ @endif + + @if(count($chapter->pages) > 0 && !isset($hidePages)) +{{ count($chapter->pages) }} Pages
+- {{$page->getExcerpt(180)}} -
-{!! $page->searchSnippet !!}
+ @else +{{ $page->getExcerpt() }}
+ @endif +No pages matched this search
@@ -37,17 +28,8 @@- {!! $page->searchSnippet !!} -
+ @foreach($pages as $pageIndex => $page) +- {!! $chapter->searchSnippet !!} -
+ @foreach($chapters as $chapterIndex => $chapter) +