Skip to content

Commit 8d29527

Browse files
HofiOneHofiOne
committed
Skin button and masthead UI fixed
- search input field got an id and that id is used now instead of its class, as - masthead buttons got a generic impl Signed-off-by: Hofi <[email protected]>
1 parent e90663f commit 8d29527

File tree

7 files changed

+130
-117
lines changed

7 files changed

+130
-117
lines changed

‎_includes/masthead.html

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
<div class="masthead__inner-wrap">
55
<div class="masthead__menu">
66
<nav id="site-nav" class="greedy-nav">
7+
78
{% unless logo_path == empty %}
89
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt="{{ site.masthead_title | default: site.title }}"></a>
910
{% endunless %}
1011
<a class="site-title" href="{{ '/' | relative_url }}">
1112
{{ site.masthead_title | default: site.title }}
1213
{% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
1314
</a>
15+
1416
<ul class="visible-links">
1517
{% if site.masthead.hide_navigator == false %}
1618
{%- for link in site.data.navigation.main -%}
@@ -20,27 +22,33 @@
2022
{%- endfor -%}
2123
{% endif %}
2224
</ul>
25+
2326
{% if site.search == true %}
24-
<button class="search__toggle" type="button">
25-
<span id="searchHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl
26-
+ F or ESC to close)" }}</span>
27-
<i class="fas fa-search"></i>
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>
2831
</button>
2932
{% endif %}
33+
3034
{% if site.skin_switchable == true %}
31-
<span class="skin__toggle_img"><i class="fa fa-sun-o"></i></span>
32-
<button class="skin__toggle" type="button">
33-
<!-- <span id="skinHint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl
34-
+ F or ESC to close)" }}</span> -->
35-
<i class="fa fa-toggle-off"></i>
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>
3638
</button>
37-
<span class="skin__toggle_img"><i class="fa fa-moon-o"></i></span>
39+
<i class="masthead_button_small_img fa fa-moon"></i>
3840
{% endif %}
41+
42+
<button id="settings-button" class="masthead_button_last" type="button">
43+
<i class="masthead_button_icon fas fa-user-cog" style="font-size: 110%;"></i>
44+
</button>
45+
3946
<button class="greedy-nav__toggle hidden" type="button">
4047
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
4148
<div class="navicon"></div>
4249
</button>
4350
<ul class="hidden-links hidden"></ul>
51+
4452
</nav>
4553
</div>
4654
</div>

‎_includes/search/algolia-search-scripts.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ <h2 class="archive__item-title" itemprop="headline"><a href="{{ site.baseurl }}$
5353

5454
// Starting the search only when toggle is clicked
5555
$(document).ready(function () {
56-
$(".search__toggle").on("click", function() {
56+
$("#search-button").on("click", function() {
5757
if(!search.started) {
5858
search.start();
5959
}

‎_includes/skins.html

Lines changed: 78 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -56,52 +56,85 @@
5656
return defaultValue;
5757
}
5858

59-
function setSkin(skin) {
60-
const stylesheet = document.getElementById('skinedStylesheet');
61-
//stylesheet.onload = saveChanges;
62-
stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
63-
setCookie('skin', skin, 365 * 100);
64-
}
65-
66-
function toggleSkin() {
67-
if (getCookie('skin', 'default') == darkSkin)
68-
setSkin(lightSkin);
69-
else
70-
setSkin(darkSkin);
71-
//location.reload();
72-
}
73-
74-
/* As of the dynamic skin stylsheet loading, it is better to wait for the finish of the whole page content load and rendering to avoid apperance of
75-
half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
76-
*/
77-
window.addEventListener("load", function () {
78-
function saveChanges() {
79-
const htmlStyle = window.getComputedStyle(document.documentElement);
80-
const backgroundColor = htmlStyle.backgroundColor;
81-
setCookie('skin-background-color', backgroundColor, 365 * 100);
82-
};
83-
84-
var container = document.getElementById("full-page-container");
85-
if (container)
86-
container.classList.remove('hidden');
87-
88-
// Why this is not working?!?!
89-
//document.body.style.removeProperty("backgroundColor");
90-
document.body.style.backgroundColor = "";
91-
92-
saveChanges();
93-
94-
$(".skin__toggle").on("click", toggleSkin);
95-
});
59+
(function () {
60+
function setSkin(skin) {
61+
const stylesheet = document.getElementById('skinedStylesheet');
62+
//stylesheet.onload = saveChanges;
63+
stylesheet.href = docPrefix() + '/assets/css/main' + (skin == 'default' ? '' : '_' + skin) + '.css';
64+
setCookie('skin', skin, 365 * 100);
65+
}
9666

97-
document.addEventListener("DOMContentLoaded", function () {
98-
const skinBackgroundColor = getCookie('skin-background-color');
99-
if (skinBackgroundColor)
100-
document.body.style.backgroundColor = skinBackgroundColor;
101-
});
67+
function toggleSkin(event) {
68+
if (getCookie('skin', 'default') == darkSkin) {
69+
event.target.classList.remove('fa-toggle-on');
70+
event.target.classList.add('fa-toggle-off');
71+
setSkin(lightSkin);
72+
}
73+
else {
74+
event.target.classList.remove('fa-toggle-off');
75+
event.target.classList.add('fa-toggle-on');
76+
setSkin(darkSkin);
77+
}
78+
event.currentTarget.blur();
79+
}
10280

103-
const storedSkin = getCookie('skin', 'default');
104-
if (storedSkin !== 'default')
105-
setSkin(storedSkin);
81+
function toggleIcon(target, off) {
82+
if (off) {
83+
target.classList.remove('fa-toggle-on');
84+
target.classList.add('fa-toggle-off');
85+
}
86+
else {
87+
target.classList.remove('fa-toggle-off');
88+
target.classList.add('fa-toggle-on');
89+
}
90+
}
91+
92+
function toggleSkin(event) {
93+
var off = getCookie('skin', 'default') == darkSkin;
94+
95+
if (off)
96+
setSkin(lightSkin);
97+
else
98+
setSkin(darkSkin);
99+
toggleIcon(event.target, off);
100+
101+
event.currentTarget.blur();
102+
}
106103

104+
/* As of the dynamic skin stylsheet loading, it is better to wait for the finish of the whole page content load and rendering to avoid apperance of
105+
half rendered content parts (it is better to see an empty content even if it might appear in a different bacground color that the skin has)
106+
*/
107+
window.addEventListener("load", function () {
108+
function saveChanges() {
109+
const htmlStyle = window.getComputedStyle(document.documentElement);
110+
const backgroundColor = htmlStyle.backgroundColor;
111+
setCookie('skin-background-color', backgroundColor, 365 * 100);
112+
};
113+
114+
var container = document.getElementById("full-page-container");
115+
if (container)
116+
container.classList.remove('hidden');
117+
118+
// Why this is not working?!?!
119+
//document.body.style.removeProperty("backgroundColor");
120+
document.body.style.backgroundColor = "";
121+
if (storedSkin !== 'default')
122+
toggleIcon($('#skin-button').find('.masthead_button_icon')[0], false);
123+
124+
$("#skin-button").on("click", toggleSkin);
125+
126+
saveChanges();
127+
});
128+
129+
document.addEventListener("DOMContentLoaded", function () {
130+
const skinBackgroundColor = getCookie('skin-background-color');
131+
if (skinBackgroundColor)
132+
document.body.style.backgroundColor = skinBackgroundColor;
133+
});
134+
135+
const storedSkin = getCookie('skin', 'default');
136+
if (storedSkin !== 'default')
137+
setSkin(storedSkin);
138+
139+
})();
107140
</script>

‎_js/custom/navigation.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -605,16 +605,16 @@ $(function () {
605605

606606
if (event.keyCode === 27) {
607607
if ($(".initial-content").hasClass("is--hidden"))
608-
toggleSearch();
608+
toggleSearch(event);
609609
}
610610
else if (event.ctrlKey === searchHotkey.ctrlKey &&
611611
event.shiftKey === searchHotkey.shiftKey &&
612612
event.key === searchHotkey.key) {
613-
toggleSearch();
613+
toggleSearch(event);
614614
}
615615
});
616616

617-
function toggleSearch() {
617+
function toggleSearch(event) {
618618
$(".search-content").toggleClass("is--visible");
619619
$(".initial-content").toggleClass("is--hidden");
620620

@@ -633,9 +633,11 @@ $(function () {
633633

634634
if (tooltipTarget)
635635
hideTooltip(true);
636+
// NOTE: event.target is not always the toggle here, use it directly instead of the event
637+
$("#search-button").trigger('blur');
636638
}
637639

638-
$(".search__toggle").on('click', toggleSearch);
640+
$("#search-button").on('click', toggleSearch);
639641

640642
// -------------
641643
// Startup

‎_js/main.min.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8815,12 +8815,12 @@ $(function() {
88158815
key: "F"
88168816
};
88178817
if (event.keyCode === 27) {
8818-
if ($(".initial-content").hasClass("is--hidden")) toggleSearch();
8818+
if ($(".initial-content").hasClass("is--hidden")) toggleSearch(event);
88198819
} else if (event.ctrlKey === searchHotkey.ctrlKey && event.shiftKey === searchHotkey.shiftKey && event.key === searchHotkey.key) {
8820-
toggleSearch();
8820+
toggleSearch(event);
88218821
}
88228822
});
8823-
function toggleSearch() {
8823+
function toggleSearch(event) {
88248824
$(".search-content").toggleClass("is--visible");
88258825
$(".initial-content").toggleClass("is--hidden");
88268826
if ($(".initial-content").hasClass("is--hidden")) {
@@ -8833,8 +8833,9 @@ $(function() {
88338833
$(".initial-content").find("input").focus();
88348834
}
88358835
if (tooltipTarget) hideTooltip(true);
8836+
$("#search-button").trigger("blur");
88368837
}
8837-
$(".search__toggle").on("click", toggleSearch);
8838+
$("#search-button").on("click", toggleSearch);
88388839
stickySideBar();
88398840
finalizeContent();
88408841
window.addEventListener("popstate", function() {

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

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -97,11 +97,19 @@
9797
}
9898
}
9999

100-
.skin__toggle {
100+
101+
.masthead_button, .masthead_button_last, .masthead_button_with_side_image{
101102
position: relative;
102103
display: inline-block;
103104
margin-left: 1rem;
104105
margin-right: 1rem;
106+
&_last {
107+
margin-right: 0px;
108+
}
109+
&_with_side_image {
110+
margin: 0px;
111+
padding: 0px;
112+
}
105113
height: $nav-toggle-height;
106114
border: 0;
107115
outline: none;
@@ -116,37 +124,30 @@
116124
}
117125
}
118126

119-
.skin-icon {
127+
.masthead_button:hover #search_hint {
128+
display: inline;
129+
-webkit-animation: $intro-transition;
130+
animation: $intro-transition;
131+
-webkit-animation-delay: 0.15s;
132+
animation-delay: 0.15s;
133+
}
134+
135+
.masthead_button_icon {
120136
width: 100%;
121137
height: 100%;
138+
align-content: center;
122139
}
123140

124-
.skin__toggle_img {
141+
.masthead_button_small_img {
125142
position: relative;
126143
display: inline-block;
127144
margin-left: 0rem;
128145
margin-right: 0rem;
129-
width: calc($nav-toggle-height * 0.75);
130-
height: calc($nav-toggle-height * 0.75);
146+
scale: 40%;
131147
border: 0;
132148
outline: none;
133149
color: $primary-color;
134150
background-color: transparent;
135151
-webkit-transition: 0.2s;
136152
transition: 0.2s;
137-
138-
&:hover {
139-
color: mix(#000, $primary-color, 25%);
140-
}
141153
}
142-
143-
#skinHint {
144-
display: none;
145-
position: absolute;
146-
top: 50%;
147-
transform: translateY(-50%);
148-
left: -110px;
149-
max-width: 100px;
150-
font-size: 12px;
151-
margin-left: 10px;
152-
}

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

Lines changed: 1 addition & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,7 @@
88
}
99
}
1010

11-
.search__toggle {
12-
position: relative;
13-
display: inline-block;
14-
margin-left: 1rem;
15-
margin-right: 1rem;
16-
height: $nav-toggle-height;
17-
border: 0;
18-
outline: none;
19-
color: $primary-color;
20-
background-color: transparent;
21-
cursor: pointer;
22-
-webkit-transition: 0.2s;
23-
transition: 0.2s;
24-
25-
&:hover {
26-
color: mix(#000, $primary-color, 25%);
27-
}
28-
}
29-
30-
.search-icon {
31-
width: 100%;
32-
height: 100%;
33-
}
34-
35-
#searchHint {
11+
#search_hint {
3612
display: none;
3713
position: absolute;
3814
top: 50%;
@@ -43,14 +19,6 @@
4319
margin-left: 10px;
4420
}
4521

46-
.search__toggle:hover #searchHint {
47-
display: inline;
48-
-webkit-animation: $intro-transition;
49-
animation: $intro-transition;
50-
-webkit-animation-delay: 0.15s;
51-
animation-delay: 0.15s;
52-
}
53-
5422
.search-content {
5523
display: none;
5624
visibility: hidden;

0 commit comments

Comments
 (0)