bas.sh
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Better tablet layout (#7656)
* better tablet layout
* adjust left nav spacing
* add right nav to pwi
* clearer logic
* fix a couple screens that don't need the tablet layout
* fix horiz scroll bar
* fix double trending
* fix ts-ignore
* fix labeller screen
* don't offset things within dialogs
* fix load latest button (and add scale animation)
* center loader on home screen
* adjust break points
* adjust left nav spacing
* fix load latest btn (again)
* add lang select to right nav if left nav is minimal
* fix double scrollbar on tiny screens
* fix scrollbar
* fix type errors
samuel.fm
+211
-122
+15
src/alf/breakpoints.ts
+15
src/alf/breakpoints.ts
···
26
26
}
27
27
}, [gtPhone, gtMobile, gtTablet])
28
28
}
29
+
30
+
/**
31
+
* Fine-tuned breakpoints for the shell layout
32
+
*/
33
+
export function useLayoutBreakpoints() {
34
+
const rightNavVisible = useMediaQuery({minWidth: 1075})
35
+
const centerColumnOffset = useMediaQuery({minWidth: 1075, maxWidth: 1300})
36
+
const leftNavMinimal = useMediaQuery({maxWidth: 1300})
37
+
38
+
return {
39
+
rightNavVisible,
40
+
centerColumnOffset,
41
+
leftNavMinimal,
42
+
}
43
+
}
+1
src/components/Dialog/context.ts
+1
src/components/Dialog/context.ts
+1
src/components/Dialog/index.tsx
+1
src/components/Dialog/index.tsx
+1
src/components/Dialog/index.web.tsx
+1
src/components/Dialog/index.web.tsx
+2
src/components/Dialog/types.ts
+2
src/components/Dialog/types.ts
+9
-1
src/components/Layout/Header/index.tsx
+9
-1
src/components/Layout/Header/index.tsx
···
14
14
TextStyleProp,
15
15
useBreakpoints,
16
16
useGutters,
17
+
useLayoutBreakpoints,
17
18
useTheme,
18
19
web,
19
20
} from '#/alf'
···
23
24
import {
24
25
BUTTON_VISUAL_ALIGNMENT_OFFSET,
25
26
HEADER_SLOT_SIZE,
27
+
SCROLLBAR_OFFSET,
26
28
} from '#/components/Layout/const'
27
29
import {ScrollbarOffsetContext} from '#/components/Layout/context'
28
30
import {Text} from '#/components/Typography'
···
42
44
const gutters = useGutters([0, 'base'])
43
45
const {gtMobile} = useBreakpoints()
44
46
const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
47
+
const {centerColumnOffset} = useLayoutBreakpoints()
45
48
46
49
return (
47
50
<View
···
60
63
}),
61
64
t.atoms.border_contrast_low,
62
65
gtMobile && [a.mx_auto, {maxWidth: 600}],
63
-
!isWithinOffsetView && a.scrollbar_offset,
66
+
!isWithinOffsetView && {
67
+
transform: [
68
+
{translateX: centerColumnOffset ? -150 : 0},
69
+
{translateX: web(SCROLLBAR_OFFSET) ?? 0},
70
+
],
71
+
},
64
72
]}>
65
73
{children}
66
74
</View>
+35
-8
src/components/Layout/index.tsx
+35
-8
src/components/Layout/index.tsx
···
13
13
14
14
import {isWeb} from '#/platform/detection'
15
15
import {useShellLayout} from '#/state/shell/shell-layout'
16
-
import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
16
+
import {
17
+
atoms as a,
18
+
useBreakpoints,
19
+
useLayoutBreakpoints,
20
+
useTheme,
21
+
web,
22
+
} from '#/alf'
23
+
import {useDialogContext} from '#/components/Dialog'
24
+
import {SCROLLBAR_OFFSET} from '#/components/Layout/const'
17
25
import {ScrollbarOffsetContext} from '#/components/Layout/context'
18
26
19
27
export * from '#/components/Layout/const'
···
47
55
export type ContentProps = AnimatedScrollViewProps & {
48
56
style?: StyleProp<ViewStyle>
49
57
contentContainerStyle?: StyleProp<ViewStyle>
58
+
ignoreTabletLayoutOffset?: boolean
50
59
}
51
60
52
61
/**
···
56
65
children,
57
66
style,
58
67
contentContainerStyle,
68
+
ignoreTabletLayoutOffset,
59
69
...props
60
70
}: ContentProps) {
61
71
const t = useTheme()
···
84
94
]}
85
95
{...props}>
86
96
{isWeb ? (
87
-
// @ts-ignore web only -esb
88
-
<Center>{children}</Center>
97
+
<Center ignoreTabletLayoutOffset={ignoreTabletLayoutOffset}>
98
+
{/* @ts-expect-error web only -esb */}
99
+
{children}
100
+
</Center>
89
101
) : (
90
102
children
91
103
)}
···
138
150
export const Center = React.memo(function LayoutContent({
139
151
children,
140
152
style,
153
+
ignoreTabletLayoutOffset,
141
154
...props
142
-
}: ViewProps) {
155
+
}: ViewProps & {ignoreTabletLayoutOffset?: boolean}) {
143
156
const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
144
157
const {gtMobile} = useBreakpoints()
158
+
const {centerColumnOffset} = useLayoutBreakpoints()
159
+
const {isWithinDialog} = useDialogContext()
145
160
const ctx = useMemo(() => ({isWithinOffsetView: true}), [])
146
161
return (
147
162
<View
···
151
166
gtMobile && {
152
167
maxWidth: 600,
153
168
},
169
+
!isWithinOffsetView && {
170
+
transform: [
171
+
{
172
+
translateX:
173
+
centerColumnOffset &&
174
+
!ignoreTabletLayoutOffset &&
175
+
!isWithinDialog
176
+
? -150
177
+
: 0,
178
+
},
179
+
{translateX: web(SCROLLBAR_OFFSET) ?? 0},
180
+
],
181
+
},
154
182
style,
155
-
!isWithinOffsetView && a.scrollbar_offset,
156
183
]}
157
184
{...props}>
158
185
<ScrollbarOffsetContext.Provider value={ctx}>
···
168
195
const WebCenterBorders = React.memo(function LayoutContent() {
169
196
const t = useTheme()
170
197
const {gtMobile} = useBreakpoints()
198
+
const {centerColumnOffset} = useLayoutBreakpoints()
171
199
return gtMobile ? (
172
200
<View
173
201
style={[
···
180
208
width: 602,
181
209
left: '50%',
182
210
transform: [
183
-
{
184
-
translateX: '-50%',
185
-
},
211
+
{translateX: '-50%'},
212
+
{translateX: centerColumnOffset ? -150 : 0},
186
213
...a.scrollbar_offset.transform,
187
214
],
188
215
}),
+1
src/screens/Deactivated.tsx
+1
src/screens/Deactivated.tsx
+4
-6
src/screens/Profile/Sections/Labels.tsx
+4
-6
src/screens/Profile/Sections/Labels.tsx
···
15
15
import {useScrollHandlers} from '#/lib/ScrollContext'
16
16
import {isNative} from '#/platform/detection'
17
17
import {ListRef} from '#/view/com/util/List'
18
-
import {ScrollView} from '#/view/com/util/Views'
19
18
import {atoms as a, useTheme} from '#/alf'
20
19
import {Divider} from '#/components/Divider'
21
20
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
···
148
147
}, [labelerInfo, labelValues])
149
148
150
149
return (
151
-
<ScrollView
152
-
// @ts-ignore TODO fix this
150
+
<Layout.Content
151
+
// @ts-expect-error TODO fix this
153
152
ref={scrollElRef}
154
153
scrollEventThrottle={1}
155
154
contentContainerStyle={{
···
228
227
})}
229
228
</View>
230
229
)}
231
-
232
-
<View style={{height: 400}} />
230
+
<View style={{height: 100}} />
233
231
</View>
234
-
</ScrollView>
232
+
</Layout.Content>
235
233
)
236
234
}
+4
-4
src/view/com/auth/SplashScreen.web.tsx
+4
-4
src/view/com/auth/SplashScreen.web.tsx
···
16
16
import {atoms as a, useTheme} from '#/alf'
17
17
import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
18
18
import {Button, ButtonText} from '#/components/Button'
19
+
import * as Layout from '#/components/Layout'
19
20
import {InlineLinkText} from '#/components/Link'
20
21
import {Text} from '#/components/Typography'
21
-
import {CenteredView} from '../util/Views'
22
22
23
23
export const SplashScreen = ({
24
24
onDismiss,
···
70
70
</Pressable>
71
71
)}
72
72
73
-
<CenteredView style={[a.h_full, a.flex_1]}>
73
+
<Layout.Center style={[a.h_full, a.flex_1]} ignoreTabletLayoutOffset>
74
74
<View
75
75
testID="noSessionView"
76
76
style={[
77
77
a.h_full,
78
78
a.justify_center,
79
-
// @ts-ignore web only
79
+
// @ts-expect-error web only
80
80
{paddingBottom: '20vh'},
81
81
isMobileWeb && a.pb_5xl,
82
82
t.atoms.border_contrast_medium,
···
135
135
</ErrorBoundary>
136
136
</View>
137
137
<Footer />
138
-
</CenteredView>
138
+
</Layout.Center>
139
139
<AppClipOverlay
140
140
visible={showClipOverlay}
141
141
setIsVisible={setShowClipOverlay}
+5
-4
src/view/com/posts/PostFeed.tsx
+5
-4
src/view/com/posts/PostFeed.tsx
···
40
40
import {PostFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
41
41
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
42
42
import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
43
-
import {useBreakpoints} from '#/alf'
43
+
import {useBreakpoints, useLayoutBreakpoints} from '#/alf'
44
44
import {ProgressGuide, SuggestedFollows} from '#/components/FeedInterstitials'
45
45
import {
46
46
PostFeedVideoGridRow,
···
197
197
const checkForNewRef = React.useRef<(() => void) | null>(null)
198
198
const lastFetchRef = React.useRef<number>(Date.now())
199
199
const [feedType, feedUriOrActorDid, feedTab] = feed.split('|')
200
-
const {gtMobile, gtTablet} = useBreakpoints()
200
+
const {gtMobile} = useBreakpoints()
201
+
const {rightNavVisible} = useLayoutBreakpoints()
201
202
const areVideoFeedsEnabled = isNative
202
203
203
204
const feedCacheKey = feedParams?.feedCacheKey
···
396
397
key: 'interstitial-' + sliceIndex + '-' + lastFetchedAt,
397
398
})
398
399
}
399
-
if (!gtTablet && !trendingDisabled) {
400
+
if (!rightNavVisible && !trendingDisabled) {
400
401
arr.push({
401
402
type: 'interstitialTrending',
402
403
key:
···
512
513
showProgressIntersitial,
513
514
trendingDisabled,
514
515
trendingVideoDisabled,
515
-
gtTablet,
516
+
rightNavVisible,
516
517
gtMobile,
517
518
isVideoFeed,
518
519
areVideoFeedsEnabled,
+27
-6
src/view/com/util/Views.web.tsx
+27
-6
src/view/com/util/Views.web.tsx
···
26
26
import {usePalette} from '#/lib/hooks/usePalette'
27
27
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
28
28
import {addStyle} from '#/lib/styles'
29
+
import {useLayoutBreakpoints} from '#/alf'
30
+
import {useDialogContext} from '#/components/Dialog'
29
31
30
32
interface AddedProps {
31
33
desktopFixedHeight?: boolean | number
···
46
48
) {
47
49
const pal = usePalette('default')
48
50
const {isMobile} = useWebMediaQueries()
51
+
const {centerColumnOffset} = useLayoutBreakpoints()
52
+
const {isWithinDialog} = useDialogContext()
49
53
if (!isMobile) {
50
54
style = addStyle(style, styles.container)
51
55
}
56
+
if (centerColumnOffset && !isWithinDialog) {
57
+
style = addStyle(style, styles.containerOffset)
58
+
}
52
59
if (topBorder) {
53
60
style = addStyle(style, {
54
61
borderTopWidth: 1,
···
71
78
ref: React.Ref<FlatList<ItemT>>,
72
79
) {
73
80
const {isMobile} = useWebMediaQueries()
81
+
const {centerColumnOffset} = useLayoutBreakpoints()
82
+
const {isWithinDialog} = useDialogContext()
74
83
if (!isMobile) {
75
84
contentContainerStyle = addStyle(
76
85
contentContainerStyle,
77
86
styles.containerScroll,
78
87
)
79
88
}
89
+
if (centerColumnOffset && !isWithinDialog) {
90
+
style = addStyle(style, styles.containerOffset)
91
+
}
80
92
if (contentOffset && contentOffset?.y !== 0) {
81
93
// NOTE
82
94
// we use paddingTop & contentOffset to space around the floating header
···
92
104
}
93
105
if (desktopFixedHeight) {
94
106
if (typeof desktopFixedHeight === 'number') {
95
-
// @ts-ignore Web only -prf
107
+
// @ts-expect-error Web only -prf
96
108
style = addStyle(style, {
97
109
height: `calc(100vh - ${desktopFixedHeight}px)`,
98
110
})
···
108
120
// around this, we set data-stable-gutters which can then be
109
121
// styled in our external CSS.
110
122
// -prf
111
-
// @ts-ignore web only -prf
123
+
// @ts-expect-error web only -prf
112
124
props.dataSet = props.dataSet || {}
113
-
// @ts-ignore web only -prf
125
+
// @ts-expect-error web only -prf
114
126
props.dataSet.stableGutters = '1'
115
127
}
116
128
}
···
133
145
ref: React.Ref<Animated.ScrollView>,
134
146
) {
135
147
const {isMobile} = useWebMediaQueries()
148
+
const {centerColumnOffset} = useLayoutBreakpoints()
136
149
if (!isMobile) {
137
150
contentContainerStyle = addStyle(
138
151
contentContainerStyle,
139
152
styles.containerScroll,
153
+
)
154
+
}
155
+
if (centerColumnOffset) {
156
+
contentContainerStyle = addStyle(
157
+
contentContainerStyle,
158
+
styles.containerOffset,
140
159
)
141
160
}
142
161
return (
143
162
<Animated.ScrollView
144
163
contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
145
-
// @ts-ignore something is wrong with the reanimated types -prf
146
164
ref={ref}
147
165
{...props}
148
166
/>
···
151
169
152
170
const styles = StyleSheet.create({
153
171
contentContainer: {
154
-
// @ts-ignore web only
172
+
// @ts-expect-error web only
155
173
minHeight: '100vh',
156
174
},
157
175
container: {
···
160
178
marginLeft: 'auto',
161
179
marginRight: 'auto',
162
180
},
181
+
containerOffset: {
182
+
transform: [{translateX: -150}],
183
+
},
163
184
containerScroll: {
164
185
width: '100%',
165
186
maxWidth: 600,
···
167
188
marginRight: 'auto',
168
189
},
169
190
fixedHeight: {
170
-
// @ts-ignore web only
191
+
// @ts-expect-error web only
171
192
height: '100vh',
172
193
},
173
194
})
+36
-28
src/view/com/util/load-latest/LoadLatestBtn.tsx
+36
-28
src/view/com/util/load-latest/LoadLatestBtn.tsx
···
1
-
import {StyleSheet, TouchableOpacity, View} from 'react-native'
1
+
import {StyleSheet, View} from 'react-native'
2
2
import Animated from 'react-native-reanimated'
3
3
import {useSafeAreaInsets} from 'react-native-safe-area-context'
4
4
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
5
5
import {useMediaQuery} from 'react-responsive'
6
6
7
7
import {HITSLOP_20} from '#/lib/constants'
8
+
import {PressableScale} from '#/lib/custom-animations/PressableScale'
8
9
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
9
10
import {usePalette} from '#/lib/hooks/usePalette'
10
11
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
···
13
14
import {colors} from '#/lib/styles'
14
15
import {isWeb} from '#/platform/detection'
15
16
import {useSession} from '#/state/session'
16
-
17
-
const AnimatedTouchableOpacity =
18
-
Animated.createAnimatedComponent(TouchableOpacity)
17
+
import {useLayoutBreakpoints} from '#/alf'
19
18
20
19
export function LoadLatestBtn({
21
20
onPress,
···
29
28
const pal = usePalette('default')
30
29
const {hasSession} = useSession()
31
30
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
31
+
const {centerColumnOffset} = useLayoutBreakpoints()
32
32
const fabMinimalShellTransform = useMinimalShellFabTransform()
33
33
const insets = useSafeAreaInsets()
34
34
···
49
49
: {bottom: clamp(insets.bottom, 15, 60) + 15}
50
50
51
51
return (
52
-
<AnimatedTouchableOpacity
53
-
style={[
54
-
styles.loadLatest,
55
-
isDesktop &&
56
-
(isTallViewport
57
-
? styles.loadLatestOutOfLine
58
-
: styles.loadLatestInline),
59
-
isTablet && styles.loadLatestInline,
60
-
pal.borderDark,
61
-
pal.view,
62
-
bottomPosition,
63
-
showBottomBar && fabMinimalShellTransform,
64
-
]}
65
-
onPress={onPress}
66
-
hitSlop={HITSLOP_20}
67
-
accessibilityRole="button"
68
-
accessibilityLabel={label}
69
-
accessibilityHint="">
70
-
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
71
-
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
72
-
</AnimatedTouchableOpacity>
52
+
<Animated.View style={[showBottomBar && fabMinimalShellTransform]}>
53
+
<PressableScale
54
+
style={[
55
+
styles.loadLatest,
56
+
isDesktop &&
57
+
(isTallViewport
58
+
? styles.loadLatestOutOfLine
59
+
: styles.loadLatestInline),
60
+
isTablet &&
61
+
(centerColumnOffset
62
+
? styles.loadLatestInlineOffset
63
+
: styles.loadLatestInline),
64
+
pal.borderDark,
65
+
pal.view,
66
+
bottomPosition,
67
+
]}
68
+
onPress={onPress}
69
+
hitSlop={HITSLOP_20}
70
+
accessibilityLabel={label}
71
+
accessibilityHint=""
72
+
targetScale={0.9}>
73
+
<FontAwesomeIcon icon="angle-up" color={pal.colors.text} size={19} />
74
+
{showIndicator && <View style={[styles.indicator, pal.borderDark]} />}
75
+
</PressableScale>
76
+
</Animated.View>
73
77
)
74
78
}
75
79
76
80
const styles = StyleSheet.create({
77
81
loadLatest: {
78
-
// @ts-ignore 'fixed' is web only -prf
82
+
zIndex: 20,
79
83
position: isWeb ? 'fixed' : 'absolute',
80
84
left: 18,
81
85
borderWidth: StyleSheet.hairlineWidth,
···
87
91
justifyContent: 'center',
88
92
},
89
93
loadLatestInline: {
90
-
// @ts-ignore web only
94
+
// @ts-expect-error web only
91
95
left: 'calc(50vw - 282px)',
92
96
},
97
+
loadLatestInlineOffset: {
98
+
// @ts-expect-error web only
99
+
left: 'calc(50vw - 432px)',
100
+
},
93
101
loadLatestOutOfLine: {
94
-
// @ts-ignore web only
102
+
// @ts-expect-error web only
95
103
left: 'calc(50vw - 382px)',
96
104
},
97
105
indicator: {
+4
-2
src/view/screens/Home.tsx
+4
-2
src/view/screens/Home.tsx