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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 52ad30bc234f2c88e25cbf28ecfed428e59592fb5eb72032f2177f3c0a2b3a75
4
- data.tar.gz: 4b06e9324cd90e9036f58dffbb301f6d20ca1939e68327aabcf9d348d76110b1
3
+ metadata.gz: fba2933df6e923516834811b07bbb917a5d438c76fa865da595a0f6a9355e268
4
+ data.tar.gz: e2ce7fe989d83601bc683abe26e1b1b0a161890445b9b16b3b5b8d1a35d3193c
5
5
  SHA512:
6
- metadata.gz: 999b02316e61eff711b6dcddd718e72bdddef140fe9b07ad6ef29f7a8e80525a709635959b9e18b597a95a440bd305a091b26c8ff6e19a81b1f6c8590700ef91
7
- data.tar.gz: 2ee1ac77ba641acd33d2faca54be3585d9daeace984e8234c444536433bf3d6a8f04026193ddb7a55002f4580e6ec1fc1e9aa4ccdb083057e7c1b5e41a6e8542
6
+ metadata.gz: 88b37f4db6a79ca7c2f46865ab9c946b19bcabe13126add9f9cf6f841c90e302363dba1257ee85196cf6b71bbb7bd204fe210a4a387af99e14035ef3173a1e3d
7
+ data.tar.gz: 6fbfd3b32d32032b7bd8439fee2040aee2bfe01eff3786bece89fcfa22d19014ac1e86ce9aed57f4a1b220b6460787c1698933d696e1d2e6342fcddd8f924809
@@ -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
  }
@@ -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 and site.search.button %}
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
- mainHeader.classList.add('nav-open');
91
- searchInput.focus();
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
- hideSearch();
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 (e.target != searchInput) {
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
  });
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fni-docs-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.6.3
4
+ version: 0.6.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Patrick Marsceill