mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-23 01:30:01 +01:00
final menu, final search
This commit is contained in:
parent
81adb766b5
commit
cee2868c24
@ -24,7 +24,6 @@
|
||||
<div class="search-area">
|
||||
<input type="search" class="input-search search-field" placeholder="Search everything">
|
||||
<a class="search-close close" href="#">x</a>
|
||||
<div class="search-results nav-popover"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
@ -12,7 +12,13 @@
|
||||
{{ content }}
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<div class="popover container hide">
|
||||
<div class="row">
|
||||
<div class="search-results"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
{% include footer.html %}
|
@ -17,10 +17,10 @@ var siteNavigation = {
|
||||
siteSearch: function() {
|
||||
|
||||
var $searchlink = $('.search-btn'),
|
||||
$searchpop = $('.search-area'),
|
||||
$searcharea = $('.search-area'),
|
||||
$searchfield = $('.search-field'),
|
||||
$searchresults = $('.search-results'),
|
||||
$navpop = $('.nav-main .nav-popover');
|
||||
$searchpop = $('.popover');
|
||||
|
||||
// init jekyll search
|
||||
$searchfield.simpleJekyllSearch({
|
||||
@ -33,9 +33,11 @@ var siteNavigation = {
|
||||
e.preventDefault();
|
||||
|
||||
// show search
|
||||
$searchpop.addClass('ready');
|
||||
$searcharea.addClass('ready');
|
||||
$searchfield.focus();
|
||||
$searchresults.removeClass('hide');
|
||||
if ( $searchfield.val().length ) {
|
||||
$searchpop.removeClass('hide');
|
||||
}
|
||||
|
||||
// hide menu too just in case
|
||||
if ( $('body').hasClass('menu-open') ) {
|
||||
@ -44,8 +46,8 @@ var siteNavigation = {
|
||||
|
||||
// bind the hide controls
|
||||
$(document).bind('click.hidethepop', function() {
|
||||
$searchpop.removeClass('ready');
|
||||
$searchresults.addClass('hide');
|
||||
$searcharea.removeClass('ready');
|
||||
$searchpop.addClass('hide');
|
||||
|
||||
// unbind the hide controls
|
||||
$(document).unbind('click.hidethepop');
|
||||
@ -60,12 +62,18 @@ var siteNavigation = {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// finally show popup upon first keypress
|
||||
$searchfield.on('keyup', function() {
|
||||
$searchpop.removeClass('hide');
|
||||
});
|
||||
|
||||
// close button
|
||||
$('.search-close').click(function(e){
|
||||
e.preventDefault();
|
||||
|
||||
// hide search area
|
||||
$searchpop.removeClass('ready');
|
||||
$searchresults.addClass('hide');
|
||||
$searcharea.removeClass('ready');
|
||||
$searchpop.addClass('hide');
|
||||
|
||||
// empty search field
|
||||
$searchfield.val('').blur();
|
||||
|
@ -36,7 +36,6 @@
|
||||
li { display: inline-block; }
|
||||
|
||||
.nav-popover {
|
||||
background: @body-bg;
|
||||
padding: @line-height-computed*1.5 0;
|
||||
width: 100%;
|
||||
.clearfix;
|
||||
@ -53,14 +52,14 @@
|
||||
text-transform: uppercase;
|
||||
font-size: .8em;
|
||||
|
||||
// the icon
|
||||
// the icons
|
||||
&:before {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
height: 32px;
|
||||
color: lighten(@text-color-dimmed, 10%);
|
||||
color: lighten(@text-color-dimmed, 5%);
|
||||
.transition;
|
||||
}
|
||||
|
||||
@ -137,6 +136,34 @@
|
||||
}
|
||||
|
||||
.search-results {
|
||||
.clearfix;
|
||||
|
||||
.nav-link {
|
||||
@media @breakpoint2 {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 71px;
|
||||
z-index: 6;
|
||||
|
||||
background: lighten(@page-bg, 3%);
|
||||
border-bottom: 1px solid rgba(255,255,255,.7);
|
||||
box-shadow: 0 1px 4px fade(@brand-dark, 10%);
|
||||
|
||||
@media @breakpoint2 {
|
||||
top: 0;
|
||||
|
||||
.row {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -7,6 +7,8 @@ body {
|
||||
background-color: @body-bg;
|
||||
}
|
||||
|
||||
.document { position: relative }
|
||||
|
||||
|
||||
//
|
||||
// Topbar
|
||||
@ -187,33 +189,42 @@ a.close,
|
||||
// topbar and footer as fixed
|
||||
// site background
|
||||
//
|
||||
.topbar {
|
||||
height: 71px;
|
||||
|
||||
.menu-open & {
|
||||
height: auto
|
||||
}
|
||||
}
|
||||
.document {
|
||||
background-color: @page-bg;
|
||||
}
|
||||
|
||||
@media @breakpoint2 {
|
||||
body {
|
||||
position: relative
|
||||
}
|
||||
section[role=document] {
|
||||
background-color: @page-bg;
|
||||
.document {
|
||||
z-index: 2;
|
||||
margin-top: 71px;
|
||||
.transition;
|
||||
|
||||
.menu-open & {
|
||||
margin-top: 300px;
|
||||
}
|
||||
margin-bottom: 380px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
border-top: 1px solid rgba(255,255,255,.7);
|
||||
border-bottom: 1px solid rgba(255,255,255,.7);
|
||||
box-shadow: 0 1px 4px fade(@brand-dark, 10%), 0 -1px 4px fade(@brand-dark, 10%);
|
||||
}
|
||||
.topbar,
|
||||
.footer {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
border: none;
|
||||
}
|
||||
.topbar {
|
||||
min-height: 71px;
|
||||
top: 0;
|
||||
box-shadow: inset 0 1px 4px fade(@brand-dark, 10%);
|
||||
border: none;
|
||||
|
Loading…
Reference in New Issue
Block a user