soroushdes/hamkadr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Fix] Mobile hamburger invisible + tour spotlighting hidden nav
CI/CD / CI · dotnet build (push) Successful in 52s
Details
CI/CD / Deploy · hamkadr (push) Successful in 57s
Details

Browse Source 
Hamburger bars used the undefined var(--text) (this theme defines --ink), so they rendered transparent and the button looked blank on mobile. Switch the three var(--text) uses (burger bars, toast, tour bubble) to var(--ink). Tour: visible() used offsetParent/rect, which the collapsed mobile nav (visibility:hidden) still satisfies, so the tour tried to spotlight hidden links and looked broken on mobile. Use element.checkVisibility({checkVisibilityCSS}) (with a computed-style ancestor-walk fallback) so only truly-visible targets are toured — mobile now shows welcome + menu, desktop shows the full nav walkthrough.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-04 18:06:23 +03:30
parent cea27c8684
commit 42deac1261
2 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/JobsMedical.Web/wwwroot/css/site.css
+3 -3
View File
@@ -82,7 +82,7 @@ a { color: inherit; text-decoration: none; }
width: 42px; height: 42px; padding: 9px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--line); background: var(--surface);
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@@ -96,7 +96,7 @@ a { color: inherit; text-decoration: none; }
.toast {
display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--primary);
border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); color: var(--text);
border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); color: var(--ink);
opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateY(0); }
@@ -243,7 +243,7 @@ label { font-size: 13px; }
outline: 2px solid var(--accent); transition: all .2s ease;
}
.tour-bubble {
position: fixed; z-index: 1001; background: var(--surface); color: var(--text);
position: fixed; z-index: 1001; background: var(--surface); color: var(--ink);
border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
padding: 16px; max-width: 320px;
}
src/JobsMedical.Web/wwwroot/js/tour.js
+12 -1
View File
@@ -23,8 +23,19 @@
function visible(el) {
if (!el) return false;
// checkVisibility() correctly accounts for visibility:hidden / display:none on ANY
// ancestor — crucial here because the mobile nav is collapsed with visibility:hidden
// but its links still report a non-zero bounding box (they'd falsely pass otherwise).
if (typeof el.checkVisibility === 'function') {
if (!el.checkVisibility({ checkVisibilityCSS: true, opacityProperty: true })) return false;
} else {
for (var n = el; n && n.nodeType === 1; n = n.parentElement) {
var cs = getComputedStyle(n);
if (cs.display === 'none' || cs.visibility === 'hidden' || cs.visibility === 'collapse') return false;
}
}
var r = el.getBoundingClientRect();
return el.offsetParent !== null && r.width > 0 && r.height > 0;
return r.width > 1 && r.height > 1;
}
function build() {