Зуев Егор / 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 140 additions and 111 deletions
$(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
......
......@@ -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);
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);
}
}
......
......@@ -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;
......
......@@ -20,14 +20,17 @@
hr {
margin-top: 0;
}
.book-child {
.page, .chapter, .book {
padding-left: $-l;
&.page {
}
.page {
border-left: 5px solid $color-page;
}
&.chapter {
.chapter {
border-left: 5px solid $color-chapter;
}
.book {
border-left: 5px solid $color-book;
}
}
.chapter-toggle {
......
......@@ -41,7 +41,7 @@ $negative: #D32F2F;
// Item Colors
$color-book: #009688;
$color-chapter: #EF6C00;
$color-chapter: #ef7c3c;
$color-page: $primary;
// Text colours
......
......@@ -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;
......
<div class="book">
<h3 class="text-book"><a class="text-book" href="{{$book->getUrl()}}"><i class="zmdi zmdi-book"></i>{{$book->name}}</a></h3>
<p class="text-muted">{{$book->description}}</p>
@if(isset($book->searchSnippet))
<p class="text-muted">{!! $book->searchSnippet !!}</p>
@else
<p class="text-muted">{{ $book->getExcerpt() }}</p>
@endif
</div>
\ No newline at end of file
......
......@@ -39,25 +39,11 @@
<hr>
@if(count($book->children()) > 0)
@foreach($book->children() as $childElement)
<div class="book-child {{ $childElement->getName() }}">
<h3>
<a href="{{ $childElement->getUrl() }}" class="{{ $childElement->getName() }}">
<i class="zmdi {{ $childElement->isA('chapter') ? 'zmdi-collection-bookmark':'zmdi-file-text'}}"></i>{{ $childElement->name }}
</a>
</h3>
<p class="text-muted">
{{$childElement->getExcerpt()}}
</p>
@if($childElement->isA('chapter') && count($childElement->pages) > 0)
<p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($childElement->pages) }} Pages</p>
<div class="inset-list">
@foreach($childElement->pages as $page)
<h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
@endforeach
</div>
@if($childElement->isA('chapter'))
@include('chapters/list-item', ['chapter' => $childElement])
@else
@include('pages/list-item', ['page' => $childElement])
@endif
</div>
<hr>
@endforeach
@else
......@@ -78,6 +64,9 @@
</div>
<div class="search-results" v-if="searching">
<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>
<div v-if="!searchResults">
@include('partials/loading-icon')
</div>
<div v-html="searchResults"></div>
</div>
......@@ -86,7 +75,6 @@
<div class="col-md-4 col-md-offset-1">
<div class="margin-top large"></div>
{{--<h3>Search This Book</h3>--}}
<div class="search-box">
<form v-on="submit: searchBook, input: checkSearchForm" v-el="form" action="/search/book/{{ $book->id }}">
{!! csrf_field() !!}
......@@ -103,20 +91,6 @@
</div>
</div>
<script>
$(function() {
$('.chapter-toggle').click(function(e) {
e.preventDefault();
$(this).toggleClass('open');
$(this).closest('.book-child').find('.inset-list').slideToggle(180);
});
});
</script>
<script src="/js/book-sidebar.js"></script>
<script src="/js/book-dashboard.js"></script>
@stop
\ No newline at end of file
......
<div class="chapter">
<h3>
<a href="{{ $chapter->getUrl() }}" class="text-chapter">
<i class="zmdi zmdi-collection-bookmark"></i>{{ $chapter->name }}
</a>
</h3>
@if(isset($chapter->searchSnippet))
<p class="text-muted">{!! $chapter->searchSnippet !!}</p>
@else
<p class="text-muted">{{ $chapter->getExcerpt() }}</p>
@endif
@if(count($chapter->pages) > 0 && !isset($hidePages))
<p class="text-muted chapter-toggle open"><i class="zmdi zmdi-caret-right"></i> {{ count($chapter->pages) }} Pages</p>
<div class="inset-list">
@foreach($chapter->pages as $page)
<h4><a href="{{$page->getUrl()}}"><i class="zmdi zmdi-file-text"></i>{{$page->name}}</a></h4>
@endforeach
</div>
@endif
</div>
\ No newline at end of file
......@@ -38,16 +38,7 @@
<div class="page-list">
<hr>
@foreach($chapter->pages as $page)
<div >
<h3>
<a href="{{ $page->getUrl() }}">
<i class="zmdi zmdi-file-text"></i>{{ $page->name }}
</a>
</h3>
<p class="text-muted">
{{$page->getExcerpt(180)}}
</p>
</div>
@include('pages/list-item', ['page' => $page])
<hr>
@endforeach
</div>
......@@ -68,11 +59,11 @@
Last Updated {{$chapter->updated_at->diffForHumans()}} @if($chapter->createdBy) by {{$chapter->updatedBy->name}} @endif
</p>
</div>
</div>
<div class="col-md-3 col-md-offset-1">
@include('pages/sidebar-tree-list', ['book' => $book])
</div>
</div>
</div>
......
......@@ -2,7 +2,6 @@
@section('content')
<div class="container">
<div class="row">
<div class="col-md-7">
......
<div class="page">
<h3>
<a href="{{ $page->getUrl() }}" class="text-page"><i class="zmdi zmdi-file-text"></i>{{ $page->name }}</a>
</h3>
@if(isset($page->searchSnippet))
<p class="text-muted">{!! $page->searchSnippet !!}</p>
@else
<p class="text-muted">{{ $page->getExcerpt() }}</p>
@endif
</div>
\ No newline at end of file
<div class="loading-container">
<div></div>
<div></div>
<div></div>
</div>
\ No newline at end of file
......@@ -13,17 +13,8 @@
<div class="page-list">
@if(count($pages) > 0)
@foreach($pages as $page)
<div class="book-child">
<h3>
<a href="{{$page->getUrl() . '#' . $searchTerm}}" class="page">
<i class="zmdi zmdi-file-text"></i>{{$page->name}}
</a>
</h3>
<p class="text-muted">
{!! $page->searchSnippet !!}
</p>
@include('pages/list-item', ['page' => $page])
<hr>
</div>
@endforeach
@else
<p class="text-muted">No pages matched this search</p>
......@@ -37,17 +28,8 @@
<h3>Matching Books</h3>
<div class="page-list">
@foreach($books as $book)
<div class="book-child">
<h3>
<a href="{{$book->getUrl()}}" class="text-book">
<i class="zmdi zmdi-book"></i>{{$book->name}}
</a>
</h3>
<p class="text-muted">
{!! $book->searchSnippet !!}
</p>
@include('books/list-item', ['book' => $book])
<hr>
</div>
@endforeach
</div>
@endif
......@@ -56,17 +38,7 @@
<h3>Matching Chapters</h3>
<div class="page-list">
@foreach($chapters as $chapter)
<div class="book-child">
<h3>
<a href="{{$chapter->getUrl()}}" class="text-chapter">
<i class="zmdi zmdi-collection-bookmark"></i>{{$chapter->name}}
</a>
</h3>
<p class="text-muted">
{!! $chapter->searchSnippet !!}
</p>
<hr>
</div>
@include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
@endforeach
</div>
@endif
......
<div class="page-list">
@if(count($pages) > 0)
@foreach($pages as $page)
<div class="book-child anim searchResult">
<h3>
<a href="{{$page->getUrl() . '#' . $searchTerm}}" class="page">
<i class="zmdi zmdi-file-text"></i>{{$page->name}}
</a>
</h3>
<p class="text-muted">
{!! $page->searchSnippet !!}
</p>
@foreach($pages as $pageIndex => $page)
<div class="anim searchResult" style="animation-delay: {{$pageIndex*50 . 'ms'}};">
@include('pages/list-item', ['page' => $page])
<hr>
</div>
@endforeach
......@@ -22,17 +13,9 @@
@if(count($chapters) > 0)
<div class="page-list">
@foreach($chapters as $chapter)
<div class="book-child anim searchResult">
<h3>
<a href="{{$chapter->getUrl()}}" class="text-chapter">
<i class="zmdi zmdi-collection-bookmark"></i>{{$chapter->name}}
</a>
</h3>
<p class="text-muted">
{!! $chapter->searchSnippet !!}
</p>
@foreach($chapters as $chapterIndex => $chapter)
<div class="anim searchResult" style="animation-delay: {{($chapterIndex+count($pages))*50 . 'ms'}};">
@include('chapters/list-item', ['chapter' => $chapter, 'hidePages' => true])
<hr>
</div>
@endforeach
......