mirror of https://github.com/thangisme/notes.git
Improved search interface
This commit is contained in:
Silvio Giebl
parent
d66ebdec4b
commit
804cad6c4d
|
|
@ -46,7 +46,7 @@ layout: table_wrappers
|
|||
<div class="search">
|
||||
<div class="search-input-wrap">
|
||||
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
|
||||
<svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg>
|
||||
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
|
||||
</div>
|
||||
<div id="search-results" class="search-results"></div>
|
||||
</div>
|
||||
|
|
@ -55,7 +55,7 @@ layout: table_wrappers
|
|||
<nav aria-label="Auxiliary" class="aux-nav">
|
||||
<ul class="aux-nav-list">
|
||||
{% for link in site.aux_links %}
|
||||
<li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
|
||||
<li class="aux-nav-list-item"><a href="{{ link.last }}" class="site-button">{{ link.first }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -114,6 +114,8 @@ layout: table_wrappers
|
|||
<a href="#" id="search-button" class="search-button">
|
||||
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
|
||||
</a>
|
||||
|
||||
<div class="search-overlay"></div>
|
||||
{% endif %}
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ pre.highlight,
|
|||
figure.highlight {
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
border-radius: $border-radius;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: $code-background-color;
|
||||
|
||||
|
|
@ -26,7 +27,6 @@ figure.highlight {
|
|||
|
||||
.highlighter-rouge {
|
||||
margin-bottom: $sp-3;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.highlight .c { color: #586e75; } // comment //
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
//
|
||||
|
||||
.side-bar {
|
||||
z-index: 100;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $sidebar-color;
|
||||
|
|
@ -48,15 +48,13 @@
|
|||
}
|
||||
|
||||
.main-header {
|
||||
@include container;
|
||||
z-index: 0;
|
||||
display: none;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: space-between;
|
||||
height: $header-height;
|
||||
background-color: $body-background-color;
|
||||
border-bottom: $border $border-color;
|
||||
|
|
@ -83,7 +81,14 @@
|
|||
}
|
||||
|
||||
.site-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
padding-top: $sp-8;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
overflow-y: auto;
|
||||
|
|
@ -97,7 +102,6 @@
|
|||
align-items: center;
|
||||
|
||||
@include mq(md) {
|
||||
z-index: 101;
|
||||
height: $header-height;
|
||||
max-height: $header-height;
|
||||
border-bottom: $border $border-color;
|
||||
|
|
@ -137,17 +141,22 @@
|
|||
height: 100%;
|
||||
padding: $gutter-spacing-sm;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
@include mq(md) {
|
||||
.site-header .site-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title:hover,
|
||||
.site-button:hover {
|
||||
.site-title:hover {
|
||||
background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
|
||||
}
|
||||
|
||||
.site-button:hover {
|
||||
background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
|
||||
}
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -125,37 +125,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Small screen nav
|
||||
|
||||
.site-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// Aux nav
|
||||
|
||||
.aux-nav {
|
||||
align-self: center;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
@include fs-2;
|
||||
|
||||
.aux-nav-list {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.aux-nav-list-item {
|
||||
display: inline-block;
|
||||
margin-right: $sp-2;
|
||||
@include fs-2;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@include mq(md) {
|
||||
padding-right: $gutter-spacing-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,85 +4,99 @@
|
|||
|
||||
.search {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
z-index: 2;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
margin-bottom: $sp-3;
|
||||
height: $sp-10;
|
||||
padding-top: $sp-2;
|
||||
padding-bottom: $sp-2;
|
||||
|
||||
@include mq(md) {
|
||||
margin-bottom: 0;
|
||||
height: 100%;
|
||||
max-width: $search-results-width;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: $sp-2;
|
||||
background-color: $search-background-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
margin-right: $sp-2;
|
||||
margin-left: $sp-2;
|
||||
transition: margin linear 100ms;
|
||||
|
||||
@include mq(md) {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
background-color: $body-background-color;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-input {
|
||||
align-self: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
height: 100%;
|
||||
padding-top: $sp-2;
|
||||
padding-right: $gutter-spacing-sm;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2};
|
||||
background-color: $search-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
order: 2;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
transition: width ease 200ms;
|
||||
@include fs-4;
|
||||
|
||||
@include mq(md) {
|
||||
max-width: $search-results-width;
|
||||
padding-left: #{$gutter-spacing + $sp-5};
|
||||
background-color: $body-background-color;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
|
||||
+ .search-icon {
|
||||
+ .search-label .search-icon {
|
||||
fill: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
background-color: $body-background-color;
|
||||
@include fs-3;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
align-self: center;
|
||||
margin-right: $sp-2;
|
||||
fill: $grey-dk-000;
|
||||
order: 1;
|
||||
.search-label {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding-left: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: $gutter-spacing;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: #{$sp-4 * 1.2};
|
||||
height: #{$sp-4 * 1.2};
|
||||
align-self: center;
|
||||
fill: $grey-dk-000;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
width: 100%;
|
||||
max-height: calc(100vh - 100%);
|
||||
overflow-y: auto;
|
||||
background: $search-background-color;
|
||||
border-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include mq(md) {
|
||||
width: $search-results-width;
|
||||
}
|
||||
|
|
@ -90,7 +104,6 @@
|
|||
|
||||
.search-results-list {
|
||||
padding-left: 0;
|
||||
margin-top: $sp-1;
|
||||
margin-bottom: $sp-1;
|
||||
list-style: none;
|
||||
@include fs-4;
|
||||
|
|
@ -187,6 +200,42 @@
|
|||
border: 1px solid rgba($link-color, 0.3);
|
||||
}
|
||||
|
||||
.blur {
|
||||
filter: blur(5px);
|
||||
.search-overlay {
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
opacity: 0;
|
||||
transition: opacity ease 200ms;
|
||||
}
|
||||
|
||||
.search-active {
|
||||
overflow: hidden;
|
||||
|
||||
.search-input-wrap {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
@include mq(md) {
|
||||
width: $search-results-width;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-overlay {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -94,8 +94,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
|
|||
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
|
||||
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
|
||||
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
|
||||
$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
|
||||
$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
|
||||
|
||||
//
|
||||
// Borders
|
||||
|
|
@ -118,7 +118,7 @@ $nav-list-item-height-sm: $sp-8 !default;
|
|||
$nav-list-expander-right: true;
|
||||
$content-width: 800px !default;
|
||||
$header-height: 60px !default;
|
||||
$search-results-width: 500px !default;
|
||||
$search-results-width: $content-width - $nav-width !default;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
|
|
|
|||
|
|
@ -111,12 +111,10 @@ function initSearch() {
|
|||
var docs = docs;
|
||||
var searchInput = document.getElementById('search-input');
|
||||
var searchResults = document.getElementById('search-results');
|
||||
var mainContentWrap = document.getElementById('main-content-wrap');
|
||||
|
||||
function hideResults() {
|
||||
searchResults.innerHTML = '';
|
||||
searchResults.classList.remove('active');
|
||||
mainContentWrap.classList.remove('blur');
|
||||
document.body.classList.remove('search-active');
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
|
@ -138,8 +136,9 @@ function initSearch() {
|
|||
});
|
||||
|
||||
if (results.length > 0) {
|
||||
searchResults.classList.add('active');
|
||||
mainContentWrap.classList.add('blur');
|
||||
window.scroll(0, window.scrollY + searchInput.getBoundingClientRect().top);
|
||||
document.body.classList.add('search-active');
|
||||
|
||||
var resultsList = document.createElement('ul');
|
||||
resultsList.classList.add('search-results-list');
|
||||
searchResults.appendChild(resultsList);
|
||||
|
|
|
|||
Loading…
Reference in New Issue