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

cleanup

zio/stable
Hailey 2024-01-30 16:55:57 -08:00
parent fc8ea01741
commit 767dd83d0b
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,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: isWeb ? 1 : undefined}}> <View style={styles.threeSingle}>
<GalleryItem {...props} index={0} imageStyle={styles.image} /> <GalleryItem {...props} index={0} imageStyle={styles.image} />
</View> </View>
<View style={{flex: 1, gap: !isWeb ? IMAGE_GAP : undefined}}> <View style={styles.threeDouble}>
<View style={styles.smallItem}> <View style={styles.smallItem}>
<GalleryItem {...props} index={1} imageStyle={styles.image} /> <GalleryItem {...props} index={1} imageStyle={styles.image} />
</View> </View>
@ -94,6 +94,9 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
const IMAGE_GAP = 5 const IMAGE_GAP = 5
const styles = StyleSheet.create({ const styles = StyleSheet.create({
flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined},
smallItem: {flex: 1, aspectRatio: 1},
container: isWeb container: isWeb
? { ? {
marginHorizontal: -IMAGE_GAP / 2, marginHorizontal: -IMAGE_GAP / 2,
@ -102,11 +105,17 @@ const styles = StyleSheet.create({
: { : {
gap: IMAGE_GAP, gap: IMAGE_GAP,
}, },
flexRow: {flexDirection: 'row', gap: !isWeb ? IMAGE_GAP : undefined},
smallItem: {flex: 1, aspectRatio: 1},
image: isWeb image: isWeb
? { ? {
margin: IMAGE_GAP / 2, margin: IMAGE_GAP / 2,
} }
: {}, : {},
threeSingle: {
flex: 1,
gap: isWeb ? undefined : IMAGE_GAP,
},
threeDouble: {
flex: 1,
gap: isWeb ? undefined : IMAGE_GAP,
},
}) })