Few list tweaks on web (#3062)

* share button only on native

* update gttablet to be 1300px

* improve web layout

* change re-layout to mobile breakpoint

* adjustable not found reason

* don't show the borders on mobile web

* slight padding for the spinner
zio/stable
Hailey 2024-03-01 15:47:59 -08:00 committed by GitHub
parent e11bd4385d
commit 82655f2ee3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 45 additions and 20 deletions

View File

@ -17,7 +17,7 @@ const breakpoints: {
[key: string]: number
} = {
gtMobile: 800,
gtTablet: 1200,
gtTablet: 1300,
}
function getActiveBreakpoints({width}: {width: number}) {
const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(

View File

@ -9,6 +9,7 @@ import {Text} from '#/components/Typography'
import {StackActions} from '@react-navigation/native'
import {useNavigation} from '@react-navigation/core'
import {NavigationProp} from 'lib/routes/types'
import {router} from '#/routes'
export function ListFooter({
isFetching,
@ -30,6 +31,7 @@ export function ListFooter({
a.align_center,
a.justify_center,
a.border_t,
a.pb_lg,
t.atoms.border_contrast_low,
{height: 100},
]}>
@ -128,6 +130,7 @@ export function ListMaybePlaceholder({
isError,
empty,
error,
notFoundType = 'page',
onRetry,
}: {
isLoading: boolean
@ -135,10 +138,12 @@ export function ListMaybePlaceholder({
isError: boolean
empty?: string
error?: string
notFoundType?: 'page' | 'results'
onRetry?: () => Promise<unknown>
}) {
const navigation = useNavigation<NavigationProp>()
const t = useTheme()
const {gtMobile} = useBreakpoints()
const canGoBack = navigation.canGoBack()
const onGoBack = React.useCallback(() => {
@ -146,7 +151,14 @@ export function ListMaybePlaceholder({
navigation.goBack()
} else {
navigation.navigate('HomeTab')
navigation.dispatch(StackActions.popToTop())
// Checking the state for routes ensures that web doesn't encounter errors while going back
if (navigation.getState()?.routes) {
navigation.dispatch(StackActions.push(...router.matchPath('/')))
} else {
navigation.navigate('HomeTab')
navigation.dispatch(StackActions.popToTop())
}
}
}, [navigation, canGoBack])
@ -157,8 +169,7 @@ export function ListMaybePlaceholder({
style={[
a.flex_1,
a.align_center,
a.border_t,
a.justify_between,
!gtMobile ? [a.justify_between, a.border_t] : a.gap_5xl,
t.atoms.border_contrast_low,
{paddingTop: 175, paddingBottom: 110},
]}>
@ -173,7 +184,13 @@ export function ListMaybePlaceholder({
{isError ? (
<Trans>Oops!</Trans>
) : isEmpty ? (
<Trans>Page not found</Trans>
<>
{notFoundType === 'results' ? (
<Trans>No results found</Trans>
) : (
<Trans>Page not found</Trans>
)}
</>
) : undefined}
</Text>
@ -195,7 +212,8 @@ export function ListMaybePlaceholder({
</Text>
) : undefined}
</View>
<View style={[a.w_full, a.px_lg, a.gap_md]}>
<View
style={[a.gap_md, !gtMobile ? [a.w_full, a.px_lg] : {width: 350}]}>
{isError && onRetry && (
<Button
variant="solid"

View File

@ -1,6 +1,6 @@
import React from 'react'
import {ListRenderItemInfo, Pressable} from 'react-native'
import {atoms as a} from '#/alf'
import {atoms as a, useBreakpoints} from '#/alf'
import {useFocusEffect} from '@react-navigation/native'
import {useSetMinimalShellMode} from 'state/shell'
import {ViewHeader} from 'view/com/util/ViewHeader'
@ -23,6 +23,7 @@ import {CenteredView} from 'view/com/util/Views'
import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
import {shareUrl} from 'lib/sharing'
import {HITSLOP_10} from 'lib/constants'
import {isNative} from 'platform/detection'
const renderItem = ({item}: ListRenderItemInfo<PostView>) => {
return <Post post={item} />
@ -37,6 +38,7 @@ export default function HashtagScreen({
}: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
const {tag, author} = route.params
const setMinimalShellMode = useSetMinimalShellMode()
const {gtMobile} = useBreakpoints()
const {_} = useLingui()
const [isPTR, setIsPTR] = React.useState(false)
@ -101,28 +103,33 @@ export default function HashtagScreen({
}, [isFetching, hasNextPage, error, fetchNextPage])
return (
<CenteredView style={a.flex_1}>
<CenteredView style={a.flex_1} sideBorders={gtMobile}>
<ViewHeader
title={headerTitle}
subtitle={author ? _(msg`From @${sanitizedAuthor}`) : undefined}
canGoBack={true}
renderButton={() => (
<Pressable
accessibilityRole="button"
onPress={onShare}
hitSlop={HITSLOP_10}>
<ArrowOutOfBox_Stroke2_Corner0_Rounded
size="lg"
onPress={onShare}
/>
</Pressable>
)}
canGoBack
renderButton={
isNative
? () => (
<Pressable
accessibilityRole="button"
onPress={onShare}
hitSlop={HITSLOP_10}>
<ArrowOutOfBox_Stroke2_Corner0_Rounded
size="lg"
onPress={onShare}
/>
</Pressable>
)
: undefined
}
/>
<ListMaybePlaceholder
isLoading={isLoading || isRefetching}
isError={isError}
isEmpty={posts.length < 1}
onRetry={refetch}
notFoundType="results"
empty={_(msg`We couldn't find any results for that hashtag.`)}
/>
{!isLoading && posts.length > 0 && (