mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-13 16:45:14 +01:00
fix search
This commit is contained in:
parent
6c53f21d6d
commit
bb46bb500a
@ -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();
|
||||
|
@ -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
|
@ -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 & 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 & 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 – {{ 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>
|
||||
|
@ -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">×</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,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>
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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 %}
|
||||
|
@ -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>
|
||||
|
@ -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 }}
|
||||
|
@ -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>
|
||||
|
@ -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 }}",
|
||||
|
Loading…
Reference in New Issue
Block a user