1
0
mirror of https://github.com/kremalicious/blog.git synced 2025-02-14 21:10:25 +01:00

search tweaks

This commit is contained in:
Matthias Kretschmann 2016-04-17 00:17:17 +02:00
parent ebfed35a90
commit 702642e044
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
7 changed files with 31 additions and 44 deletions

View File

@ -8,4 +8,6 @@ title: I'm sorry Dave
<p class="srverror-title">I'm sorry Dave,</p> <p class="srverror-title">I'm sorry Dave,</p>
<p class="srverror-text">I'm afraid I can't do that.</p> <p class="srverror-text">I'm afraid I can't do that.</p>
<a href="#" class="js-search-init">How about a nice search?</a>
[Go to homepage](/) [Go to homepage](/)

View File

@ -13,6 +13,8 @@ var Menu = (function(w, d) {
_config.thelink.on('click', function(e) { _config.thelink.on('click', function(e) {
e.preventDefault(); e.preventDefault();
$('[data-toggle="tooltip"]').tooltip('hide');
// toggle menu // toggle menu
_config.thesite.toggleClass('has-menu-open'); _config.thesite.toggleClass('has-menu-open');

View File

@ -7,7 +7,7 @@ var Search = (function(w, d) {
_config = { _config = {
content : $('.site__content'), content : $('.site__content'),
searchlink : $('.search-btn'), searchlink : $('.search-btn, .js-search-init'),
searcharea : $('.search-area'), searcharea : $('.search-area'),
searchfield : $('#search-input'), searchfield : $('#search-input'),
searchresults : $('#search-results'), searchresults : $('#search-results'),
@ -21,6 +21,8 @@ var Search = (function(w, d) {
_config.searchlink.on('click', function(e) { _config.searchlink.on('click', function(e) {
e.preventDefault(); e.preventDefault();
$('[data-toggle="tooltip"]').tooltip('hide');
// show search field // show search field
_config.searcharea _config.searcharea
.removeClass('is-ready animation-bounceOutUp') .removeClass('is-ready animation-bounceOutUp')
@ -72,7 +74,7 @@ var Search = (function(w, d) {
searchInput: document.getElementById('search-input'), searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('search-results'), resultsContainer: document.getElementById('search-results'),
json: '/search.json', json: '/search.json',
searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>', searchResultTemplate: '<a class="search-link" href="{url}">{title}</a>',
fuzzy: false fuzzy: false
}); });
}, },

View File

@ -7,11 +7,11 @@
.site__content, .site__content,
.header__content .header__content
.footer__content .footer__content
padding: 0 7% padding: 0 $spacer
width: 100% width: 100%
@media $breakpoint2 @media $breakpoint2
padding: 0 15% padding: 0 ($spacer * 2)
.container .container
max-width: 35em max-width: 35em
@ -34,7 +34,7 @@
border-bottom: 1px solid rgba(255,255,255,.7) border-bottom: 1px solid rgba(255,255,255,.7)
box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2) box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
transform: translate3d(0,-($spacer*6),0) transform: translate3d(0,-($spacer*7),0)
@media $breakpoint2 @media $breakpoint2
transform: translate3d(0,-($spacer*5),0) transform: translate3d(0,-($spacer*5),0)

View File

@ -8,8 +8,8 @@
overflow: hidden overflow: hidden
.site__content .site__content
transition: .2s ease-out @extend .transition
filter: blur(10px) filter: blur(10px) opacity(0.3)
user-select: none user-select: none
pointer-events: none pointer-events: none
@ -46,50 +46,30 @@
.search-popover .search-popover
position: absolute position: absolute
left: 0 left: 0
top: 80px top: ($spacer*2.4)
bottom: 0
z-index: 6 z-index: 6
width: 100% width: 100%
padding-top: ($spacer/2) max-height: 90vh
background: lighten($page-bg, 3%) padding: ($spacer / 2) 0
border-bottom: 1px solid rgba(255,255,255,.7) overflow: auto
box-shadow: 0 1px 4px alpha($brand-dark, .1) -webkit-overflow-scrolling: touch
@media only screen and (min-width: 40.625em) and (min-height: 650px)
top: 0
.search-results
@extend .list-unstyled
display: flex
align-items: center
.grid__col
padding-top: 0
@media $breakpoint2 @media $breakpoint2
margin-top: ($spacer/2) top: ($spacer * 3)
margin-bottom: ($spacer/2)
> li
padding: 0
margin: 0
.search-results
padding-bottom: $spacer
.search-link .search-link
@extend .h6, .divider-bottom @extend .h4
line-height: $line-height-small line-height: $line-height-small
margin: 0 margin: 0
padding: 10px 15px padding: ($spacer / 2)
min-height: 55px
display: block display: block
display: flex border-bottom: 1px solid alpha($brand-grey-light, .2)
align-items: center box-shadow: 0 1px 0 alpha(#fff,.2)
.search-results > li &:hover
&:nth-child(9) background: $link-color
&:nth-child(10) color: #fff
.search-link
border-bottom: none
&:before
display: none

View File

@ -52,6 +52,6 @@
<div id="search-popover" class="search-popover hide"> <div id="search-popover" class="search-popover hide">
<div class="container"> <div class="container">
<ul id="search-results" class="search-results grid grid--gutters grid--full grid-medium--half"></ul> <nav id="search-results" class="search-results"></nav>
</div> </div>
</div> </div>

View File

@ -17,6 +17,7 @@ tags:
redirect_from: redirect_from:
- /ubuntu-as-mac-file-server-and-time-machine-volume/trackback/ - /ubuntu-as-mac-file-server-and-time-machine-volume/trackback/
- 2008/06/ubuntu-as-mac-file-server-and-time-machine-volume/
--- ---
![Ubuntu Mac File Server Connectivity](/media/ubuntu_mac_feature_thumb.jpg)For quite some time I use my Ubuntu machine as a file and backup server for all Macs in my network which is perfectly accessible from the Finder in Mac OS X. There are some instructions available in the web for this task but all failed in my case so I wrote my own tutorial with all the steps needed for it to work properly. ![Ubuntu Mac File Server Connectivity](/media/ubuntu_mac_feature_thumb.jpg)For quite some time I use my Ubuntu machine as a file and backup server for all Macs in my network which is perfectly accessible from the Finder in Mac OS X. There are some instructions available in the web for this task but all failed in my case so I wrote my own tutorial with all the steps needed for it to work properly.