thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-18 04:26:31 -05:00
Code Issues Projects Releases Wiki Activity

Improved search interface

Browse Source
This commit is contained in:
Silvio Giebl 2019-12-03 09:12:54 +01:00
parent d66ebdec4b
commit 804cad6c4d
7 changed files with 134 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_layouts/default.html
View File

@ -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>

2
_sass/code.scss
View File

@ -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 //

27
_sass/layout.scss
View File

@ -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 {

31
_sass/navigation.scss
View File

@ -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;
}
}

135
_sass/search.scss
View File

@ -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;
}
}

6
_sass/support/_variables.scss
View File

@ -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

9
assets/js/just-the-docs.js
View File

@ -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);