mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-10-01 22:49:14 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Zeno Kapitein
|
e5fa76ea3c | ||
|
Zeno Kapitein
|
a5dc31a791 |
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"gitbook": patch
|
||||
---
|
||||
|
||||
Keep secondary buttons' background in the flat depth style so they stay visible (instead of becoming transparent).
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"gitbook": patch
|
||||
---
|
||||
|
||||
Keep the page actions bar ("On this page" and the assistant/page actions) pinned to the top of the viewport while scrolling on non-mobile viewports, so it stays reachable on long pages such as API references.
|
||||
@@ -149,7 +149,9 @@
|
||||
}
|
||||
|
||||
.openapi-column-preview {
|
||||
@apply flex flex-col flex-1 xl:max-2xl:pt-20 lg:pt-6 sticky self-start max-h-[calc(100vh-var(--toc-top-offset))] top-(--toc-top-offset);
|
||||
/* Shift down by ~2rem so the pinned preview clears the sticky "On this page" /
|
||||
page-actions bar below the header, and leave a 1rem gap at the bottom of the viewport. */
|
||||
@apply flex flex-col flex-1 xl:max-2xl:pt-8 lg:pt-6 sticky self-start max-h-[calc(100vh-var(--toc-top-offset)-3rem)] top-[calc(var(--toc-top-offset)+2rem)];
|
||||
}
|
||||
|
||||
.openapi-column-preview-body {
|
||||
|
||||
@@ -47,11 +47,34 @@ export async function PageHeader(props: {
|
||||
}
|
||||
|
||||
return (
|
||||
<header className={tcls(CONTENT_STYLE, 'mb-6 space-y-3 after:clear-both after:block')}>
|
||||
<>
|
||||
{/* Page actions (assistant, "On this page", ...). Rendered as a sibling of the
|
||||
<header> — i.e. a direct child of the scrolling <main> — so that on larger screens
|
||||
it can stick to the top of the viewport while the page is scrolled. If it lived
|
||||
inside the <header>, its sticky containing block would be the short header and it
|
||||
would scroll away with it. */}
|
||||
<div
|
||||
className={tcls(
|
||||
'float-right ml-4 flex gap-2',
|
||||
hasAncestors ? '-my-0.5' : '-mt-3 xs:mt-2'
|
||||
hasAncestors ? '-my-0.5' : '-mt-3 xs:mt-2',
|
||||
|
||||
// Stick to the top of the viewport on non-mobile viewports so the actions
|
||||
// remain reachable while reading long pages (e.g. API references).
|
||||
'lg:sticky lg:z-20',
|
||||
|
||||
// When the "On this page" panel is expanded as an overlay, drop below it
|
||||
// so the sticky actions don't show on top of the open panel.
|
||||
'lg:[body.outline-open_&]:z-0',
|
||||
|
||||
// Server-side static positioning, padded slightly below the site header
|
||||
// (unlike the TOC/outline, which sit flush against it).
|
||||
'lg:top-3',
|
||||
'lg:site-header:top-[4.75rem]',
|
||||
'lg:site-header-sections:top-[7.5rem]',
|
||||
|
||||
// Client-side dynamic positioning (CSS var applied by TableOfContentsScript),
|
||||
// kept consistent with the outline so both account for headers/banners/covers.
|
||||
'lg:[html[style*="--outline-top-offset"]_&]:top-[calc(var(--outline-top-offset)+0.75rem)]!'
|
||||
)}
|
||||
>
|
||||
{hasPageActions ? (
|
||||
@@ -70,78 +93,87 @@ export async function PageHeader(props: {
|
||||
<PageAsideToggleButton />
|
||||
</div>
|
||||
|
||||
{hasAncestors && (
|
||||
<nav aria-label="Breadcrumb" className="text-tint leading-snug">
|
||||
<ol className="inline">
|
||||
{ancestors.map((breadcrumb, index) => {
|
||||
const href = linker.toPathForPage({
|
||||
pages: revision.pages,
|
||||
page: breadcrumb,
|
||||
});
|
||||
return (
|
||||
<li key={breadcrumb.id} className="inline">
|
||||
<StyledLink
|
||||
href={href}
|
||||
className={tcls(
|
||||
'inline',
|
||||
'no-underline',
|
||||
'hover:underline',
|
||||
'text-xs',
|
||||
'tracking-wide',
|
||||
'font-semibold',
|
||||
'uppercase',
|
||||
'items-center',
|
||||
'contrast-more:underline',
|
||||
'contrast-more:decoration-current'
|
||||
<header className={tcls(CONTENT_STYLE, 'mb-6 space-y-3 after:clear-both after:block')}>
|
||||
{hasAncestors && (
|
||||
<nav aria-label="Breadcrumb" className="text-tint leading-snug">
|
||||
<ol className="inline">
|
||||
{ancestors.map((breadcrumb, index) => {
|
||||
const href = linker.toPathForPage({
|
||||
pages: revision.pages,
|
||||
page: breadcrumb,
|
||||
});
|
||||
return (
|
||||
<li key={breadcrumb.id} className="inline">
|
||||
<StyledLink
|
||||
href={href}
|
||||
className={tcls(
|
||||
'inline',
|
||||
'no-underline',
|
||||
'hover:underline',
|
||||
'text-xs',
|
||||
'tracking-wide',
|
||||
'font-semibold',
|
||||
'uppercase',
|
||||
'items-center',
|
||||
'contrast-more:underline',
|
||||
'contrast-more:decoration-current'
|
||||
)}
|
||||
>
|
||||
<PageIcon
|
||||
page={breadcrumb}
|
||||
style="mr-1 inline size-3.5 shrink-0"
|
||||
/>
|
||||
{breadcrumb.title}
|
||||
</StyledLink>
|
||||
{index !== ancestors.length - 1 && (
|
||||
<Icon
|
||||
aria-hidden
|
||||
icon="chevron-right"
|
||||
className="mx-2 inline-flex size-2 text-tint-subtle"
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<PageIcon
|
||||
page={breadcrumb}
|
||||
style="mr-1 inline size-3.5 shrink-0"
|
||||
/>
|
||||
{breadcrumb.title}
|
||||
</StyledLink>
|
||||
{index !== ancestors.length - 1 && (
|
||||
<Icon
|
||||
aria-hidden
|
||||
icon="chevron-right"
|
||||
className="mx-2 inline-flex size-2 text-tint-subtle"
|
||||
/>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</nav>
|
||||
)}
|
||||
<PageTags page={page} revision={revision} />
|
||||
{page.layout.title ? (
|
||||
<h1
|
||||
className={tcls(
|
||||
'text-2xl',
|
||||
'@xs:text-3xl',
|
||||
'@lg:text-4xl',
|
||||
'leading-tight',
|
||||
'font-bold',
|
||||
'flex',
|
||||
'items-center',
|
||||
'gap-[.5em]',
|
||||
'grow',
|
||||
'text-pretty',
|
||||
'clear-right',
|
||||
'xs:clear-none'
|
||||
)}
|
||||
>
|
||||
<PageIcon page={page} style={['text-tint-subtle ', 'shrink-0']} />
|
||||
{page.title}
|
||||
</h1>
|
||||
) : null}
|
||||
{page.description && page.layout.description ? (
|
||||
<p className={tcls(CONTENT_STYLE_REDUCED, 'text-lg', 'text-tint', 'clear-both')}>
|
||||
{page.description}
|
||||
</p>
|
||||
) : null}
|
||||
</header>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
</nav>
|
||||
)}
|
||||
<PageTags page={page} revision={revision} />
|
||||
{page.layout.title ? (
|
||||
<h1
|
||||
className={tcls(
|
||||
'text-2xl',
|
||||
'@xs:text-3xl',
|
||||
'@lg:text-4xl',
|
||||
'leading-tight',
|
||||
'font-bold',
|
||||
'flex',
|
||||
'items-center',
|
||||
'gap-[.5em]',
|
||||
'grow',
|
||||
'text-pretty',
|
||||
'clear-right',
|
||||
'xs:clear-none'
|
||||
)}
|
||||
>
|
||||
<PageIcon page={page} style={['text-tint-subtle ', 'shrink-0']} />
|
||||
{page.title}
|
||||
</h1>
|
||||
) : null}
|
||||
{page.description && page.layout.description ? (
|
||||
<p
|
||||
className={tcls(
|
||||
CONTENT_STYLE_REDUCED,
|
||||
'text-lg',
|
||||
'text-tint',
|
||||
'clear-both'
|
||||
)}
|
||||
>
|
||||
{page.description}
|
||||
</p>
|
||||
) : null}
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -58,10 +58,8 @@ export const variantClasses = {
|
||||
],
|
||||
secondary: [
|
||||
'bg-tint',
|
||||
'depth-flat:bg-transparent',
|
||||
'text-tint',
|
||||
'hover:bg-tint-hover',
|
||||
'hover:not-disabled:depth-flat:bg-tint-hover',
|
||||
'hover:not-disabled:text-tint',
|
||||
'contrast-more:bg-tint-subtle',
|
||||
'disabled:bg-transparent',
|
||||
|
||||
Reference in New Issue
Block a user