Fix more layout
This commit is contained in:
@@ -14,6 +14,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
|
|||||||
import {useAnalytics} from 'lib/analytics/analytics'
|
import {useAnalytics} from 'lib/analytics/analytics'
|
||||||
import {NavigationProp} from 'lib/routes/types'
|
import {NavigationProp} from 'lib/routes/types'
|
||||||
import {useSetDrawerOpen} from '#/state/shell'
|
import {useSetDrawerOpen} from '#/state/shell'
|
||||||
|
import {isWeb} from '#/platform/detection'
|
||||||
|
|
||||||
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
|
const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20}
|
||||||
|
|
||||||
@@ -47,7 +48,14 @@ export function SimpleViewHeader({
|
|||||||
|
|
||||||
const Container = isMobile ? View : CenteredView
|
const Container = isMobile ? View : CenteredView
|
||||||
return (
|
return (
|
||||||
<Container style={[styles.header, isMobile && styles.headerMobile, style]}>
|
<Container
|
||||||
|
style={[
|
||||||
|
styles.header,
|
||||||
|
isMobile && styles.headerMobile,
|
||||||
|
isWeb && styles.headerWeb,
|
||||||
|
pal.view,
|
||||||
|
style,
|
||||||
|
]}>
|
||||||
{showBackButton ? (
|
{showBackButton ? (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
testID="viewHeaderDrawerBtn"
|
testID="viewHeaderDrawerBtn"
|
||||||
@@ -89,6 +97,12 @@ const styles = StyleSheet.create({
|
|||||||
paddingHorizontal: 12,
|
paddingHorizontal: 12,
|
||||||
paddingVertical: 10,
|
paddingVertical: 10,
|
||||||
},
|
},
|
||||||
|
headerWeb: {
|
||||||
|
// @ts-ignore web-only
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
backBtn: {
|
backBtn: {
|
||||||
width: 30,
|
width: 30,
|
||||||
height: 30,
|
height: 30,
|
||||||
|
|||||||
@@ -63,6 +63,7 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
|
|||||||
onScroll,
|
onScroll,
|
||||||
ListHeaderComponent,
|
ListHeaderComponent,
|
||||||
ListFooterComponent,
|
ListFooterComponent,
|
||||||
|
desktopFixedHeight,
|
||||||
...props
|
...props
|
||||||
}: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
|
}: React.PropsWithChildren<FlatListProps<ItemT> & AddedProps>,
|
||||||
ref: React.Ref<Animated.FlatList<ItemT>>,
|
ref: React.Ref<Animated.FlatList<ItemT>>,
|
||||||
@@ -161,7 +162,12 @@ export const FlatList = React.forwardRef(function FlatListImpl<ItemT>(
|
|||||||
return (
|
return (
|
||||||
<Animated.ScrollView {...props} style={style} ref={nativeRef}>
|
<Animated.ScrollView {...props} style={style} ref={nativeRef}>
|
||||||
<View
|
<View
|
||||||
style={[styles.contentContainer, contentContainerStyle, pal.border]}>
|
style={[
|
||||||
|
styles.contentContainer,
|
||||||
|
contentContainerStyle,
|
||||||
|
desktopFixedHeight ? styles.minHeightViewport : null,
|
||||||
|
pal.border,
|
||||||
|
]}>
|
||||||
{header}
|
{header}
|
||||||
{(data as Array<ItemT>).map((item, index) => (
|
{(data as Array<ItemT>).map((item, index) => (
|
||||||
<Row<ItemT>
|
<Row<ItemT>
|
||||||
@@ -287,4 +293,8 @@ const styles = StyleSheet.create({
|
|||||||
// @ts-ignore web
|
// @ts-ignore web
|
||||||
contentVisibility: 'auto',
|
contentVisibility: 'auto',
|
||||||
},
|
},
|
||||||
|
minHeightViewport: {
|
||||||
|
// @ts-ignore web only
|
||||||
|
minHeight: '100vh',
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user