Skip to content

Commit 1e5b132

Browse files
HofiOneHofiOne
committed
Added the first version of config switchable position of the search form
- set search_from_masthead: true in config to move the search input to the top masthead and center the search results bellow it Signed-off-by: Hofi <hofione@gmail.com>
1 parent 9b8fde2 commit 1e5b132

File tree

11 files changed

+258
-117
lines changed

11 files changed

+258
-117
lines changed

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ defaults:
168168
search: true
169169
# Setting search_full_content to true could impact page load performance!
170170
search_full_content: true
171+
search_from_masthead: true
171172

172173
search_provider: lunr
173174
lunr:

‎_includes/masthead.html

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,51 @@
1313
{% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
1414
</a>
1515

16-
<ul class="visible-links">
16+
<div class="masthead__menu-center-container">
17+
1718
{% if site.masthead.hide_navigator == false %}
19+
<ul class="visible-links">
1820
{%- for link in site.data.navigation.main -%}
1921
<li class="masthead__menu-item">
2022
<a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
2123
</li>
2224
{%- endfor -%}
25+
</ul>
26+
{% endif %}
27+
28+
{% if site.search == true %}
29+
{% if site.search_from_masthead %}
30+
{% include /search/search_input.html %}
31+
{% endif %}
2332
{% endif %}
24-
</ul>
33+
34+
</div>
2535

2636
{% if site.search == true %}
27-
{% comment %}<!-- search__toggle is kept fir bacjward compatibility -->{% endcomment %}
28-
<button id="search-button" class="masthead_button search__toggle" type="button">
29-
<span id="search_hint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
30-
<i class="masthead_button_icon fas fa-search" style="font-size: 120%;"></i>
31-
</button>
37+
{% comment %}<!-- search__toggle is kept for backward compatibility -->{% endcomment %}
38+
<label class="sr-only" for="search-button">
39+
{{ site.data.ui-text[site.locale].search_label_text | default: 'Toggle search (Shift + Ctrl + F or ESC to close)' }}
40+
</label>
41+
<button id="search-button" class="masthead_button search__toggle" type="button">
42+
<span id="search_hint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
43+
<i class="masthead_button_icon fas fa-search" style="font-size: 120%;"></i>
44+
</button>
3245
{% endif %}
3346

3447
{% if site.skin_switchable == true %}
35-
<i class="masthead_button_small_img fa fa-sun"></i>
36-
<button id="skin-button" class="masthead_button_with_side_image" type="button">
37-
<i class="masthead_button_icon fa fa-toggle-off" style="font-size: 150%;"></i>
38-
</button>
39-
<i class="masthead_button_small_img fa fa-moon"></i>
48+
<i class="masthead_button_small_img fa fa-sun"></i>
49+
<label class="sr-only" for="skin-button">
50+
{{ site.data.ui-text[site.locale].search_label_text | default: 'Toggle dark mode' }}
51+
</label>
52+
<button id="skin-button" class="masthead_button_with_side_image" type="button">
53+
<i class="masthead_button_icon fa fa-toggle-off" style="font-size: 150%;"></i>
54+
</button>
55+
<i class="masthead_button_small_img fa fa-moon"></i>
4056
{% endif %}
4157

58+
<label class="sr-only" for="settings-button">
59+
{{ site.data.ui-text[site.locale].search_label_text | default: 'Settings' }}
60+
</label>
4261
<button id="settings-button" class="masthead_button_last" type="button">
4362
<i class="masthead_button_icon fas fa-user-cog" style="font-size: 110%;"></i>
4463
</button>

‎_includes/search/search_form.html

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,21 @@
11
<div class="search-content__inner-wrap">
22
{%- assign search_provider = site.search_provider | default: "lunr" -%}
33
{%- case search_provider -%}
4+
45
{%- when "lunr" -%}
5-
<form class="search-content__form" onkeydown="return event.key != 'Enter';" role="search">
6-
<label class="sr-only" for="search">
7-
{{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
8-
</label>
9-
<input type="search" id="search" class="search-input" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
10-
<a class="search-help content-tooltip full-content-tooltip nav-link" href="/lunr_search_help.html">[ Hover or click for search help ]</a>
11-
</form>
12-
<div id="results" class="results"></div>
6+
{% if site.search_from_masthead == false %}
7+
{% include /search/search_input.html %}
8+
{% endif %}
9+
<div id="results" class="results {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}"></div>
10+
1311
{%- when "google" -%}
14-
<form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id" role="search">
15-
<label class="sr-only" for="cse-search-input-box-id">
16-
{{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
17-
</label>
18-
<input type="search" id="cse-search-input-box-id" class="search-input" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
19-
</form>
20-
<div id="results" class="results">
21-
<gcse:searchresults-only></gcse:searchresults-only>
22-
</div>
12+
{% include /search/search_input.html %}
13+
<div id="results" class="results">
14+
<gcse:searchresults-only></gcse:searchresults-only>
15+
</div>
16+
2317
{%- when "algolia" -%}
24-
<div class="search-searchbar"></div>
25-
<div class="search-hits"></div>
18+
{% include /search/search_input.html %}
19+
<div class="search-hits"></div>
2620
{%- endcase -%}
2721
</div>

‎_includes/search/search_input.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{%- assign search_provider = site.search_provider | default: "lunr" -%}
2+
{%- case search_provider -%}
3+
4+
{%- when "lunr" -%}
5+
<form class="search-content__form {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}"
6+
onkeydown="return event.key != 'Enter';" role="search">
7+
<label class="sr-only" for="search">
8+
{{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
9+
</label>
10+
<input type="search" id="search" class="search-input {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}"
11+
placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
12+
<a class="search-help content-tooltip full-content-tooltip nav-link fas fa-info-circle" href="{{ '/lunr_search_help.html' | relative_url }}"></a>
13+
</form>
14+
15+
{%- when "google" -%}
16+
<form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id" role="search">
17+
<label class="sr-only" for="cse-search-input-box-id">
18+
{{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
19+
</label>
20+
<input type="search" id="cse-search-input-box-id" class="search-input"
21+
placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
22+
</form>
23+
24+
{%- when "algolia" -%}
25+
<div class="search-searchbar"></div>
26+
{%- endcase -%}

‎_includes/skins.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
const docRoot = '{{ site.baseurl }}';
2727
const darkSkin = 'midnight';
2828
const lightSkin = 'default';
29+
const searchEnabled = {% if site.search == true %} true {% else %} false {% endif %};
30+
const searchFromMastHead = {% if site.search_from_masthead == true %} true {% else %} false {% endif %};
2931

3032
function docPrefix() {
3133
return (docRoot != '' ? docRoot + '/' : '');

‎_js/custom/navigation.js

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -598,47 +598,50 @@ $(function () {
598598
// Search
599599
// -------------
600600

601-
// Close search screen with Esc key or toggle with predefined hotKey
602-
$(document).on('keyup', function (event) {
603-
// Define the desired hotkey (in this case, Ctrl + Shift + F)
604-
var searchHotkey = { ctrlKey: true, shiftKey: true, key: 'F' };
605-
606-
if (event.keyCode === 27) {
607-
if ($(".initial-content").hasClass("is--hidden"))
601+
if (searchEnabled) {
602+
// Close search screen with Esc key or toggle with predefined hotKey
603+
$(document).on('keyup', function (event) {
604+
// Define the desired hotkey (in this case, Ctrl + Shift + F)
605+
var searchHotkey = { ctrlKey: true, shiftKey: true, key: 'F' };
606+
607+
if (event.keyCode === 27) {
608+
if ($(".initial-content").hasClass("is--hidden"))
609+
toggleSearch(event);
610+
}
611+
else if (event.ctrlKey === searchHotkey.ctrlKey &&
612+
event.shiftKey === searchHotkey.shiftKey &&
613+
event.key === searchHotkey.key) {
608614
toggleSearch(event);
609-
}
610-
else if (event.ctrlKey === searchHotkey.ctrlKey &&
611-
event.shiftKey === searchHotkey.shiftKey &&
612-
event.key === searchHotkey.key) {
613-
toggleSearch(event);
614-
}
615-
});
615+
}
616+
});
616617

617-
function toggleSearch(event) {
618-
$(".search-content").toggleClass("is--visible");
619-
$(".initial-content").toggleClass("is--hidden");
620-
621-
if ($(".initial-content").hasClass("is--hidden")) {
622-
// set focus on input
623-
setTimeout(function () {
624-
var input = $(".search-content").find("input");
625-
input.trigger("focus");
626-
input.trigger("select");
627-
}, 250);
628-
}
629-
else {
630-
// set focus back to the initial content otherwise the focus will not get back to the search input once again
631-
$(".initial-content").find("input").focus();
618+
function toggleSearch(event) {
619+
$(".search-content").toggleClass("is--visible");
620+
$(".search-content__form").toggleClass("is--visible");
621+
$(".initial-content").toggleClass("is--hidden");
622+
623+
if ($(".initial-content").hasClass("is--hidden")) {
624+
// set focus on input
625+
setTimeout(function () {
626+
var input = $(".search-content__form").find("input");
627+
input.trigger("focus");
628+
input.trigger("select");
629+
}, 100);
630+
}
631+
else {
632+
// set focus back via the initial content otherwise the focus will not get back to the search input once again
633+
$(".initial-content").find("input").focus();
634+
}
635+
636+
if (tooltipTarget)
637+
hideTooltip(true);
638+
// NOTE: event.target is not always the toggle here, use it directly instead of the event
639+
$("#search-button").trigger('blur');
632640
}
633641

634-
if (tooltipTarget)
635-
hideTooltip(true);
636-
// NOTE: event.target is not always the toggle here, use it directly instead of the event
637-
$("#search-button").trigger('blur');
642+
$("#search-button").on('click', toggleSearch);
638643
}
639644

640-
$("#search-button").on('click', toggleSearch);
641-
642645
// -------------
643646
// Startup
644647
// -------------

‎_js/main.min.js

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8808,34 +8808,37 @@ $(function() {
88088808
$(window).on("resize", function() {
88098809
stickySideBar();
88108810
});
8811-
$(document).on("keyup", function(event) {
8812-
var searchHotkey = {
8813-
ctrlKey: true,
8814-
shiftKey: true,
8815-
key: "F"
8816-
};
8817-
if (event.keyCode === 27) {
8818-
if ($(".initial-content").hasClass("is--hidden")) toggleSearch(event);
8819-
} else if (event.ctrlKey === searchHotkey.ctrlKey && event.shiftKey === searchHotkey.shiftKey && event.key === searchHotkey.key) {
8820-
toggleSearch(event);
8821-
}
8822-
});
8823-
function toggleSearch(event) {
8824-
$(".search-content").toggleClass("is--visible");
8825-
$(".initial-content").toggleClass("is--hidden");
8826-
if ($(".initial-content").hasClass("is--hidden")) {
8827-
setTimeout(function() {
8828-
var input = $(".search-content").find("input");
8829-
input.trigger("focus");
8830-
input.trigger("select");
8831-
}, 250);
8832-
} else {
8833-
$(".initial-content").find("input").focus();
8811+
if (searchEnabled) {
8812+
$(document).on("keyup", function(event) {
8813+
var searchHotkey = {
8814+
ctrlKey: true,
8815+
shiftKey: true,
8816+
key: "F"
8817+
};
8818+
if (event.keyCode === 27) {
8819+
if ($(".initial-content").hasClass("is--hidden")) toggleSearch(event);
8820+
} else if (event.ctrlKey === searchHotkey.ctrlKey && event.shiftKey === searchHotkey.shiftKey && event.key === searchHotkey.key) {
8821+
toggleSearch(event);
8822+
}
8823+
});
8824+
function toggleSearch(event) {
8825+
$(".search-content").toggleClass("is--visible");
8826+
$(".search-content__form").toggleClass("is--visible");
8827+
$(".initial-content").toggleClass("is--hidden");
8828+
if ($(".initial-content").hasClass("is--hidden")) {
8829+
setTimeout(function() {
8830+
var input = $(".search-content__form").find("input");
8831+
input.trigger("focus");
8832+
input.trigger("select");
8833+
}, 100);
8834+
} else {
8835+
$(".initial-content").find("input").focus();
8836+
}
8837+
if (tooltipTarget) hideTooltip(true);
8838+
$("#search-button").trigger("blur");
88348839
}
8835-
if (tooltipTarget) hideTooltip(true);
8836-
$("#search-button").trigger("blur");
8840+
$("#search-button").on("click", toggleSearch);
88378841
}
8838-
$("#search-button").on("click", toggleSearch);
88398842
stickySideBar();
88408843
finalizeContent();
88418844
window.addEventListener("popstate", function() {

‎_sass/minimal-mistakes/minimal-mistakes/_masthead.scss

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -97,30 +97,37 @@
9797
}
9898
}
9999

100-
101100
.masthead_button, .masthead_button_last, .masthead_button_with_side_image{
102101
position: relative;
103102
display: inline-block;
104-
margin-left: 1rem;
105-
margin-right: 1rem;
103+
104+
/* top | right | bottom | left */
105+
margin: 0 0.4rem 0 0.4rem ;
106+
@include breakpoint($large) {
107+
margin: 0 0.6rem 0 0.6rem ;
108+
}
109+
@include breakpoint($x-large) {
110+
margin: 0 0.8rem 0 0.8rem ;
111+
}
106112
&_last {
107113
margin-right: 0px;
108114
}
115+
109116
&_with_side_image {
110117
margin: 0px;
111118
padding: 0px;
112119
}
113120
height: $nav-toggle-height;
114121
border: 0;
115122
outline: none;
116-
color: $primary-color;
123+
color: $button-color;
117124
background-color: transparent;
118125
cursor: pointer;
119126
-webkit-transition: 0.2s;
120127
transition: 0.2s;
121128

122129
&:hover {
123-
color: mix(#000, $primary-color, 25%);
130+
color: mix(#000, $button-color, 25%);
124131
}
125132
}
126133

@@ -141,12 +148,12 @@
141148
.masthead_button_small_img {
142149
position: relative;
143150
display: inline-block;
144-
margin-left: 0rem;
145-
margin-right: 0rem;
146-
scale: 40%;
151+
margin-left: 0.2rem;
152+
margin-right: 0.2rem;
153+
font-size: 50%;
147154
border: 0;
148155
outline: none;
149-
color: $primary-color;
156+
color: $button-color;
150157
background-color: transparent;
151158
-webkit-transition: 0.2s;
152159
transition: 0.2s;

‎_sass/minimal-mistakes/minimal-mistakes/_navigation.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,19 @@
314314
cursor: pointer;
315315
}
316316

317+
.masthead__menu-center-container {
318+
display: -webkit-box;
319+
display: -ms-flexbox;
320+
display: flex;
321+
-webkit-box-pack: center;
322+
-ms-flex-pack: center;
323+
justify-content: center;
324+
-webkit-box-flex: 1;
325+
-ms-flex: 1;
326+
flex: 1;
327+
overflow: hidden;
328+
}
329+
317330
.visible-links {
318331
display: -webkit-box;
319332
display: -ms-flexbox;

0 commit comments

Comments
 (0)