diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2025-03-24 21:55:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-03-24 12:55:05 -0700 |
| commit | 412b10742006df48dbde99414453c335f62942b6 (patch) | |
| tree | 8545dc325a7a532f4df3b42468c667639e3bcd3e /src/components/Layout | |
| parent | 1b8719293c1f0a3ef351445bdd9c19566f8d6342 (diff) | |
| download | voidsky-412b10742006df48dbde99414453c335f62942b6.tar.zst | |
Extract center column offset, reduce by 20px (#7974)
* extract offset, reduce by 20px * move constant to `Layout/const.ts`
Diffstat (limited to 'src/components/Layout')
| -rw-r--r-- | src/components/Layout/Header/index.tsx | 3 | ||||
| -rw-r--r-- | src/components/Layout/const.ts | 5 | ||||
| -rw-r--r-- | src/components/Layout/index.tsx | 6 |
3 files changed, 10 insertions, 4 deletions
diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx index 8ef114b44..44faa9649 100644 --- a/src/components/Layout/Header/index.tsx +++ b/src/components/Layout/Header/index.tsx @@ -23,6 +23,7 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' import { BUTTON_VISUAL_ALIGNMENT_OFFSET, + CENTER_COLUMN_OFFSET, HEADER_SLOT_SIZE, SCROLLBAR_OFFSET, } from '#/components/Layout/const' @@ -65,7 +66,7 @@ export function Outer({ gtMobile && [a.mx_auto, {maxWidth: 600}], !isWithinOffsetView && { transform: [ - {translateX: centerColumnOffset ? -150 : 0}, + {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0}, {translateX: web(SCROLLBAR_OFFSET) ?? 0}, ], }, diff --git a/src/components/Layout/const.ts b/src/components/Layout/const.ts index 11825d323..63bb05cb0 100644 --- a/src/components/Layout/const.ts +++ b/src/components/Layout/const.ts @@ -14,3 +14,8 @@ export const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3 * Corresponds to the width of a small square or round button */ export const HEADER_SLOT_SIZE = 34 + +/** + * How far to shift the center column when in the tablet breakpoint + */ +export const CENTER_COLUMN_OFFSET = -130 diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 623478a6a..a61192b86 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -21,7 +21,7 @@ import { web, } from '#/alf' import {useDialogContext} from '#/components/Dialog' -import {SCROLLBAR_OFFSET} from '#/components/Layout/const' +import {CENTER_COLUMN_OFFSET, SCROLLBAR_OFFSET} from '#/components/Layout/const' import {ScrollbarOffsetContext} from '#/components/Layout/context' export * from '#/components/Layout/const' @@ -173,7 +173,7 @@ export const Center = React.memo(function LayoutContent({ centerColumnOffset && !ignoreTabletLayoutOffset && !isWithinDialog - ? -150 + ? CENTER_COLUMN_OFFSET : 0, }, {translateX: web(SCROLLBAR_OFFSET) ?? 0}, @@ -209,7 +209,7 @@ const WebCenterBorders = React.memo(function LayoutContent() { left: '50%', transform: [ {translateX: '-50%'}, - {translateX: centerColumnOffset ? -150 : 0}, + {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0}, ...a.scrollbar_offset.transform, ], }), |