Spaces:
Running on Zero
Running on Zero
fix(ui): conditional header z-index — z-15 default, z-60 only when drawer open
Browse filesHF injects #huggingface-space-header at fixed z-index 20 in the top-right
of the iframe (the heart/share widget). Our .aio-header was z-60 always,
covering it. Lower default to z-15; bump to z-60 via .drawer-elevated
class only while the drawer overlay is up.
JS toggles `.drawer-elevated` on .aio-header in lockstep with
`.drawer-open` on .aio-shell — three call sites: hamburger onclick,
document click-outside dismisser (in <head>), and the mode-button
auto-close. Hamburger × stays clickable when drawer is open; HF widget
visible when it's closed.
app.py
CHANGED
|
@@ -167,6 +167,14 @@ _CUSTOM_CSS = """
|
|
| 167 |
border-bottom: 1px solid #262C35;
|
| 168 |
background: #12161B;
|
| 169 |
position: relative;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 170 |
z-index: 60;
|
| 171 |
}
|
| 172 |
.aio-ham-label {
|
|
@@ -344,9 +352,11 @@ _HEAD_HTML = """
|
|
| 344 |
if (!s || !s.classList.contains("drawer-open")) return;
|
| 345 |
if (e.target.closest(".aio-drawer") || e.target.closest(".aio-ham-label")) return;
|
| 346 |
s.classList.remove("drawer-open");
|
|
|
|
|
|
|
| 347 |
var b = document.querySelector(".aio-ham-label");
|
| 348 |
if (b) {
|
| 349 |
-
b.textContent = "
|
| 350 |
b.setAttribute("aria-expanded", "false");
|
| 351 |
}
|
| 352 |
});
|
|
@@ -366,6 +376,8 @@ def build_app() -> gr.Blocks:
|
|
| 366 |
' <button type="button" class="aio-ham-label" '
|
| 367 |
' onclick="(function(b){var s=document.querySelector(\'.aio-shell\');'
|
| 368 |
'var o=s.classList.toggle(\'drawer-open\');'
|
|
|
|
|
|
|
| 369 |
'b.textContent=o?\'\\u00d7\':\'\\u2261\';'
|
| 370 |
'b.setAttribute(\'aria-expanded\',o?\'true\':\'false\');})(this)" '
|
| 371 |
' aria-expanded="false" aria-label="Toggle navigation">≡</button>'
|
|
@@ -430,6 +442,7 @@ def build_app() -> gr.Blocks:
|
|
| 430 |
f"if (el) el.textContent = {tag!r}; "
|
| 431 |
f"if (window.matchMedia('(max-width: 1023px)').matches) {{ "
|
| 432 |
f" document.querySelector('.aio-shell')?.classList.remove('drawer-open'); "
|
|
|
|
| 433 |
f"}} return []; }}",
|
| 434 |
)
|
| 435 |
|
|
|
|
| 167 |
border-bottom: 1px solid #262C35;
|
| 168 |
background: #12161B;
|
| 169 |
position: relative;
|
| 170 |
+
/* HF injects #huggingface-space-header at fixed z-index 20 (top-right
|
| 171 |
+
like/share widget). Stay below it by default so we don't cover it. */
|
| 172 |
+
z-index: 15;
|
| 173 |
+
}
|
| 174 |
+
/* When drawer is open, lift header above scrim (z-45) and drawer (z-50) so
|
| 175 |
+
the hamburger flips to × and remains clickable as a close affordance.
|
| 176 |
+
Toggled in lockstep with .aio-shell.drawer-open via the inline JS below. */
|
| 177 |
+
.aio-header.drawer-elevated {
|
| 178 |
z-index: 60;
|
| 179 |
}
|
| 180 |
.aio-ham-label {
|
|
|
|
| 352 |
if (!s || !s.classList.contains("drawer-open")) return;
|
| 353 |
if (e.target.closest(".aio-drawer") || e.target.closest(".aio-ham-label")) return;
|
| 354 |
s.classList.remove("drawer-open");
|
| 355 |
+
var h = document.querySelector(".aio-header");
|
| 356 |
+
if (h) h.classList.remove("drawer-elevated");
|
| 357 |
var b = document.querySelector(".aio-ham-label");
|
| 358 |
if (b) {
|
| 359 |
+
b.textContent = "\\u2261";
|
| 360 |
b.setAttribute("aria-expanded", "false");
|
| 361 |
}
|
| 362 |
});
|
|
|
|
| 376 |
' <button type="button" class="aio-ham-label" '
|
| 377 |
' onclick="(function(b){var s=document.querySelector(\'.aio-shell\');'
|
| 378 |
'var o=s.classList.toggle(\'drawer-open\');'
|
| 379 |
+
'var h=document.querySelector(\'.aio-header\');'
|
| 380 |
+
'if(h)h.classList.toggle(\'drawer-elevated\',o);'
|
| 381 |
'b.textContent=o?\'\\u00d7\':\'\\u2261\';'
|
| 382 |
'b.setAttribute(\'aria-expanded\',o?\'true\':\'false\');})(this)" '
|
| 383 |
' aria-expanded="false" aria-label="Toggle navigation">≡</button>'
|
|
|
|
| 442 |
f"if (el) el.textContent = {tag!r}; "
|
| 443 |
f"if (window.matchMedia('(max-width: 1023px)').matches) {{ "
|
| 444 |
f" document.querySelector('.aio-shell')?.classList.remove('drawer-open'); "
|
| 445 |
+
f" document.querySelector('.aio-header')?.classList.remove('drawer-elevated'); "
|
| 446 |
f"}} return []; }}",
|
| 447 |
)
|
| 448 |
|