Skip to content

Commit 944cb77

Browse files
aymericzipaymericzip
committed
feat(dashboard): implement scroll-based title animation across dashboard pages and add shrink-title keyframe animation in global CSS
1 parent b0e9e2a commit 944cb77

9 files changed

Lines changed: 101 additions & 9 deletions

File tree

‎apps/website/src/app/[locale]/(dashboard)/dashboard/(editor)/(content)/layout.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,19 @@ const EditorContentLayout: FC<EditorContentLayoutProps> = ({ children }) => {
4040

4141
return (
4242
<>
43-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
43+
<h1
44+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
45+
style={{
46+
// Indique que l'animation suit le scroll de la page
47+
animationTimeline: 'scroll()',
48+
// L'animation se joue entre 0px et 100px de scroll
49+
animationRange: '0 50px',
50+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
51+
animationName: 'shrink-title',
52+
animationFillMode: 'both',
53+
animationTimingFunction: 'linear',
54+
}}
55+
>
4456
{title}
4557
</h1>
4658
<div className="mr-3 ml-auto flex justify-end gap-2 py-3">

‎apps/website/src/app/[locale]/(dashboard)/dashboard/(editor)/tags/[tagKey]/page.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,19 @@ const DictionaryDashboardPageContent: FC<DictionaryDashboardPageProps> = ({
1515

1616
return (
1717
<>
18-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
18+
<h1
19+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
20+
style={{
21+
// Indique que l'animation suit le scroll de la page
22+
animationTimeline: 'scroll()',
23+
// L'animation se joue entre 0px et 100px de scroll
24+
animationRange: '0 50px',
25+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
26+
animationName: 'shrink-title',
27+
animationFillMode: 'both',
28+
animationTimingFunction: 'linear',
29+
}}
30+
>
1931
{title}
2032
</h1>
2133
<div className="relative flex flex-1 flex-col items-center">

‎apps/website/src/app/[locale]/(dashboard)/dashboard/(editor)/tags/page.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,19 @@ const TagsDashboardPageContent: FC = () => {
1010
const { title } = useIntlayer('tags-dashboard-page');
1111
return (
1212
<>
13-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
13+
<h1
14+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
15+
style={{
16+
// Indique que l'animation suit le scroll de la page
17+
animationTimeline: 'scroll()',
18+
// L'animation se joue entre 0px et 100px de scroll
19+
animationRange: '0 50px',
20+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
21+
animationName: 'shrink-title',
22+
animationFillMode: 'both',
23+
animationTimingFunction: 'linear',
24+
}}
25+
>
1426
{title}
1527
</h1>
1628
<div className="relative flex flex-1 flex-col items-center">

‎apps/website/src/app/[locale]/(dashboard)/dashboard/organization/page.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,19 @@ const OrganizationDashboardPageContent: FC = () => {
1010

1111
return (
1212
<>
13-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
13+
<h1
14+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
15+
style={{
16+
// Indique que l'animation suit le scroll de la page
17+
animationTimeline: 'scroll()',
18+
// L'animation se joue entre 0px et 100px de scroll
19+
animationRange: '0 50px',
20+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
21+
animationName: 'shrink-title',
22+
animationFillMode: 'both',
23+
animationTimingFunction: 'linear',
24+
}}
25+
>
1426
{title}
1527
</h1>
1628
<div className="relative flex flex-1 flex-col items-center">

‎apps/website/src/app/[locale]/(dashboard)/dashboard/profile/page.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,19 @@ const ProfileDashboardPageContent: FC = () => {
1010

1111
return (
1212
<>
13-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
13+
<h1
14+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
15+
style={{
16+
// Indique que l'animation suit le scroll de la page
17+
animationTimeline: 'scroll()',
18+
// L'animation se joue entre 0px et 100px de scroll
19+
animationRange: '0 50px',
20+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
21+
animationName: 'shrink-title',
22+
animationFillMode: 'both',
23+
animationTimingFunction: 'linear',
24+
}}
25+
>
1426
{title}
1527
</h1>
1628
<div className="relative flex flex-1 flex-col items-center">

‎apps/website/src/app/[locale]/(dashboard)/dashboard/projects/page.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,19 @@ const ProjectsDashboardPageContent: FC = () => {
1111

1212
return (
1313
<>
14-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
14+
<h1
15+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
16+
style={{
17+
// Indique que l'animation suit le scroll de la page
18+
animationTimeline: 'scroll()',
19+
// L'animation se joue entre 0px et 100px de scroll
20+
animationRange: '0 50px',
21+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
22+
animationName: 'shrink-title',
23+
animationFillMode: 'both',
24+
animationTimingFunction: 'linear',
25+
}}
26+
>
1527
{title}
1628
</h1>
1729
<div className="relative flex flex-1 flex-col items-center">

‎apps/website/src/app/[locale]/(playground)/playground/page.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,19 @@ const PlaygroundContent: FC = () => {
2727

2828
return (
2929
<>
30-
<h1 className="border-neutral border-b-[0.5px] p-6 pl-10 text-3xl">
30+
<h1
31+
className="sticky top-0 z-50 border-neutral border-b-[0.5px] bg-background p-6 pl-10 text-3xl"
32+
style={{
33+
// Indique que l'animation suit le scroll de la page
34+
animationTimeline: 'scroll()',
35+
// L'animation se joue entre 0px et 100px de scroll
36+
animationRange: '0 50px',
37+
// Nom de l'animation (définie dans ton CSS global ou via Tailwind config)
38+
animationName: 'shrink-title',
39+
animationFillMode: 'both',
40+
animationTimingFunction: 'linear',
41+
}}
42+
>
3143
{title}
3244
</h1>
3345
<div className="relative flex size-full flex-1 flex-col">

‎apps/website/src/globals.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@
1515
}
1616
}
1717

18+
@keyframes shrink-title {
19+
to {
20+
font-size: 1.2rem;
21+
padding-top: 0.8rem;
22+
padding-bottom: 0.6rem;
23+
}
24+
}
25+
1826
@keyframes infiniteScroll {
1927
from {
2028
transform: translateX(0);

‎packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditor.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,15 @@ export const ContentEditor: FC<NodeEditorProps> = ({
6363
<LocaleSwitcherContent />
6464
</div>
6565
</div>
66-
<div className="flex flex-1 gap-2 overflow-auto max-md:flex-col">
66+
<div className="flex flex-1 gap-2 overflow-visible max-md:flex-col">
6767
{typeof section === 'object' &&
6868
section &&
6969
!isEditableBaseSection &&
7070
Object.keys(section).length > 0 && (
7171
<Container
7272
border
7373
background="none"
74-
className="top-6 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]"
74+
className="top-30 flex h-full flex-col items-start gap-0.5 overflow-auto p-2 md:sticky md:max-w-[50%]"
7575
roundedSize="xl"
7676
transparency="sm"
7777
>

0 commit comments

Comments
 (0)