fni-docs-theme 0.6.3 → 0.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_layouts/default.html +5 -0
- data/_sass/layout.scss +80 -1
- data/assets/js/just-the-docs.js +103 -8
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fba2933df6e923516834811b07bbb917a5d438c76fa865da595a0f6a9355e268
|
4
|
+
data.tar.gz: e2ce7fe989d83601bc683abe26e1b1b0a161890445b9b16b3b5b8d1a35d3193c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 88b37f4db6a79ca7c2f46865ab9c946b19bcabe13126add9f9cf6f841c90e302363dba1257ee85196cf6b71bbb7bd204fe210a4a387af99e14035ef3173a1e3d
|
7
|
+
data.tar.gz: 6fbfd3b32d32032b7bd8439fee2040aee2bfe01eff3786bece89fcfa22d19014ac1e86ce9aed57f4a1b220b6460787c1698933d696e1d2e6342fcddd8f924809
|
data/_layouts/default.html
CHANGED
@@ -49,6 +49,11 @@ layout: table_wrappers
|
|
49
49
|
<div class="side-bar">
|
50
50
|
<div class="site-header">
|
51
51
|
<a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include_cached title.html %}</a>
|
52
|
+
{% if site.search_enabled != false %}
|
53
|
+
<a href="#" id="mobile-search-button" class="site-button mobile-search-button">
|
54
|
+
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
|
55
|
+
</a>
|
56
|
+
{% endif %}
|
52
57
|
<a href="#" id="menu-button" class="site-button">
|
53
58
|
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
|
54
59
|
</a>
|
data/_sass/layout.scss
CHANGED
@@ -138,8 +138,87 @@
|
|
138
138
|
align-items: center;
|
139
139
|
}
|
140
140
|
|
141
|
+
// COMPLETE MOBILE BUTTON OVERHAUL - Force visual separation
|
142
|
+
@media (max-width: 50rem) {
|
143
|
+
.site-header {
|
144
|
+
position: relative !important;
|
145
|
+
display: flex !important;
|
146
|
+
min-height: 60px !important;
|
147
|
+
padding-right: 0 !important;
|
148
|
+
align-items: center !important;
|
149
|
+
justify-content: space-between !important;
|
150
|
+
}
|
151
|
+
|
152
|
+
.mobile-search-button {
|
153
|
+
position: absolute !important;
|
154
|
+
top: 50% !important;
|
155
|
+
right: 60px !important; // Closer to hamburger (was 80px)
|
156
|
+
z-index: 999 !important;
|
157
|
+
display: flex !important;
|
158
|
+
width: 44px !important; // Slightly smaller
|
159
|
+
height: 44px !important;
|
160
|
+
margin: 0 !important;
|
161
|
+
align-items: center !important;
|
162
|
+
justify-content: center !important;
|
163
|
+
transform: translateY(-50%) !important;
|
164
|
+
}
|
165
|
+
|
166
|
+
// Hide search button when search is active to prevent duplicate icons
|
167
|
+
.search-active .mobile-search-button {
|
168
|
+
display: none !important;
|
169
|
+
}
|
170
|
+
|
171
|
+
.site-button[id="menu-button"] {
|
172
|
+
position: absolute !important;
|
173
|
+
top: 50% !important;
|
174
|
+
right: 8px !important;
|
175
|
+
z-index: 998 !important;
|
176
|
+
display: flex !important;
|
177
|
+
width: 44px !important; // Match search button size
|
178
|
+
height: 44px !important;
|
179
|
+
margin: 0 !important;
|
180
|
+
align-items: center !important;
|
181
|
+
justify-content: center !important;
|
182
|
+
transform: translateY(-50%) !important;
|
183
|
+
}
|
184
|
+
|
185
|
+
// Hide menu button when nav is open to prevent overlap with close button
|
186
|
+
.nav-open .site-button[id="menu-button"] {
|
187
|
+
display: none !important;
|
188
|
+
}
|
189
|
+
|
190
|
+
// Close button positioning - ensure it doesn't overlap
|
191
|
+
.site-button[id="close-button"] {
|
192
|
+
position: absolute !important;
|
193
|
+
top: 50% !important;
|
194
|
+
right: 8px !important;
|
195
|
+
z-index: 1000 !important;
|
196
|
+
display: none !important; // Hidden by default
|
197
|
+
width: 44px !important;
|
198
|
+
height: 44px !important;
|
199
|
+
margin: 0 !important;
|
200
|
+
align-items: center !important;
|
201
|
+
justify-content: center !important;
|
202
|
+
transform: translateY(-50%) !important;
|
203
|
+
}
|
204
|
+
|
205
|
+
// Show close button only when nav is open
|
206
|
+
.nav-open .site-button[id="close-button"] {
|
207
|
+
display: flex !important;
|
208
|
+
}
|
209
|
+
}
|
210
|
+
|
211
|
+
// Close button positioning
|
212
|
+
.site-button[id="close-button"] {
|
213
|
+
z-index: 200 !important; // Highest for close button
|
214
|
+
order: 3;
|
215
|
+
flex-shrink: 0 !important; // Prevent shrinking
|
216
|
+
}
|
217
|
+
|
218
|
+
// This section is now handled by the media query above
|
219
|
+
|
141
220
|
@include mq(md) {
|
142
|
-
.site-header .site-button {
|
221
|
+
.site-header .site-button:not(.mobile-search-button) {
|
143
222
|
display: none;
|
144
223
|
}
|
145
224
|
}
|
data/assets/js/just-the-docs.js
CHANGED
@@ -23,6 +23,7 @@ jtd.onReady = function(ready) {
|
|
23
23
|
|
24
24
|
// Show/hide mobile menu
|
25
25
|
|
26
|
+
|
26
27
|
function initNav() {
|
27
28
|
jtd.addEvent(document, 'click', function(e){
|
28
29
|
var target = e.target;
|
@@ -53,6 +54,16 @@ function initNav() {
|
|
53
54
|
siteNav.classList.add('nav-open');
|
54
55
|
mainHeader.classList.add('nav-open');
|
55
56
|
document.body.classList.add('nav-open');
|
57
|
+
|
58
|
+
// Clear search state when nav opens to prevent overlay conflicts
|
59
|
+
{%- if site.search_enabled != false %}
|
60
|
+
if (searchInput && document.body.classList.contains('search-active')) {
|
61
|
+
searchInput.value = '';
|
62
|
+
document.body.classList.remove('search-active');
|
63
|
+
document.documentElement.classList.remove('search-active');
|
64
|
+
mainHeader.classList.remove('nav-open');
|
65
|
+
}
|
66
|
+
{%- endif %}
|
56
67
|
} else {
|
57
68
|
siteNav.classList.remove('nav-open');
|
58
69
|
mainHeader.classList.remove('nav-open');
|
@@ -80,16 +91,77 @@ function initNav() {
|
|
80
91
|
}
|
81
92
|
});
|
82
93
|
|
83
|
-
{%- if site.search_enabled != false
|
94
|
+
{%- if site.search_enabled != false %}
|
84
95
|
const searchInput = document.getElementById('search-input');
|
85
96
|
const searchButton = document.getElementById('search-button');
|
97
|
+
const mobileSearchButton = document.getElementById('mobile-search-button');
|
86
98
|
|
87
|
-
jtd.addEvent(searchButton, 'click', function(e){
|
88
|
-
e.preventDefault();
|
89
99
|
|
90
|
-
|
91
|
-
|
92
|
-
|
100
|
+
{%- if site.search.button %}
|
101
|
+
if (searchButton) {
|
102
|
+
jtd.addEvent(searchButton, 'click', function(e){
|
103
|
+
e.preventDefault();
|
104
|
+
|
105
|
+
mainHeader.classList.add('nav-open');
|
106
|
+
if (searchInput) {
|
107
|
+
searchInput.focus();
|
108
|
+
}
|
109
|
+
});
|
110
|
+
}
|
111
|
+
{%- endif %}
|
112
|
+
|
113
|
+
// Mobile search button functionality
|
114
|
+
if (mobileSearchButton) {
|
115
|
+
jtd.addEvent(mobileSearchButton, 'click', function(e){
|
116
|
+
e.preventDefault();
|
117
|
+
|
118
|
+
if (searchInput) {
|
119
|
+
mainHeader.classList.add('nav-open');
|
120
|
+
document.body.classList.add('search-active');
|
121
|
+
document.documentElement.classList.add('search-active');
|
122
|
+
searchInput.focus();
|
123
|
+
}
|
124
|
+
});
|
125
|
+
}
|
126
|
+
|
127
|
+
// Handle search input focus/blur to manage state
|
128
|
+
if (searchInput) {
|
129
|
+
jtd.addEvent(searchInput, 'focus', function(e){
|
130
|
+
document.body.classList.add('search-active');
|
131
|
+
document.documentElement.classList.add('search-active');
|
132
|
+
});
|
133
|
+
|
134
|
+
jtd.addEvent(searchInput, 'blur', function(e){
|
135
|
+
// Delay removal to allow for click events
|
136
|
+
setTimeout(function() {
|
137
|
+
if (!searchInput.value.trim()) {
|
138
|
+
document.body.classList.remove('search-active');
|
139
|
+
document.documentElement.classList.remove('search-active');
|
140
|
+
mainHeader.classList.remove('nav-open');
|
141
|
+
}
|
142
|
+
}, 150);
|
143
|
+
});
|
144
|
+
|
145
|
+
// Function to clear search state when closing nav
|
146
|
+
function clearSearchStateIfEmpty() {
|
147
|
+
if (!searchInput.value.trim()) {
|
148
|
+
document.body.classList.remove('search-active');
|
149
|
+
document.documentElement.classList.remove('search-active');
|
150
|
+
}
|
151
|
+
}
|
152
|
+
|
153
|
+
// Add search state clearing to nav close events
|
154
|
+
if (closeButton) {
|
155
|
+
jtd.addEvent(closeButton, 'click', function(e){
|
156
|
+
setTimeout(clearSearchStateIfEmpty, 50);
|
157
|
+
});
|
158
|
+
}
|
159
|
+
|
160
|
+
// Also clear search state when clicking overlay to close nav
|
161
|
+
jtd.addEvent(mobileOverlay, 'click', function(e){
|
162
|
+
setTimeout(clearSearchStateIfEmpty, 50);
|
163
|
+
});
|
164
|
+
}
|
93
165
|
{%- endif %}
|
94
166
|
}
|
95
167
|
|
@@ -155,6 +227,10 @@ function searchLoaded(index, docs) {
|
|
155
227
|
|
156
228
|
function hideSearch() {
|
157
229
|
document.documentElement.classList.remove('search-active');
|
230
|
+
document.body.classList.remove('search-active');
|
231
|
+
if (mainHeader) {
|
232
|
+
mainHeader.classList.remove('nav-open');
|
233
|
+
}
|
158
234
|
}
|
159
235
|
|
160
236
|
function update() {
|
@@ -162,7 +238,11 @@ function searchLoaded(index, docs) {
|
|
162
238
|
|
163
239
|
var input = searchInput.value;
|
164
240
|
if (input === '') {
|
165
|
-
|
241
|
+
// Only hide search if it's not already active/visible
|
242
|
+
if (!document.body.classList.contains('search-active') &&
|
243
|
+
!document.documentElement.classList.contains('search-active')) {
|
244
|
+
hideSearch();
|
245
|
+
}
|
166
246
|
} else {
|
167
247
|
showSearch();
|
168
248
|
// scroll search input into view, workaround for iOS Safari
|
@@ -467,7 +547,22 @@ function searchLoaded(index, docs) {
|
|
467
547
|
});
|
468
548
|
|
469
549
|
jtd.addEvent(document, 'click', function(e){
|
470
|
-
if
|
550
|
+
// Check if the click is on a search button or inside one
|
551
|
+
var target = e.target;
|
552
|
+
var isSearchButton = false;
|
553
|
+
|
554
|
+
while (target && target !== document) {
|
555
|
+
if (target.id === 'search-button' ||
|
556
|
+
target.id === 'mobile-search-button' ||
|
557
|
+
target.classList.contains('search-button') ||
|
558
|
+
target.classList.contains('mobile-search-button')) {
|
559
|
+
isSearchButton = true;
|
560
|
+
break;
|
561
|
+
}
|
562
|
+
target = target.parentNode;
|
563
|
+
}
|
564
|
+
|
565
|
+
if (e.target != searchInput && !isSearchButton) {
|
471
566
|
hideSearch();
|
472
567
|
}
|
473
568
|
});
|