Bluesky app fork with some witchin' additions 💫 witchsky.app
bluesky fork client

Extract center column offset, reduce by 20px (#7974)

* extract offset, reduce by 20px

* move constant to `Layout/const.ts`

authored by samuel.fm and committed by

GitHub 412b1074 1b871929

+19 -7
+2 -1
src/components/Layout/Header/index.tsx
··· 23 23 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' 24 24 import { 25 25 BUTTON_VISUAL_ALIGNMENT_OFFSET, 26 + CENTER_COLUMN_OFFSET, 26 27 HEADER_SLOT_SIZE, 27 28 SCROLLBAR_OFFSET, 28 29 } from '#/components/Layout/const' ··· 65 66 gtMobile && [a.mx_auto, {maxWidth: 600}], 66 67 !isWithinOffsetView && { 67 68 transform: [ 68 - {translateX: centerColumnOffset ? -150 : 0}, 69 + {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0}, 69 70 {translateX: web(SCROLLBAR_OFFSET) ?? 0}, 70 71 ], 71 72 },
+5
src/components/Layout/const.ts
··· 14 14 * Corresponds to the width of a small square or round button 15 15 */ 16 16 export const HEADER_SLOT_SIZE = 34 17 + 18 + /** 19 + * How far to shift the center column when in the tablet breakpoint 20 + */ 21 + export const CENTER_COLUMN_OFFSET = -130
+3 -3
src/components/Layout/index.tsx
··· 21 21 web, 22 22 } from '#/alf' 23 23 import {useDialogContext} from '#/components/Dialog' 24 - import {SCROLLBAR_OFFSET} from '#/components/Layout/const' 24 + import {CENTER_COLUMN_OFFSET, SCROLLBAR_OFFSET} from '#/components/Layout/const' 25 25 import {ScrollbarOffsetContext} from '#/components/Layout/context' 26 26 27 27 export * from '#/components/Layout/const' ··· 173 173 centerColumnOffset && 174 174 !ignoreTabletLayoutOffset && 175 175 !isWithinDialog 176 - ? -150 176 + ? CENTER_COLUMN_OFFSET 177 177 : 0, 178 178 }, 179 179 {translateX: web(SCROLLBAR_OFFSET) ?? 0}, ··· 209 209 left: '50%', 210 210 transform: [ 211 211 {translateX: '-50%'}, 212 - {translateX: centerColumnOffset ? -150 : 0}, 212 + {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0}, 213 213 ...a.scrollbar_offset.transform, 214 214 ], 215 215 }),
+2 -1
src/view/com/util/Views.web.tsx
··· 28 28 import {addStyle} from '#/lib/styles' 29 29 import {useLayoutBreakpoints} from '#/alf' 30 30 import {useDialogContext} from '#/components/Dialog' 31 + import {CENTER_COLUMN_OFFSET} from '#/components/Layout' 31 32 32 33 interface AddedProps { 33 34 desktopFixedHeight?: boolean | number ··· 179 180 marginRight: 'auto', 180 181 }, 181 182 containerOffset: { 182 - transform: [{translateX: -150}], 183 + transform: [{translateX: CENTER_COLUMN_OFFSET}], 183 184 }, 184 185 containerScroll: { 185 186 width: '100%',
+5 -1
src/view/shell/desktop/LeftNav.tsx
··· 69 69 UserCircle_Filled_Corner0_Rounded as UserCircleFilled, 70 70 UserCircle_Stroke2_Corner0_Rounded as UserCircle, 71 71 } from '#/components/icons/UserCircle' 72 + import {CENTER_COLUMN_OFFSET} from '#/components/Layout' 72 73 import * as Menu from '#/components/Menu' 73 74 import * as Prompt from '#/components/Prompt' 74 75 import {Text} from '#/components/Typography' ··· 559 560 leftNavMinimal && styles.leftNavMinimal, 560 561 { 561 562 transform: [ 562 - {translateX: centerColumnOffset ? -450 : -300}, 563 + { 564 + translateX: 565 + -300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0), 566 + }, 563 567 {translateX: '-100%'}, 564 568 ...a.scrollbar_offset.transform, 565 569 ],
+2 -1
src/view/shell/desktop/RightNav.tsx
··· 19 19 } from '#/alf' 20 20 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown' 21 21 import {Divider} from '#/components/Divider' 22 + import {CENTER_COLUMN_OFFSET} from '#/components/Layout' 22 23 import {InlineLinkText} from '#/components/Link' 23 24 import {ProgressGuideList} from '#/components/ProgressGuide/List' 24 25 import {Text} from '#/components/Typography' ··· 66 67 position: 'fixed', 67 68 left: '50%', 68 69 transform: [ 69 - {translateX: centerColumnOffset ? 150 : 300}, 70 + {translateX: 300 + (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0)}, 70 71 ...a.scrollbar_offset.transform, 71 72 ], 72 73 width: 300 + gutters.paddingLeft,