fni-docs-theme 0.6.3 → 0.6.4

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: 5da153deee1782c2f6ea5f63ef757b28dfc09efa7e0f4e6f8dfb72915a838d21
4
+ data.tar.gz: 94097ecbd14efbfdb0f6aa2f158ab69a7f5fb1950ba4b98c8397d424d1d32895
5
5
  SHA512:
6
- metadata.gz: 999b02316e61eff711b6dcddd718e72bdddef140fe9b07ad6ef29f7a8e80525a709635959b9e18b597a95a440bd305a091b26c8ff6e19a81b1f6c8590700ef91
7
- data.tar.gz: 2ee1ac77ba641acd33d2faca54be3585d9daeace984e8234c444536433bf3d6a8f04026193ddb7a55002f4580e6ec1fc1e9aa4ccdb083057e7c1b5e41a6e8542
6
+ metadata.gz: 968ac6ee68c5b97311e7632abb2802194cdc879be641e22f8833a115328237e6ff5b3c1b7c542cc2034d9f0b7114c012a51de54891faef89761d1248209adf50
7
+ data.tar.gz: af9906fdec4ae17b3e12de632541a6c5082929631ca825d406adc05b9322e35fbdc1fcf558d29eaacc18ab575b90c80941b8ae08aaacbba3fed7ce4e7c5988c1
@@ -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
  }
@@ -53,6 +53,16 @@ function initNav() {
53
53
  siteNav.classList.add('nav-open');
54
54
  mainHeader.classList.add('nav-open');
55
55
  document.body.classList.add('nav-open');
56
+
57
+ // Clear search state when nav opens to prevent overlay conflicts
58
+ {%- if site.search_enabled != false %}
59
+ if (searchInput && document.body.classList.contains('search-active')) {
60
+ searchInput.value = '';
61
+ document.body.classList.remove('search-active');
62
+ document.documentElement.classList.remove('search-active');
63
+ mainHeader.classList.remove('nav-open');
64
+ }
65
+ {%- endif %}
56
66
  } else {
57
67
  siteNav.classList.remove('nav-open');
58
68
  mainHeader.classList.remove('nav-open');
@@ -80,16 +90,76 @@ function initNav() {
80
90
  }
81
91
  });
82
92
 
83
- {%- if site.search_enabled != false and site.search.button %}
93
+ {%- if site.search_enabled != false %}
84
94
  const searchInput = document.getElementById('search-input');
85
95
  const searchButton = document.getElementById('search-button');
96
+ const mobileSearchButton = document.getElementById('mobile-search-button');
86
97
 
87
- jtd.addEvent(searchButton, 'click', function(e){
88
- e.preventDefault();
98
+ {%- if site.search.button %}
99
+ if (searchButton) {
100
+ jtd.addEvent(searchButton, 'click', function(e){
101
+ e.preventDefault();
89
102
 
90
- mainHeader.classList.add('nav-open');
91
- searchInput.focus();
92
- });
103
+ mainHeader.classList.add('nav-open');
104
+ if (searchInput) {
105
+ searchInput.focus();
106
+ }
107
+ });
108
+ }
109
+ {%- endif %}
110
+
111
+ // Mobile search button functionality
112
+ if (mobileSearchButton) {
113
+ jtd.addEvent(mobileSearchButton, 'click', function(e){
114
+ e.preventDefault();
115
+
116
+ if (searchInput) {
117
+ mainHeader.classList.add('nav-open');
118
+ document.body.classList.add('search-active');
119
+ document.documentElement.classList.add('search-active');
120
+ searchInput.focus();
121
+ }
122
+ });
123
+ }
124
+
125
+ // Handle search input focus/blur to manage state
126
+ if (searchInput) {
127
+ jtd.addEvent(searchInput, 'focus', function(e){
128
+ document.body.classList.add('search-active');
129
+ document.documentElement.classList.add('search-active');
130
+ });
131
+
132
+ jtd.addEvent(searchInput, 'blur', function(e){
133
+ // Delay removal to allow for click events
134
+ setTimeout(function() {
135
+ if (!searchInput.value.trim()) {
136
+ document.body.classList.remove('search-active');
137
+ document.documentElement.classList.remove('search-active');
138
+ mainHeader.classList.remove('nav-open');
139
+ }
140
+ }, 150);
141
+ });
142
+
143
+ // Function to clear search state when closing nav
144
+ function clearSearchStateIfEmpty() {
145
+ if (!searchInput.value.trim()) {
146
+ document.body.classList.remove('search-active');
147
+ document.documentElement.classList.remove('search-active');
148
+ }
149
+ }
150
+
151
+ // Add search state clearing to nav close events
152
+ if (closeButton) {
153
+ jtd.addEvent(closeButton, 'click', function(e){
154
+ setTimeout(clearSearchStateIfEmpty, 50);
155
+ });
156
+ }
157
+
158
+ // Also clear search state when clicking overlay to close nav
159
+ jtd.addEvent(mobileOverlay, 'click', function(e){
160
+ setTimeout(clearSearchStateIfEmpty, 50);
161
+ });
162
+ }
93
163
  {%- endif %}
94
164
  }
95
165
 
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.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Patrick Marsceill