Зуев Егор / wiki.dev

Go to a project
Toggle navigation
Toggle navigation pinning
Dan Brown
6ded178d 1 parent d990c3ce

Cleaned styles further and added loading icon to search

Inline Side-by-side
Showing 15 changed files with 150 additions and 121 deletions
1 $(function () { 1 $(function () {
2 2
3 + // Notification hiding
3 $('.notification').click(function () { 4 $('.notification').click(function () {
4 $(this).fadeOut(100); 5 $(this).fadeOut(100);
5 }); 6 });
...@@ -7,4 +8,11 @@ $(function () { ...@@ -7,4 +8,11 @@ $(function () {
7 // Dropdown toggles 8 // Dropdown toggles
8 $('[data-dropdown]').dropDown(); 9 $('[data-dropdown]').dropDown();
9 10
11 + // Chapter page list toggles
12 + $('.chapter-toggle').click(function(e) {
13 + e.preventDefault();
14 + $(this).toggleClass('open');
15 + $(this).closest('.book-child').find('.inset-list').slideToggle(180);
16 + });
17 +
10 }); 18 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 animation-name: searchResult; 22 animation-name: searchResult;
23 animation-duration: 220ms; 23 animation-duration: 220ms;
24 animation-fill-mode: forwards; 24 animation-fill-mode: forwards;
25 - animation-timing-function: cubic-bezier(.62,.28,.23,.99); 25 + animation-timing-function: cubic-bezier(.62, .28, .23, .99);
26 } 26 }
27 27
28 @keyframes searchResult { 28 @keyframes searchResult {
...@@ -60,15 +60,39 @@ ...@@ -60,15 +60,39 @@
60 } 60 }
61 61
62 @keyframes menuIn { 62 @keyframes menuIn {
63 - from { opacity: 0;transform: scale3d(0, 0, 1);} 63 + from {
64 + opacity: 0;
65 + transform: scale3d(0, 0, 1);
66 + }
64 67
65 - to { opacity: 1; transform: scale3d(1, 1, 1);} 68 + to {
69 + opacity: 1;
70 + transform: scale3d(1, 1, 1);
71 + }
66 } 72 }
67 73
68 .anim.menuIn { 74 .anim.menuIn {
69 - transform-origin: 0% 0%; 75 + transform-origin: 100% 0%;
70 animation-name: menuIn; 76 animation-name: menuIn;
71 animation-duration: 120ms; 77 animation-duration: 120ms;
72 animation-delay: 0s; 78 animation-delay: 0s;
73 - animation-timing-function: cubic-bezier(.62,.28,.23,.99);
74 -}
...\ No newline at end of file ...\ No newline at end of file
79 + animation-timing-function: cubic-bezier(.62, .28, .23, .99);
80 +}
81 +
82 +@keyframes loadingBob {
83 + 0% {
84 + transform: translate3d(0, 0, 0);
85 + }
86 + 30% {
87 + transform: translate3d(0, 0, 0);
88 + }
89 + 50% {
90 + transform: translate3d(0, -10px, 0);
91 + }
92 + 70% {
93 + transform: translate3d(0, 0, 0);
94 + }
95 + 100% {
96 + transform: translate3d(0, 0, 0);
97 + }
98 +}
......
...@@ -99,7 +99,7 @@ form.search-box { ...@@ -99,7 +99,7 @@ form.search-box {
99 position: absolute; 99 position: absolute;
100 z-index: 999; 100 z-index: 999;
101 top: 0; 101 top: 0;
102 - left: 0; 102 + right: 0;
103 margin: $-m 0; 103 margin: $-m 0;
104 background-color: #FFFFFF; 104 background-color: #FFFFFF;
105 list-style: none; 105 list-style: none;
......
...@@ -20,14 +20,17 @@ ...@@ -20,14 +20,17 @@
20 hr { 20 hr {
21 margin-top: 0; 21 margin-top: 0;
22 } 22 }
23 - .book-child { 23 + .page, .chapter, .book {
24 padding-left: $-l; 24 padding-left: $-l;
25 - &.page { 25 + }
26 - border-left: 5px solid $color-page; 26 + .page {
27 - } 27 + border-left: 5px solid $color-page;
28 - &.chapter { 28 + }
29 - border-left: 5px solid $color-chapter; 29 + .chapter {
30 - } 30 + border-left: 5px solid $color-chapter;
31 + }
32 + .book {
33 + border-left: 5px solid $color-book;
31 } 34 }
32 } 35 }
33 .chapter-toggle { 36 .chapter-toggle {
......
...@@ -41,7 +41,7 @@ $negative: #D32F2F; ...@@ -41,7 +41,7 @@ $negative: #D32F2F;
41 41
42 // Item Colors 42 // Item Colors
43 $color-book: #009688; 43 $color-book: #009688;
44 -$color-chapter: #EF6C00; 44 +$color-chapter: #ef7c3c;
45 $color-page: $primary; 45 $color-page: $primary;
46 46
47 // Text colours 47 // Text colours
......
...@@ -64,6 +64,41 @@ body.dragging, body.dragging * { ...@@ -64,6 +64,41 @@ body.dragging, body.dragging * {
64 } 64 }
65 } 65 }
66 66
67 +// Loading icon
68 +$loadingSize: 10px;
69 +.loading-container {
70 + position: relative;
71 + display: block;
72 + height: $loadingSize;
73 + margin: $-xl auto;
74 + > div {
75 + width: $loadingSize;
76 + height: $loadingSize;
77 + border-radius: $loadingSize;
78 + display: inline-block;
79 + vertical-align: top;
80 + transform: translate3d(0, 0, 0);
81 + animation-name: loadingBob;
82 + animation-duration: 1.4s;
83 + animation-iteration-count: infinite;
84 + animation-timing-function: cubic-bezier(.62, .28, .23, .99);
85 + margin-right: 4px;
86 + background-color: $color-page;
87 + animation-delay: 0.3s;
88 + }
89 + > div:first-child {
90 + left: -($loadingSize+$-xs);
91 + background-color: $color-book;
92 + animation-delay: 0s;
93 + }
94 + > div:last-child {
95 + left: $loadingSize+$-xs;
96 + background-color: $color-chapter;
97 + animation-delay: 0.6s;
98 + }
99 +}
100 +
101 +
67 // Search results 102 // Search results
68 .search-results > h3 a { 103 .search-results > h3 a {
69 font-size: 0.66em; 104 font-size: 0.66em;
......
1 <div class="book"> 1 <div class="book">
2 <h3 class="text-book"><a class="text-book" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></h3> 2 <h3 class="text-book"><a class="text-book" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></h3>
3 - <p class="text-muted">{{$book->description}}</p> 3 + @if(isset($book->searchSnippet))
4 + <p class="text-muted">{!! $book->searchSnippet !!}</p>
5 + @else
6 + <p class="text-muted">{{ $book->getExcerpt() }}</p>
7 + @endif
4 </div> 8 </div>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -39,25 +39,11 @@ ...@@ -39,25 +39,11 @@
39 <hr> 39 <hr>
40 @if(count($book->children()) > 0) 40 @if(count($book->children()) > 0)
41 @foreach($book->children() as $childElement) 41 @foreach($book->children() as $childElement)
42 - <div class="book-child {{ $childElement->getName() }}"> 42 + @if($childElement->isA('chapter'))
43 - <h3> 43 + @include('chapters/list-item', ['chapter' => $childElement])
44 - <a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}"> 44 + @else
45 - <i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $childElement->name }} 45 + @include('pages/list-item', ['page' => $childElement])
46 - </a> 46 + @endif
47 - </h3>
48 - <p class="text-muted">
49 - {{$childElement->getExcerpt()}}
50 - </p>
51 -
52 - @if($childElement->isA('chapter') && count($childElement->pages) > 0)
53 - <p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($childElement->pages) }} Pages</p>
54 - <div class="inset-list">
55 - @foreach($childElement->pages as $page)
56 - <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
57 - @endforeach
58 - </div>
59 - @endif
60 - </div>
61 <hr> 47 <hr>
62 @endforeach 48 @endforeach
63 @else 49 @else
...@@ -78,6 +64,9 @@ ...@@ -78,6 +64,9 @@
78 </div> 64 </div>
79 <div class="search-results" v-if="searching"> 65 <div class="search-results" v-if="searching">
80 <h3 class="text-muted">Search Results <a v-if="searching" v-on="click: clearSearch" class="text-small"><i class="zmdi zmdi-close"></i>Clear Search</a></h3> 66 <h3 class="text-muted">Search Results <a v-if="searching" v-on="click: clearSearch" class="text-small"><i class="zmdi zmdi-close"></i>Clear Search</a></h3>
67 + <div v-if="!searchResults">
68 + @include('partials/loading-icon')
69 + </div>
81 <div v-html="searchResults"></div> 70 <div v-html="searchResults"></div>
82 </div> 71 </div>
83 72
...@@ -86,7 +75,6 @@ ...@@ -86,7 +75,6 @@
86 75
87 <div class="col-md-4 col-md-offset-1"> 76 <div class="col-md-4 col-md-offset-1">
88 <div class="margin-top large"></div> 77 <div class="margin-top large"></div>
89 - {{--<h3>Search This Book</h3>--}}
90 <div class="search-box"> 78 <div class="search-box">
91 <form v-on="submit: searchBook, input: checkSearchForm" v-el="form" action="/search/book/{{ $book->id }}"> 79 <form v-on="submit: searchBook, input: checkSearchForm" v-el="form" action="/search/book/{{ $book->id }}">
92 {!! csrf_field() !!} 80 {!! csrf_field() !!}
...@@ -103,20 +91,6 @@ ...@@ -103,20 +91,6 @@
103 </div> 91 </div>
104 </div> 92 </div>
105 93
106 - 94 + <script src="/js/book-dashboard.js"></script>
107 -
108 - <script>
109 - $(function() {
110 -
111 - $('.chapter-toggle').click(function(e) {
112 - e.preventDefault();
113 - $(this).toggleClass('open');
114 - $(this).closest('.book-child').find('.inset-list').slideToggle(180);
115 - });
116 -
117 - });
118 - </script>
119 -
120 - <script src="/js/book-sidebar.js"></script>
121 95
122 @stop 96 @stop
...\ No newline at end of file ...\ No newline at end of file
......
1 +<div class="chapter">
2 + <h3>
3 + <a href="{{ $chapter->getUrl() }}" class="text-chapter">
4 + <i class="zmdi zmdi-collection-bookmark"></i>{{ $chapter->name }}
5 + </a>
6 + </h3>
7 + @if(isset($chapter->searchSnippet))
8 + <p class="text-muted">{!! $chapter->searchSnippet !!}</p>
9 + @else
10 + <p class="text-muted">{{ $chapter->getExcerpt() }}</p>
11 + @endif
12 +
13 + @if(count($chapter->pages) > 0 && !isset($hidePages))
14 + <p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($chapter->pages) }} Pages</p>
15 + <div class="inset-list">
16 + @foreach($chapter->pages as $page)
17 + <h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
18 + @endforeach
19 + </div>
20 + @endif
21 +</div>
...\ No newline at end of file ...\ No newline at end of file
...@@ -38,16 +38,7 @@ ...@@ -38,16 +38,7 @@
38 <div class="page-list"> 38 <div class="page-list">
39 <hr> 39 <hr>
40 @foreach($chapter->pages as $page) 40 @foreach($chapter->pages as $page)
41 - <div > 41 + @include('pages/list-item', ['page' => $page])
42 - <h3>
43 - <a href="{{ $page->getUrl() }}">
44 - <i class="zmdi zmdi-file-text"></i>{{ $page->name }}
45 - </a>
46 - </h3>
47 - <p class="text-muted">
48 - {{$page->getExcerpt(180)}}
49 - </p>
50 - </div>
51 <hr> 42 <hr>
52 @endforeach 43 @endforeach
53 </div> 44 </div>
...@@ -68,9 +59,9 @@ ...@@ -68,9 +59,9 @@
68 Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif 59 Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
69 </p> 60 </p>
70 </div> 61 </div>
71 - </div> 62 + <div class="col-md-3 col-md-offset-1">
72 - <div class="col-md-3 col-md-offset-1"> 63 + @include('pages/sidebar-tree-list', ['book' => $book])
73 - @include('pages/sidebar-tree-list', ['book' => $book]) 64 + </div>
74 </div> 65 </div>
75 </div> 66 </div>
76 67
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
2 2
3 @section('content') 3 @section('content')
4 4
5 -
6 <div class="container"> 5 <div class="container">
7 <div class="row"> 6 <div class="row">
8 <div class="col-md-7"> 7 <div class="col-md-7">
......
1 +<div class="page">
2 + <h3>
3 + <a href="{{ $page->getUrl() }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ $page->name }}</a>
4 + </h3>
5 + @if(isset($page->searchSnippet))
6 + <p class="text-muted">{!! $page->searchSnippet !!}</p>
7 + @else
8 + <p class="text-muted">{{ $page->getExcerpt() }}</p>
9 + @endif
10 +</div>
...\ No newline at end of file ...\ No newline at end of file
1 +<div class="loading-container">
2 + <div></div>
3 + <div></div>
4 + <div></div>
5 +</div>
...\ No newline at end of file ...\ No newline at end of file
...@@ -13,17 +13,8 @@ ...@@ -13,17 +13,8 @@
13 <div class="page-list"> 13 <div class="page-list">
14 @if(count($pages) > 0) 14 @if(count($pages) > 0)
15 @foreach($pages as $page) 15 @foreach($pages as $page)
16 - <div class="book-child"> 16 + @include('pages/list-item', ['page' => $page])
17 - <h3> 17 + <hr>
18 - <a href="{{$page->getUrl() . '#' . $searchTerm}}" class="page">
19 - <i class="zmdi zmdi-file-text"></i>{{$page->name}}
20 - </a>
21 - </h3>
22 - <p class="text-muted">
23 - {!! $page->searchSnippet !!}
24 - </p>
25 - <hr>
26 - </div>
27 @endforeach 18 @endforeach
28 @else 19 @else
29 <p class="text-muted">No pages matched this search</p> 20 <p class="text-muted">No pages matched this search</p>
...@@ -37,17 +28,8 @@ ...@@ -37,17 +28,8 @@
37 <h3>Matching Books</h3> 28 <h3>Matching Books</h3>
38 <div class="page-list"> 29 <div class="page-list">
39 @foreach($books as $book) 30 @foreach($books as $book)
40 - <div class="book-child"> 31 + @include('books/list-item', ['book' => $book])
41 - <h3> 32 + <hr>
42 - <a href="{{$book->getUrl()}}" class="text-book">
43 - <i class="zmdi zmdi-book"></i>{{$book->name}}
44 - </a>
45 - </h3>
46 - <p class="text-muted">
47 - {!! $book->searchSnippet !!}
48 - </p>
49 - <hr>
50 - </div>
51 @endforeach 33 @endforeach
52 </div> 34 </div>
53 @endif 35 @endif
...@@ -56,17 +38,7 @@ ...@@ -56,17 +38,7 @@
56 <h3>Matching Chapters</h3> 38 <h3>Matching Chapters</h3>
57 <div class="page-list"> 39 <div class="page-list">
58 @foreach($chapters as $chapter) 40 @foreach($chapters as $chapter)
59 - <div class="book-child"> 41 + @include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
60 - <h3>
61 - <a href="{{$chapter->getUrl()}}" class="text-chapter">
62 - <i class="zmdi zmdi-collection-bookmark"></i>{{$chapter->name}}
63 - </a>
64 - </h3>
65 - <p class="text-muted">
66 - {!! $chapter->searchSnippet !!}
67 - </p>
68 - <hr>
69 - </div>
70 @endforeach 42 @endforeach
71 </div> 43 </div>
72 @endif 44 @endif
......
1 -
2 <div class="page-list"> 1 <div class="page-list">
3 @if(count($pages) > 0) 2 @if(count($pages) > 0)
4 - @foreach($pages as $page) 3 + @foreach($pages as $pageIndex => $page)
5 - <div class="book-child anim searchResult"> 4 + <div class="anim searchResult" style="animation-delay: {{$pageIndex*50 . 'ms'}};">
6 - <h3> 5 + @include('pages/list-item', ['page' => $page])
7 - <a href="{{$page->getUrl() . '#' . $searchTerm}}" class="page">
8 - <i class="zmdi zmdi-file-text"></i>{{$page->name}}
9 - </a>
10 - </h3>
11 -
12 - <p class="text-muted">
13 - {!! $page->searchSnippet !!}
14 - </p>
15 <hr> 6 <hr>
16 </div> 7 </div>
17 @endforeach 8 @endforeach
...@@ -22,17 +13,9 @@ ...@@ -22,17 +13,9 @@
22 13
23 @if(count($chapters) > 0) 14 @if(count($chapters) > 0)
24 <div class="page-list"> 15 <div class="page-list">
25 - @foreach($chapters as $chapter) 16 + @foreach($chapters as $chapterIndex => $chapter)
26 - <div class="book-child anim searchResult"> 17 + <div class="anim searchResult" style="animation-delay: {{($chapterIndex+count($pages))*50 . 'ms'}};">
27 - <h3> 18 + @include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
28 - <a href="{{$chapter->getUrl()}}" class="text-chapter">
29 - <i class="zmdi zmdi-collection-bookmark"></i>{{$chapter->name}}
30 - </a>
31 - </h3>
32 -
33 - <p class="text-muted">
34 - {!! $chapter->searchSnippet !!}
35 - </p>
36 <hr> 19 <hr>
37 </div> 20 </div>
38 @endforeach 21 @endforeach
......