Skip to content

Commit 4a682ae

Browse files
nolannbironnolannbiron
committed
Remove scroll-nojump utility and update layout structure
Eliminated the .scroll-nojump utility and related CSS from globals.css and refactored layout components (Header, Footer, AnnouncementBanner, SpaceLayout) to remove unnecessary wrapper divs. Updated scrollbar styling to use native CSS properties for improved consistency and maintainability.
1 parent 250c194 commit 4a682ae

File tree

5 files changed

+326
-367
lines changed

5 files changed

+326
-367
lines changed

‎packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -34,68 +34,66 @@ export function AnnouncementBanner(props: {
3434
className="theme-bold:bg-header-background pt-4 pb-2"
3535
data-nosnippet=""
3636
>
37-
<div className="scroll-nojump">
38-
<div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
39-
<div className={tcls('relative', CONTAINER_STYLE)}>
40-
<Tag
41-
href={contentRef?.href ?? ''}
42-
className={tcls(
43-
'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
44-
style.container,
45-
closeable && 'pr-12',
46-
hasLink && style.hover
47-
)}
48-
insights={
49-
announcement.link
50-
? {
51-
type: 'link_click',
52-
link: {
53-
target: announcement.link.to,
54-
position: SiteInsightsLinkPosition.Announcement,
55-
},
56-
}
57-
: undefined
58-
}
37+
<div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
38+
<div className={tcls('relative', CONTAINER_STYLE)}>
39+
<Tag
40+
href={contentRef?.href ?? ''}
41+
className={tcls(
42+
'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
43+
style.container,
44+
closeable && 'pr-12',
45+
hasLink && style.hover
46+
)}
47+
insights={
48+
announcement.link
49+
? {
50+
type: 'link_click',
51+
link: {
52+
target: announcement.link.to,
53+
position: SiteInsightsLinkPosition.Announcement,
54+
},
55+
}
56+
: undefined
57+
}
58+
>
59+
<Icon
60+
icon={style.icon as IconName}
61+
className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
62+
/>
63+
<div>
64+
{announcement.message}
65+
{hasLink ? (
66+
<div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
67+
{contentRef?.icon ? (
68+
<span className="mr-1 ml-2 *:inline">
69+
{contentRef?.icon}
70+
</span>
71+
) : null}
72+
{announcement.link?.title && (
73+
<span className="mr-1">{announcement.link?.title}</span>
74+
)}
75+
<Icon
76+
icon={
77+
announcement.link?.to.kind === 'url'
78+
? 'arrow-up-right'
79+
: 'chevron-right'
80+
}
81+
className={tcls('mb-0.5 inline size-3')}
82+
/>
83+
</div>
84+
) : null}
85+
</div>
86+
</Tag>
87+
{closeable ? (
88+
<button
89+
className={`absolute top-0 right-4 mt-2 mr-2 rounded circular-corners:rounded-lg straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
90+
type="button"
91+
onClick={dismissAnnouncement}
92+
title={tString(language, 'close')}
5993
>
60-
<Icon
61-
icon={style.icon as IconName}
62-
className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
63-
/>
64-
<div>
65-
{announcement.message}
66-
{hasLink ? (
67-
<div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
68-
{contentRef?.icon ? (
69-
<span className="mr-1 ml-2 *:inline">
70-
{contentRef?.icon}
71-
</span>
72-
) : null}
73-
{announcement.link?.title && (
74-
<span className="mr-1">{announcement.link?.title}</span>
75-
)}
76-
<Icon
77-
icon={
78-
announcement.link?.to.kind === 'url'
79-
? 'arrow-up-right'
80-
: 'chevron-right'
81-
}
82-
className={tcls('mb-0.5 inline size-3')}
83-
/>
84-
</div>
85-
) : null}
86-
</div>
87-
</Tag>
88-
{closeable ? (
89-
<button
90-
className={`absolute top-0 right-4 mt-2 mr-2 rounded circular-corners:rounded-lg straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
91-
type="button"
92-
onClick={dismissAnnouncement}
93-
title={tString(language, 'close')}
94-
>
95-
<Icon icon="close" className="size-4" />
96-
</button>
97-
) : null}
98-
</div>
94+
<Icon icon="close" className="size-4" />
95+
</button>
96+
) : null}
9997
</div>
10098
</div>
10199
</div>

‎packages/gitbook/src/components/Footer/Footer.tsx

Lines changed: 98 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -32,111 +32,109 @@ export function Footer(props: { context: GitBookSiteContext }) {
3232
mobileOnly ? 'xl:hidden' : null
3333
)}
3434
>
35-
<div className="scroll-nojump">
36-
<div className={tcls(CONTAINER_STYLE, 'px-4', 'py-8', 'lg:py-12', 'mx-auto')}>
37-
<div
38-
className={tcls(
39-
'lg:!max-w-none mx-auto grid max-w-3xl site-width-wide:max-w-screen-2xl justify-between gap-12',
40-
'grid-cols-[auto_auto]',
41-
'lg:grid-cols-[18rem_minmax(auto,_48rem)_auto]',
42-
'xl:grid-cols-[18rem_minmax(auto,_48rem)_14rem]',
43-
'site-width-wide:lg:grid-cols-[18rem_minmax(auto,_80rem)_auto]',
44-
'site-width-wide:xl:grid-cols-[18rem_minmax(auto,_80rem)_14rem]',
45-
'page-no-toc:lg:grid-cols-[minmax(auto,_48rem)_auto]',
46-
'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]',
47-
'[body:has(.site-width-wide,.page-no-toc)_&]:lg:grid-cols-[minmax(auto,_90rem)_auto]',
48-
'[body:has(.site-width-wide,.page-no-toc)_&]:xl:grid-cols-[14rem_minmax(auto,_90rem)_14rem]'
49-
)}
50-
>
51-
{
52-
// Footer Logo
53-
customization.footer.logo ? (
54-
<div className="col-start-1 row-start-1">
55-
<Image
56-
alt="Logo"
57-
resize={context.imageResizer}
58-
sources={{
59-
light: {
60-
src: customization.footer.logo.light,
61-
},
62-
dark: customization.footer.logo.dark
63-
? {
64-
src: customization.footer.logo.dark,
65-
}
66-
: null,
67-
}}
68-
priority="lazy"
69-
style={[
70-
'w-auto',
71-
'max-w-40',
72-
'lg:max-w-64',
73-
'max-h-10',
74-
'lg:max-h-12',
75-
'object-contain',
76-
'object-left',
77-
'rounded',
78-
'straight-corners:rounded-sm',
79-
]}
80-
sizes={[
81-
{
82-
width: 320,
83-
},
84-
]}
85-
/>
86-
</div>
87-
) : null
88-
}
35+
<div className={tcls(CONTAINER_STYLE, 'px-4', 'py-8', 'lg:py-12', 'mx-auto')}>
36+
<div
37+
className={tcls(
38+
'lg:!max-w-none mx-auto grid max-w-3xl site-width-wide:max-w-screen-2xl justify-between gap-12',
39+
'grid-cols-[auto_auto]',
40+
'lg:grid-cols-[18rem_minmax(auto,_48rem)_auto]',
41+
'xl:grid-cols-[18rem_minmax(auto,_48rem)_14rem]',
42+
'site-width-wide:lg:grid-cols-[18rem_minmax(auto,_80rem)_auto]',
43+
'site-width-wide:xl:grid-cols-[18rem_minmax(auto,_80rem)_14rem]',
44+
'page-no-toc:lg:grid-cols-[minmax(auto,_48rem)_auto]',
45+
'page-no-toc:xl:grid-cols-[14rem_minmax(auto,_48rem)_14rem]',
46+
'[body:has(.site-width-wide,.page-no-toc)_&]:lg:grid-cols-[minmax(auto,_90rem)_auto]',
47+
'[body:has(.site-width-wide,.page-no-toc)_&]:xl:grid-cols-[14rem_minmax(auto,_90rem)_14rem]'
48+
)}
49+
>
50+
{
51+
// Footer Logo
52+
customization.footer.logo ? (
53+
<div className="col-start-1 row-start-1">
54+
<Image
55+
alt="Logo"
56+
resize={context.imageResizer}
57+
sources={{
58+
light: {
59+
src: customization.footer.logo.light,
60+
},
61+
dark: customization.footer.logo.dark
62+
? {
63+
src: customization.footer.logo.dark,
64+
}
65+
: null,
66+
}}
67+
priority="lazy"
68+
style={[
69+
'w-auto',
70+
'max-w-40',
71+
'lg:max-w-64',
72+
'max-h-10',
73+
'lg:max-h-12',
74+
'object-contain',
75+
'object-left',
76+
'rounded',
77+
'straight-corners:rounded-sm',
78+
]}
79+
sizes={[
80+
{
81+
width: 320,
82+
},
83+
]}
84+
/>
85+
</div>
86+
) : null
87+
}
8988

90-
{
91-
// Theme Toggle
92-
customization.themes.toggeable ? (
93-
<div className="-col-start-2 row-start-1 flex items-start justify-end xl:hidden">
94-
<React.Suspense fallback={null}>
95-
<ThemeToggler />
96-
</React.Suspense>
97-
</div>
98-
) : null
99-
}
89+
{
90+
// Theme Toggle
91+
customization.themes.toggeable ? (
92+
<div className="-col-start-2 row-start-1 flex items-start justify-end xl:hidden">
93+
<React.Suspense fallback={null}>
94+
<ThemeToggler />
95+
</React.Suspense>
96+
</div>
97+
) : null
98+
}
10099

101-
{
102-
// Navigation groups (split into equal columns)
103-
customization.footer.groups?.length > 0 ? (
104-
<div
105-
className={tcls(
106-
'col-span-2 page-has-toc:lg:col-span-1 page-has-toc:lg:col-start-2 page-no-toc:xl:col-span-1 page-no-toc:xl:col-start-2'
100+
{
101+
// Navigation groups (split into equal columns)
102+
customization.footer.groups?.length > 0 ? (
103+
<div
104+
className={tcls(
105+
'col-span-2 page-has-toc:lg:col-span-1 page-has-toc:lg:col-start-2 page-no-toc:xl:col-span-1 page-no-toc:xl:col-start-2'
106+
)}
107+
>
108+
<div className="mx-auto flex max-w-3xl site-width-wide:max-w-screen-2xl flex-col gap-10 sm:flex-row sm:gap-6">
109+
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
110+
(column, columnIndex) => (
111+
<div
112+
key={columnIndex}
113+
className="flex flex-1 grow flex-col gap-10"
114+
>
115+
{column.map((group, groupIndex) => (
116+
<FooterLinksGroup
117+
key={groupIndex}
118+
group={group}
119+
context={context}
120+
/>
121+
))}
122+
</div>
123+
)
107124
)}
108-
>
109-
<div className="mx-auto flex max-w-3xl site-width-wide:max-w-screen-2xl flex-col gap-10 sm:flex-row sm:gap-6">
110-
{partition(customization.footer.groups, FOOTER_COLUMNS).map(
111-
(column, columnIndex) => (
112-
<div
113-
key={columnIndex}
114-
className="flex flex-1 grow flex-col gap-10"
115-
>
116-
{column.map((group, groupIndex) => (
117-
<FooterLinksGroup
118-
key={groupIndex}
119-
group={group}
120-
context={context}
121-
/>
122-
))}
123-
</div>
124-
)
125-
)}
126-
</div>
127125
</div>
128-
) : null
129-
}
126+
</div>
127+
) : null
128+
}
130129

131-
{
132-
// Legal
133-
customization.footer.copyright ? (
134-
<div className="order-last col-span-full flex w-full grow flex-col items-center gap-2 text-center text-tint text-xs">
135-
<p>{customization.footer.copyright}</p>
136-
</div>
137-
) : null
138-
}
139-
</div>
130+
{
131+
// Legal
132+
customization.footer.copyright ? (
133+
<div className="order-last col-span-full flex w-full grow flex-col items-center gap-2 text-center text-tint text-xs">
134+
<p>{customization.footer.copyright}</p>
135+
</div>
136+
) : null
137+
}
140138
</div>
141139
</div>
142140
</footer>

0 commit comments

Comments
 (0)