From bb46bb500a03fd86bba9d78f84fdfe1a264d3bbd Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 9 Aug 2015 18:15:40 +0200 Subject: [PATCH] fix search --- _src/_assets/js/app.js | 39 ++++++++++++++--------- _src/_assets/styl/search.styl | 58 ++++++++++++++++++++--------------- _src/_includes/footer.html | 42 ++++++++++++------------- _src/_includes/header.html | 12 +++++--- _src/_layouts/archive.html | 2 +- _src/_layouts/base.html | 12 ++------ _src/_layouts/link.html | 14 ++++----- _src/_layouts/page.html | 16 +++++----- _src/_layouts/photo.html | 6 ++-- _src/_layouts/post.html | 10 +++--- _src/search.json | 2 +- 11 files changed, 114 insertions(+), 99 deletions(-) diff --git a/_src/_assets/js/app.js b/_src/_assets/js/app.js index aa121964..7855dd3d 100644 --- a/_src/_assets/js/app.js +++ b/_src/_assets/js/app.js @@ -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: '{title}', - fuzzy: true + searchResultTemplate: '
  • {title}
    • ', + 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(); diff --git a/_src/_assets/styl/search.styl b/_src/_assets/styl/search.styl index cf88a1d7..0c03cb98 100644 --- a/_src/_assets/styl/search.styl +++ b/_src/_assets/styl/search.styl @@ -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 \ No newline at end of file diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html index fe9bf6bd..a35209bc 100644 --- a/_src/_includes/footer.html +++ b/_src/_includes/footer.html @@ -1,52 +1,52 @@ diff --git a/_src/_includes/header.html b/_src/_includes/header.html index 2e60536b..3df0d37f 100644 --- a/_src/_includes/header.html +++ b/_src/_includes/header.html @@ -3,9 +3,9 @@
    + +
    + +
    diff --git a/_src/_layouts/archive.html b/_src/_layouts/archive.html index 8b7b126d..1ec9b233 100644 --- a/_src/_layouts/archive.html +++ b/_src/_layouts/archive.html @@ -2,7 +2,7 @@ layout: base --- -
    +
    {% if page.type == 'category' %}

    {{ page.title }}

    diff --git a/_src/_layouts/base.html b/_src/_layouts/base.html index c376c3b4..3b133a67 100644 --- a/_src/_layouts/base.html +++ b/_src/_layouts/base.html @@ -8,16 +8,10 @@ {% include header.html %}
    - - {{ content }} - -
    - -
    -
    -
    +
    + {{ content }}
    -
    +
    diff --git a/_src/_layouts/link.html b/_src/_layouts/link.html index da8f706b..8af273ae 100644 --- a/_src/_layouts/link.html +++ b/_src/_layouts/link.html @@ -2,11 +2,11 @@ layout: base --- -
    +
    -
    -

    +
    +

    {{ page.title | titlecase }} @@ -15,12 +15,12 @@ layout: base {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}

    -
    +

    {{ content }} -

    - Go to source +

    + Go to source @@ -30,7 +30,7 @@ layout: base -

    +

    {% include entry_meta.html %} diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html index 75273e53..ffcae38e 100644 --- a/_src/_layouts/page.html +++ b/_src/_layouts/page.html @@ -2,21 +2,21 @@ layout: base --- -
    - +
    +
    -
    -

    {{ page.title | titlecase }}

    -
    +
    +

    {{ page.title | titlecase }}

    +
    {% if page.image %} {% picture {{ page.image }} class="teaser" %} {% endif %} - + {{ content | condense_spaces }}
    - +
    -
    \ No newline at end of file +
    diff --git a/_src/_layouts/photo.html b/_src/_layouts/photo.html index b33b6c4a..18ef4950 100644 --- a/_src/_layouts/photo.html +++ b/_src/_layouts/photo.html @@ -2,17 +2,17 @@ layout: base --- -
    +
    -
    +
    {% picture {{ page.image }} %}
    {{ page.title | titlecase }}
    -
    +
    {{ content }} diff --git a/_src/_layouts/post.html b/_src/_layouts/post.html index 038f21b9..a9204dbf 100644 --- a/_src/_layouts/post.html +++ b/_src/_layouts/post.html @@ -2,12 +2,12 @@ layout: base --- -
    +
    -
    -

    {{ page.title | titlecase }}

    -
    +
    +

    {{ page.title | titlecase }}

    +
    {% if page.image %} @@ -25,4 +25,4 @@ layout: base
    -
    \ No newline at end of file +
    diff --git a/_src/search.json b/_src/search.json index 210231e7..83003e82 100644 --- a/_src/search.json +++ b/_src/search.json @@ -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 }}",