m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-26 11:49:04 +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

42
_src/_includes/footer.html
View File

@ -1,52 +1,52 @@
<footer role="contentinfo" class="footer container">
<div class="row">
<div class="row">
<div class="vcard author">
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div>
<div class="vcard author">
<img class="avatar photo" src="/assets/img/avatar.jpeg" />
<p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
</div>
<aside class="subscribe">
<h1 class="subscribe-title">Subscribe</h1>
<p>
<a class="btn rss" href="http://kremalicious.com/feed">
<svg class="icon icon-entypo icon-entypo-rss">
<svg class="icon icon-entypo icon-entypo-rss">
<use xlink:href="/assets/img/sprite.svg#entypo-rss"></use>
</svg>
</a>
</a>
<a class="btn twitter" href="https://twitter.com/kremaliciouscom">
<svg class="icon icon-entypo icon-entypo-twitter">
<svg class="icon icon-entypo icon-entypo-twitter">
<use xlink:href="/assets/img/sprite.svg#entypo-twitter"></use>
</svg>
</a>
</a>
<a class="btn google" href="https://plus.google.com/100015950464424503954" rel="publisher">
<svg class="icon icon-entypo icon-entypo-google+">
<svg class="icon icon-entypo icon-entypo-google+">
<use xlink:href="/assets/img/sprite.svg#entypo-google+"></use>
</svg>
</a>
</a>
<a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052">
<svg class="icon icon-entypo icon-entypo-facebook">
<svg class="icon icon-entypo icon-entypo-facebook">
<use xlink:href="/assets/img/sprite.svg#entypo-facebook"></use>
</svg>
</a>
</a>
</p>
</aside>
</div>
<section class="footer-copyright" class="row">
</div>
<section class="footer-copyright" class="row">
<p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
<p>
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<a href="https://github.com/kremalicious/kremalicious3">
<svg class="icon icon-entypo icon-entypo-github">
<use xlink:href="/assets/img/sprite.svg#entypo-github"></use>
</svg>
View source
</a>
</p>
View source
</a>
</p>
</section>
</section>
</footer>
<script src="/assets/js/kremalicious3.min.js" async></script>

12
_src/_includes/header.html
View File

@ -3,9 +3,9 @@
<div class="row">
<header role="banner" class="banner">
<h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a>
</h1>
<h1 class="banner-title">
<a class="banner-logo" href="/">kremalicious</a>
</h1>
</header>
<nav role="navigation" class="nav-main">
@ -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>

12
_src/_layouts/base.html
View File

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

14
_src/_layouts/link.html
View File

@ -2,11 +2,11 @@
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>
<h1 class="entry-title">
<header>
<h1 class="entry-title">
<a href="{{ page.linkurl }}" title="Go to source: {{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
{{ page.title | titlecase }}
<svg class="icon icon-entypo icon-entypo-forward">
@ -15,12 +15,12 @@ layout: base
<span class="linkurl">{{ page.linkurl | remove:'http://' | remove:'https://' | remove:'www.' | split:'/' | first }}</span>
</a>
</h1>
</header>
</header>
<section class="entry-content">
{{ content }}
<p>
<a class="more-link" href="{{ page.linkurl }}">Go to source
<p>
<a class="more-link" href="{{ page.linkurl }}">Go to source
<svg class="icon icon-entypo icon-entypo-forward">
<use xlink:href="/assets/img/sprite.svg#entypo-forward"></use>
</svg>
@ -30,7 +30,7 @@ layout: base
<use xlink:href="/assets/img/sprite.svg#entypo-infinity"></use>
</svg>
</a>
</p>
</p>
</section>
{% include entry_meta.html %}

16
_src/_layouts/page.html
View File

@ -2,21 +2,21 @@
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>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>
<header>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>
<section class="entry-content">
{% if page.image %}
{% picture {{ page.image }} class="teaser" %}
{% endif %}
{{ content | condense_spaces }}
</section>
</article>
</section>
</section>

6
_src/_layouts/photo.html
View File

@ -2,17 +2,17 @@
layout: base
---
<section role="main" id="main" class="page-single row">
<section role="main" id="main" class="page-single">
<article class="hentry format-photo">
<figure class="hmedia">
<figure class="hmedia">
{% picture {{ page.image }} %}
<figcaption class="entry-title fn">{{ page.title | titlecase }}</figcaption>
</figure>
</figure>
<section class="entry-content">
{{ content }}

10
_src/_layouts/post.html
View File

@ -2,12 +2,12 @@
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>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>
<header>
<h1 class="entry-title">{{ page.title | titlecase }}</h1>
</header>
<section class="entry-content">
{% if page.image %}
@ -25,4 +25,4 @@ layout: base
</article>
</section>
</section>

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 }}",