Improved padding of active search input

This commit is contained in:
Silvio Giebl 2020-01-01 00:21:19 +01:00
parent 82b3f15443
commit c907e79251
2 changed files with 16 additions and 8 deletions

View File

@ -37,7 +37,7 @@
padding-top: $sp-2; padding-top: $sp-2;
padding-right: $gutter-spacing-sm; padding-right: $gutter-spacing-sm;
padding-bottom: $sp-2; padding-bottom: $sp-2;
padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2}; padding-left: #{$gutter-spacing-sm + $sp-5};
background-color: $search-background-color; background-color: $search-background-color;
border-top: 0; border-top: 0;
border-right: 0; border-right: 0;
@ -55,7 +55,7 @@
background-color: $body-background-color; background-color: $body-background-color;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
transition: width ease $transition-duration; transition: padding-left linear #{$transition-duration / 2}, width ease $transition-duration;
@include fs-3; @include fs-3;
} }
@ -76,6 +76,7 @@
@include mq(md) { @include mq(md) {
padding-left: $gutter-spacing; padding-left: $gutter-spacing;
transition: padding-left linear #{$transition-duration / 2};
} }
.search-icon { .search-icon {
@ -261,10 +262,17 @@
box-shadow: none; box-shadow: none;
@include mq(md) { @include mq(md) {
padding-left: #{$sp-4 * 1.25 + $sp-5};
width: $search-results-width; width: $search-results-width;
} }
} }
.search-label {
@include mq(md) {
padding-left: #{$sp-4 * 1.25};
}
}
.search-results { .search-results {
display: block; display: block;
} }

View File

@ -51,7 +51,7 @@ function initNav() {
} }
}); });
{% if site.search_enabled != false and site.search.button -%} {%- if site.search_enabled != false and site.search.button %}
const searchInput = document.getElementById('search-input'); const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button'); const searchButton = document.getElementById('search-button');
@ -64,9 +64,9 @@ function initNav() {
{%- endif %} {%- endif %}
} }
{%- if site.search_enabled != false %}
// Site search // Site search
{% if site.search_enabled != false -%}
function initSearch() { function initSearch() {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true); request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true);
@ -81,7 +81,7 @@ function initSearch() {
this.ref('id'); this.ref('id');
this.field('title', { boost: 200 }); this.field('title', { boost: 200 });
this.field('content', { boost: 2 }); this.field('content', { boost: 2 });
{% if site.search.rel_url != false -%} {%- if site.search.rel_url != false %}
this.field('relUrl'); this.field('relUrl');
{%- endif %} {%- endif %}
this.metadataWhitelist = ['position'] this.metadataWhitelist = ['position']
@ -91,7 +91,7 @@ function initSearch() {
id: i, id: i,
title: docs[i].title, title: docs[i].title,
content: docs[i].content, content: docs[i].content,
{% if site.search.rel_url != false -%} {%- if site.search.rel_url != false %}
relUrl: docs[i].relUrl relUrl: docs[i].relUrl
{%- endif %} {%- endif %}
}); });
@ -266,7 +266,7 @@ function initSearch() {
} }
} }
{% if site.search.rel_url != false -%} {%- if site.search.rel_url != false %}
var resultRelUrl = document.createElement('span'); var resultRelUrl = document.createElement('span');
resultRelUrl.classList.add('search-result-rel-url'); resultRelUrl.classList.add('search-result-rel-url');
resultRelUrl.innerText = doc.relUrl; resultRelUrl.innerText = doc.relUrl;
@ -351,7 +351,7 @@ function initSearch() {
jtd.onReady(function(){ jtd.onReady(function(){
initNav(); initNav();
{% if site.search_enabled != false -%} {%- if site.search_enabled != false %}
initSearch(); initSearch();
{%- endif %} {%- endif %}
}); });