diff --git a/src/css/doc.css b/src/css/doc.css index 2c7715b0..fc5813b9 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -89,7 +89,8 @@ html { .component-indicator-sticky { display: flex; align-items: center; - gap: 12px; + flex-wrap: wrap; + gap: 8px 12px; position: sticky; top: var(--body-top, 100px); z-index: 50; @@ -301,6 +302,12 @@ html[data-theme="dark"] .component-indicator-sticky .context-dropdown-item:focus justify-content: flex-start; } + /* Metadata is left-aligned on mobile, so anchor dropdown menus left to keep them on screen */ + .component-indicator-sticky .context-dropdown-menu { + right: auto; + left: 0; + } + html[data-theme="dark"] .component-indicator-sticky .metadata-inline { border-top-color: rgba(255, 255, 255, 0.06); } @@ -512,6 +519,66 @@ html[data-theme="dark"] .status-badge--cloud { border-color: rgba(14, 165, 233, 0.3); } +/* Availability badges: links to the other platform's version of this page */ +a.status-badge--cloud-link, +a.status-badge--self-managed-link { + text-decoration: none; +} + +.status-badge--cloud-link { + background: #e0f2fe; + color: #0369a1; + border: 1px solid #7dd3fc; +} + +.status-badge--cloud-link:hover { + background: #bae6fd; + color: #075985; +} + +.status-badge--self-managed-link { + background: #dcfce7; + color: #15803d; + border: 1px solid #86efac; +} + +.status-badge--self-managed-link:hover { + background: #bbf7d0; + color: #166534; +} + +.status-badge--self-managed-only { + background: var(--grey-100-new, #f3f4f6); + color: #4b5563; + border: 1px solid var(--grey-200-new, #e5e5e5); +} + +html[data-theme="dark"] .status-badge--cloud-link { + background: rgba(14, 165, 233, 0.15); + color: #7dd3fc; + border-color: rgba(14, 165, 233, 0.3); +} + +html[data-theme="dark"] .status-badge--cloud-link:hover { + background: rgba(14, 165, 233, 0.25); +} + +html[data-theme="dark"] .status-badge--self-managed-link { + background: rgba(34, 197, 94, 0.15); + color: #86efac; + border-color: rgba(34, 197, 94, 0.3); +} + +html[data-theme="dark"] .status-badge--self-managed-link:hover { + background: rgba(34, 197, 94, 0.25); +} + +html[data-theme="dark"] .status-badge--self-managed-only { + background: rgba(148, 163, 184, 0.12); + color: #cbd5e1; + border-color: rgba(148, 163, 184, 0.25); +} + @media screen and (min-width: 600px) { .doc .openblock.side-by-side > .content { display: flex; diff --git a/src/helpers/resolve-resource.js b/src/helpers/resolve-resource.js index 96933cfe..018ecf1f 100644 --- a/src/helpers/resolve-resource.js +++ b/src/helpers/resolve-resource.js @@ -57,6 +57,12 @@ module.exports = (resource, { data, hash: context }) => { return resource } + // Root-relative URLs pass through (e.g. pub.url values set by extensions such as + // the component_type_dropdown macro's page-context-switcher attribute) + if (resource.startsWith('/')) { + return resource + } + // Handle special keyword "current" - not a valid resource ID // This is sometimes incorrectly used to mean "current page" or "current version" if (resource === 'current') { diff --git a/src/js/24-move-connector-metadata.js b/src/js/24-move-connector-metadata.js index 4e4f5f31..8c8de982 100644 --- a/src/js/24-move-connector-metadata.js +++ b/src/js/24-move-connector-metadata.js @@ -18,6 +18,10 @@ const metadataInline = document.createElement('div') metadataInline.className = 'metadata-inline' + // Elements whose content now lives in the sticky bar, to hide in place. + // Anything else in the metadata block (e.g. license requirements) must stay visible. + const movedElements = [] + // Move the Type dropdown if it exists const typeDropdownWrapper = metadataContent.querySelector('.dropdown-wrapper') if (typeDropdownWrapper) { @@ -116,6 +120,7 @@ contextDropdown.appendChild(compactMenu) contextSwitcher.appendChild(contextDropdown) metadataInline.appendChild(contextSwitcher) + movedElements.push(typeDropdownWrapper) } } @@ -264,6 +269,7 @@ availabilityDropdown.appendChild(dropdownButton) availabilityDropdown.appendChild(dropdownMenu) metadataInline.appendChild(availabilityDropdown) + movedElements.push(availabilityPara) } } @@ -277,8 +283,19 @@ stickyBar.appendChild(metadataInline) } - // Hide the original metadata block - metadataBlock.style.display = 'none' + // Hide only the elements now represented in the sticky bar + movedElements.forEach((el) => { + el.style.display = 'none' + }) + + // Hide the whole block only if nothing meaningful remains + // (license requirements and other notices must stay visible) + const hasRemainingContent = Array.from(metadataContent.children).some( + (el) => el.style.display !== 'none' && el.textContent.trim() !== '' + ) + if (!hasRemainingContent) { + metadataBlock.style.display = 'none' + } } }