Skip to content

Commit 1568c2b

Browse files
AMDphreakAMDphreak
committed
fix(ui): breadcrumb dropdowns — single options, one blue, vertical lists
- Never disable version kicker; add fallback menu when page.versions is empty (single-version site). - Use CSS variables for component + version kickers (same --ftn-bc-kicker-fg in light/dark). - Force #ftn-bc-proj / #ftn-bc-ver to block, single column, full-width rows; long component names wrap. - JS: always bind toggles to lists (no early exit on disabled). Made-with: Cursor
1 parent 9b455d9 commit 1568c2b

3 files changed

Lines changed: 120 additions & 19 deletions

File tree

‎site/supplemental-ui/css/site-ftn-docs.css‎

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@
66
--ftn-mast-h: 2.75rem;
77
--ftn-mast-total: calc(3.5rem + var(--ftn-mast-h));
88
--ftn-font: "Source Sans 3", system-ui, "Segoe UI", sans-serif;
9+
/* Component + version breadcrumb kickers (same color for both) */
10+
--ftn-bc-kicker-fg: #1976d2;
11+
--ftn-bc-kicker-bg: rgba(0, 0, 0, 0.04);
12+
--ftn-bc-kicker-border: #ddd;
13+
}
14+
15+
html.dark-theme {
16+
--ftn-bc-kicker-fg: #8ec5ff;
17+
--ftn-bc-kicker-bg: rgba(255, 255, 255, 0.06);
18+
--ftn-bc-kicker-border: rgba(255, 255, 255, 0.12);
919
}
1020

1121
html {
@@ -474,25 +484,15 @@ html.dark-theme .ftn-bc-sep {
474484
font-weight: 600;
475485
line-height: 1.35;
476486
text-align: left;
477-
color: #1976d2;
478-
background: rgba(0, 0, 0, 0.04);
479-
border: 1px solid #ddd;
487+
color: var(--ftn-bc-kicker-fg);
488+
background: var(--ftn-bc-kicker-bg);
489+
border: 1px solid var(--ftn-bc-kicker-border);
480490
border-radius: 0.2rem;
481491
cursor: pointer;
482492
white-space: nowrap;
483493
overflow: hidden;
484494
text-overflow: ellipsis;
485-
}
486-
487-
html.dark-theme .ftn-bc-kicker {
488-
color: #8ec5ff;
489-
background: rgba(255, 255, 255, 0.06);
490-
border-color: rgba(255, 255, 255, 0.12);
491-
}
492-
493-
.ftn-bc-kicker:disabled {
494-
opacity: 0.45;
495-
cursor: default;
495+
opacity: 1;
496496
}
497497

498498
.ftn-bc-kicker-version {
@@ -514,16 +514,61 @@ html.dark-theme .ftn-bc-kicker {
514514
max-width: 20rem;
515515
max-height: 16rem;
516516
overflow-y: auto;
517+
overflow-x: hidden;
517518
z-index: 20;
518519
padding: 0.2rem 0;
519520
list-style: none;
520-
display: block;
521-
column-count: 1;
521+
display: block !important;
522+
flex-wrap: nowrap !important;
523+
flex-direction: column !important;
524+
columns: 1 !important;
522525
white-space: normal;
523526
background: #fff;
524527
border: 1px solid #ccc;
525528
border-radius: 0.2rem;
526529
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.12);
530+
box-sizing: border-box;
531+
}
532+
533+
/* Single column, full-width rows (override bundle / spectrum flex or multi-col creep) */
534+
.ftn-bc-dropdown--components,
535+
.ftn-bc-dropdown--version,
536+
#ftn-bc-proj,
537+
#ftn-bc-ver {
538+
display: block !important;
539+
width: max-content;
540+
min-width: min(100%, 12rem);
541+
max-width: min(100vw - 1.5rem, 24rem) !important;
542+
}
543+
544+
.ftn-bc-dropdown--components > li,
545+
.ftn-bc-dropdown--version > li,
546+
#ftn-bc-proj > li,
547+
#ftn-bc-ver > li {
548+
display: block !important;
549+
width: 100% !important;
550+
max-width: 100% !important;
551+
float: none !important;
552+
clear: both !important;
553+
box-sizing: border-box;
554+
}
555+
556+
#ftn-bc-proj .ftn-bc-menu-item a {
557+
display: block !important;
558+
width: 100%;
559+
box-sizing: border-box;
560+
white-space: normal;
561+
word-break: break-word;
562+
overflow-wrap: anywhere;
563+
}
564+
565+
#ftn-bc-ver .ftn-bc-menu-item a {
566+
display: block !important;
567+
width: 100%;
568+
box-sizing: border-box;
569+
white-space: nowrap;
570+
overflow: hidden;
571+
text-overflow: ellipsis;
527572
}
528573

529574
html.dark-theme .ftn-bc-dropdown {

‎site/supplemental-ui/js/site-ftn-accordion.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
;(function () {
2+
'use strict'
3+
var doc = document
4+
function initBreadcrumbDropdowns () {
5+
;[].forEach.call(doc.querySelectorAll('.ftn-bc-dropdown'), function (el) {
6+
el.addEventListener('click', function (e) { e.stopPropagation() })
7+
})
8+
;[].forEach.call(doc.querySelectorAll('[data-ftn-toggle]'), function (button) {
9+
if (button.getAttribute('data-ftn-bound')) return
10+
button.setAttribute('data-ftn-bound', '1')
11+
var id = button.getAttribute('data-ftn-toggle')
12+
if (!id) return
13+
var list = doc.getElementById(id)
14+
if (!list) return
15+
button.addEventListener('click', function (e) {
16+
e.preventDefault()
17+
e.stopPropagation()
18+
var isHidden = list.hasAttribute('hidden')
19+
;[].forEach.call(doc.querySelectorAll('.ftn-bc-dropdown'), function (dd) {
20+
if (dd === list) return
21+
dd.setAttribute('hidden', 'hidden')
22+
})
23+
;[].forEach.call(doc.querySelectorAll('[data-ftn-toggle]'), function (b) {
24+
b.setAttribute('aria-expanded', 'false')
25+
})
26+
if (isHidden) {
27+
list.removeAttribute('hidden')
28+
button.setAttribute('aria-expanded', 'true')
29+
} else {
30+
list.setAttribute('hidden', 'hidden')
31+
button.setAttribute('aria-expanded', 'false')
32+
}
33+
})
34+
})
35+
doc.addEventListener('click', function () {
36+
;[].forEach.call(doc.querySelectorAll('.ftn-bc-dropdown'), function (el) {
37+
el.setAttribute('hidden', 'hidden')
38+
})
39+
;[].forEach.call(doc.querySelectorAll('[data-ftn-toggle]'), function (b) {
40+
b.setAttribute('aria-expanded', 'false')
41+
})
42+
})
43+
}
44+
if (doc.readyState === 'loading') {
45+
doc.addEventListener('DOMContentLoaded', initBreadcrumbDropdowns)
46+
} else {
47+
initBreadcrumbDropdowns()
48+
}
49+
})()

‎site/supplemental-ui/partials/breadcrumbs.hbs‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<button type="button" class="ftn-bc-kicker" data-ftn-toggle="ftn-bc-proj" aria-haspopup="listbox" aria-expanded="false" aria-label="Switch documentation component">
1616
<span class="ftn-bc-kicker-label">{{#if page.component}}{{{page.component.title}}}{{else}}{{{site.title}}}{{/if}}</span>
1717
</button>
18-
<ul class="ftn-bc-dropdown" id="ftn-bc-proj" role="listbox" hidden>
18+
<ul class="ftn-bc-dropdown ftn-bc-dropdown--components" id="ftn-bc-proj" role="listbox" hidden>
1919
{{#each site.components}}
2020
<li role="none" class="ftn-bc-menu-item">
2121
<a href="{{{relativize ./url}}}" class="{{#if (eq this @root.page.component)}}is-current{{/if}}">{{{./title}}}</a>
@@ -25,17 +25,24 @@
2525
</div>
2626
<span class="ftn-bc-sep" aria-hidden="true">|</span>
2727
<div class="ftn-bc-menu ftn-bc-menu-version">
28-
<button type="button" class="ftn-bc-kicker" data-ftn-toggle="ftn-bc-ver" aria-haspopup="listbox" aria-expanded="false" aria-label="This page in other versions"{{#unless @root.page.versions}} disabled title="No other versions of this page"{{/unless}}>
28+
<button type="button" class="ftn-bc-kicker" data-ftn-toggle="ftn-bc-ver" aria-haspopup="listbox" aria-expanded="false" aria-label="Select documentation version">
2929
<span class="ftn-bc-kicker-version">{{#if @root.page.componentVersion.displayVersion}}{{@root.page.componentVersion.displayVersion}}{{else if @root.page.version}}{{@root.page.version}}{{/if}}</span>
3030
</button>
3131
{{#if @root.page.versions}}
32-
<ul class="ftn-bc-dropdown" id="ftn-bc-ver" role="listbox" hidden>
32+
<ul class="ftn-bc-dropdown ftn-bc-dropdown--version" id="ftn-bc-ver" role="listbox" hidden>
3333
{{#each @root.page.versions}}
3434
<li role="none" class="ftn-bc-menu-item">
3535
<a href="{{{relativize ./url}}}" class="ftn-bc-version-pill{{#if (eq ./version @root.page.version)}} is-current{{/if}}{{#if ./missing}} is-missing{{/if}}"{{#if (eq ./version @root.page.version)}} aria-current="page"{{/if}}>{{./displayVersion}}</a>
3636
</li>
3737
{{/each}}
3838
</ul>
39+
{{else if @root.page.componentVersion}}
40+
{{! Antora may omit page.versions on single-version sites — still show one option so the control is not “dead”/disabled. }}
41+
<ul class="ftn-bc-dropdown ftn-bc-dropdown--version" id="ftn-bc-ver" role="listbox" hidden>
42+
<li role="none" class="ftn-bc-menu-item">
43+
<a href="{{{relativize @root.page.componentVersion.url}}}" class="ftn-bc-version-pill is-current" aria-current="page">{{#if @root.page.componentVersion.displayVersion}}{{@root.page.componentVersion.displayVersion}}{{else}}{{@root.page.version}}{{/if}}</a>
44+
</li>
45+
</ul>
3946
{{/if}}
4047
</div>
4148
</div>

0 commit comments

Comments
 (0)