m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-14 09:05:17 +01:00
Code

fix search

Browse Source
This commit is contained in:
Matthias Kretschmann 2015-08-09 18:15:40 +02:00
parent 6c53f21d6d
commit bb46bb500a
11 changed files with 114 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
_src/_assets/js/app.js
View File

@ -15,27 +15,39 @@ var siteNavigation = {
siteSearch: function() {
var $searchlink = $('.search-btn'),
var $content = $('.content'),
$searchlink = $('.search-btn'),
$searcharea = $('.topbar .search-area'),
$searchfield = $('.search-field'),
$searchresults = $('.search-results'),
$searchpop = $('.popover');
$searchfield = $('#search-input'),
$searchresults = $('#search-results'),
$searchpop = $('#search-popover');
// revert all search elements
function hideSearch() {
$searcharea.removeClass('slideDown').addClass('bounceOutUp');
$searchpop.addClass('hide');
$content.removeClass('search-open-blur');
}
$searchlink.click(function(e) {
e.preventDefault()
// init jekyll search
SimpleJekyllSearch({
searchInput: $searchfield,
resultsContainer: $searchresults,
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'),
json: '/search.json',
searchResultTemplate: '<a class="search-link" href="{url}" title="{title}">{title}</a>',
fuzzy: true
searchResultTemplate: '<li><a class="search-link" href="{url}">{title}</a></li>',
fuzzy: false
})
// show search
// show search field
$searcharea.removeClass('ready bounceOutUp').addClass('ready slideDown');
$searchfield.focus();
// blur the content
$content.addClass('search-open-blur');
// show search results upon typing
if ($searchfield.val().length) {
$searchpop.removeClass('hide');
}
@ -47,8 +59,7 @@ var siteNavigation = {
// bind the hide controls
$(document).bind('click.hidethepop', function() {
$searcharea.removeClass('slideDown');
$searchpop.addClass('hide');
hideSearch();
// unbind the hide controls
$(document).unbind('click.hidethepop');
@ -76,9 +87,7 @@ var siteNavigation = {
$('.search-close').click(function(e) {
e.preventDefault();
// hide search area
$searcharea.removeClass('slideDown').addClass('bounceOutUp');
$searchpop.addClass('hide');
hideSearch();
// empty search field
$searchfield.val('').blur();

58
_src/_assets/styl/search.styl
View File

@ -4,6 +4,10 @@
// Search
//
&.search-open-blur
@extend .transition
filter: blur(10px)
.search-btn
right: 50px
padding: .65em .85em
@ -11,10 +15,6 @@
.site-search
margin-right: 4%
.nav-popover
left: 0
width: 100%
.search-close
position: absolute
right: 32px
@ -39,40 +39,48 @@
display: block
.search-results
@extend .clearfix
@extend .list-unstyled, .textcenter
@media $breakpoint2
display: flex
flex-wrap: wrap
margin-top: ($line-height-computed/2)
margin-bottom: ($line-height-computed/2)
> li
padding: 0
margin: 0
@media $breakpoint2
flex: 0 0 49%
display: flex
align-items: center
align-content: stretch
p
margin-bottom: 0
.search-link
@extend .h6
padding: .5em 1em
margin: 0
padding: 15px
display: block
margin-top: 0
margin-bottom: ($line-height-computed/2)
width: 100%
&:active
color: #fff
.search-results > li:nth-child(9) &,
.search-results > li:last-child &
border: none
&:before
display: none
@media $breakpoint2
width: 50%
float: left
&:nth-child(odd)
clear: both
.popover
.search-popover
position: absolute
left: 0
top: 71px
z-index: 6
width: 100%
padding-top: ($line-height-computed/2)
background: lighten($page-bg, 3%)
border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px rgba($brand-dark, .1)
box-shadow: 0 1px 4px alpha($brand-dark, .1)
@media $breakpoint2
top: 0
.row
margin-top: $line-height-computed
margin-bottom: $line-height-computed

6
_src/_includes/header.html
View File

@ -32,10 +32,14 @@
</svg>
</button>
<div class="search-area">
<input type="search" class="form-control input-search search-field" placeholder="Search everything">
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
<button class="close search-close">&times;</button>
</div>
</section>
</div>
</div>
<div id="search-popover" class="search-popover container hide">
<ul id="search-results" class="search-results row"></ul>
</div>

2
_src/_layouts/archive.html
View File

@ -2,7 +2,7 @@
layout: base
---
<section role="main" id="main" class="row">
<section role="main" id="main">
{% if page.type == 'category' %}
<h1 class="page-title">{{ page.title }}</h1>

10
_src/_layouts/base.html
View File

@ -8,17 +8,11 @@
{% include header.html %}
<section role="document" class="document container">
<div class="content row">
{{ content }}
</div>
</section>
<div class="popover container hide">
<div class="row">
<div class="search-results"></div>
</div>
</div>
</body>
{% include footer.html %}

2
_src/_layouts/link.html
View File

@ -2,7 +2,7 @@
layout: base
---
<section role="main" id="main" class="page-single row">
<section role="main" id="main" class="page-single">
<article class="hentry format-link">
<header>

2
_src/_layouts/page.html
View File

@ -2,7 +2,7 @@
layout: base
---
<section role="main" id="main" class="page-single row">
<section role="main" id="main" class="page-single">
<article class="hentry format-page">
<header>

2
_src/_layouts/photo.html
View File

@ -2,7 +2,7 @@
layout: base
---
<section role="main" id="main" class="page-single row">
<section role="main" id="main" class="page-single">
<article class="hentry format-photo">

2
_src/_layouts/post.html
View File

@ -2,7 +2,7 @@
layout: base
---
<section role="main" id="main" class="page-single row">
<section role="main" id="main" class="page-single">
<article class="hentry format-post">
<header>

2
_src/search.json
View File

@ -4,7 +4,7 @@ layout: null
[
{% for post in site.posts %}
{
"title" : "{{ post.title | strip_html | strip_newlines | escape | titlecase }}",
"title" : "{{ post.title | strip_html | strip_newlines | titlecase }}",
"category" : "{{ post.categories | join: ', ' }}",
"tag" : "{{ post.tags | join: ', ' }}",
"url" : "{{ site.url }}{{ post.url }}",