quilling.dev / social-app
An ATproto social media client -- with an independent Appview.
fork atom

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