zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

use gap on native

zio/stable
Hailey 2024-01-30 16:37:26 -08:00
parent 640ce5e47b
commit df740c85e0
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/view/com/util/images/Gallery.tsx
View File

@ -4,6 +4,7 @@ import {StyleSheet, Text, Pressable, View} from 'react-native'
import {Image} from 'expo-image' import {Image} from 'expo-image'
import {msg} from '@lingui/macro' import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {isWeb} from 'platform/detection'
type EventFunction = (index: number) => void type EventFunction = (index: number) => void
@ -70,8 +71,8 @@ const styles = StyleSheet.create({
paddingHorizontal: 6, paddingHorizontal: 6,
paddingVertical: 3, paddingVertical: 3,
position: 'absolute', position: 'absolute',
left: 8, left: isWeb ? 8 : 5,
bottom: 8, bottom: isWeb ? 8 : 5,
}, },
alt: { alt: {
color: 'white', color: 'white',

27
src/view/com/util/images/ImageLayoutGrid.tsx
View File

@ -2,6 +2,7 @@ import React from 'react'
import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
import {AppBskyEmbedImages} from '@atproto/api' import {AppBskyEmbedImages} from '@atproto/api'
import {GalleryItem} from './Gallery' import {GalleryItem} from './Gallery'
import {isWeb} from 'platform/detection'
interface ImageLayoutGridProps { interface ImageLayoutGridProps {
images: AppBskyEmbedImages.ViewImage[] images: AppBskyEmbedImages.ViewImage[]
@ -47,10 +48,10 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
case 3: case 3:
return ( return (
<View style={styles.flexRow}> <View style={styles.flexRow}>
<View style={{flex: 2, aspectRatio: 1}}> <View style={{flex: 2, aspectRatio: isWeb ? 1 : undefined}}>
<GalleryItem {...props} index={0} imageStyle={styles.image} /> <GalleryItem {...props} index={0} imageStyle={styles.image} />
</View> </View>
<View style={{flex: 1}}> <View style={{flex: 1, gap: !isWeb ? 5 : undefined}}>
<View style={styles.smallItem}> <View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} /> <GalleryItem {...props} index={1} imageStyle={styles.image} />
</View> </View>
@ -93,13 +94,19 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
const IMAGE_GAP = 5 const IMAGE_GAP = 5
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: isWeb
marginHorizontal: -IMAGE_GAP / 2, ? {
marginVertical: -IMAGE_GAP / 2, marginHorizontal: -IMAGE_GAP / 2,
}, marginVertical: -IMAGE_GAP / 2,
flexRow: {flexDirection: 'row'}, }
: {
gap: IMAGE_GAP,
},
flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined},
smallItem: {flex: 1, aspectRatio: 1}, smallItem: {flex: 1, aspectRatio: 1},
image: { image: isWeb
margin: IMAGE_GAP / 2, ? {
}, margin: IMAGE_GAP / 2,
}
: {},
}) })