Spacing fixes

zio/stable
Paul Frazee 2023-01-16 16:30:05 -06:00
parent c659f0ef9f
commit 6d4431b777
6 changed files with 31 additions and 16 deletions

View File

@ -160,7 +160,7 @@ export const Post = observer(function Post({
timestamp={item.post.indexedAt}
/>
{replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<FontAwesomeIcon
icon="reply"
size={9}

View File

@ -183,7 +183,7 @@ export const FeedItem = observer(function ({
timestamp={item.post.indexedAt}
/>
{!isChild && replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<FontAwesomeIcon
icon="reply"
size={9}
@ -219,8 +219,9 @@ export const FeedItem = observer(function ({
) : (
<View style={{height: 5}} />
)}
<PostEmbeds embed={item.post.embed} style={styles.postEmbeds} />
<PostEmbeds embed={item.post.embed} style={styles.embed} />
<PostCtrls
style={styles.ctrls}
itemHref={itemHref}
itemTitle={itemTitle}
isAuthor={item.post.author.did === store.me.did}
@ -330,8 +331,11 @@ const styles = StyleSheet.create({
flexWrap: 'wrap',
paddingBottom: 4,
},
postEmbeds: {
marginBottom: 0,
embed: {
marginBottom: 6,
},
ctrls: {
marginTop: 2,
},
viewFullThread: {
paddingTop: 12,

View File

@ -1,5 +1,12 @@
import React from 'react'
import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
import {
Animated,
StyleProp,
StyleSheet,
TouchableOpacity,
View,
ViewStyle,
} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import ReactNativeHapticFeedback from 'react-native-haptic-feedback'
import {Text} from './text/Text'
@ -13,6 +20,7 @@ interface PostCtrlsOpts {
itemTitle: string
isAuthor: boolean
big?: boolean
style?: StyleProp<ViewStyle>
replyCount?: number
repostCount?: number
upvoteCount?: number
@ -102,7 +110,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
}
return (
<View style={styles.ctrls}>
<View style={[styles.ctrls, opts.style]}>
<View style={s.flex1}>
<TouchableOpacity
style={styles.ctrl}
@ -187,7 +195,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
<FontAwesomeIcon
icon="ellipsis-h"
size={16}
style={[s.mt2, s.mr5, sRedgray]}
style={[s.mt2, s.mr5, {color: colors.gray3}]}
/>
</PostDropdownBtn>
)}

View File

@ -31,7 +31,7 @@ export function PostEmbeds({
}
if (embed.images.length === 4) {
return (
<View style={styles.imagesContainer}>
<View style={[styles.imagesContainer, style]}>
<ImageLayoutGrid
type="four"
uris={embed.images.map(img => img.thumb)}
@ -41,7 +41,7 @@ export function PostEmbeds({
)
} else if (embed.images.length === 3) {
return (
<View style={styles.imagesContainer}>
<View style={[styles.imagesContainer, style]}>
<ImageLayoutGrid
type="three"
uris={embed.images.map(img => img.thumb)}
@ -51,7 +51,7 @@ export function PostEmbeds({
)
} else if (embed.images.length === 2) {
return (
<View style={styles.imagesContainer}>
<View style={[styles.imagesContainer, style]}>
<ImageLayoutGrid
type="two"
uris={embed.images.map(img => img.thumb)}
@ -61,7 +61,7 @@ export function PostEmbeds({
)
} else {
return (
<View style={styles.imagesContainer}>
<View style={[styles.imagesContainer, style]}>
<AutoSizedImage
uri={embed.images[0].thumb}
onPress={() => openLightbox(0)}
@ -82,7 +82,7 @@ export function PostEmbeds({
{link.thumb ? (
<AutoSizedImage uri={link.thumb} containerStyle={{borderRadius: 4}} />
) : undefined}
<Text type="h5" numberOfLines={1} style={pal.text}>
<Text type="h5" numberOfLines={2} style={pal.text}>
{link.title || link.uri}
</Text>
<Text type="body2" numberOfLines={1} style={pal.textLight}>
@ -105,11 +105,12 @@ export function PostEmbeds({
const styles = StyleSheet.create({
imagesContainer: {
marginTop: 4,
marginBottom: 6,
},
extOuter: {
padding: 10,
borderWidth: 1,
borderRadius: 4,
marginTop: 4,
},
extDescription: {
marginTop: 4,

View File

@ -67,6 +67,6 @@ const styles = StyleSheet.create({
paddingRight: 5,
},
maxWidth: {
maxWidth: '70%',
maxWidth: '80%',
},
})

View File

@ -62,7 +62,9 @@ export function UserInfoText({
)
} else if (profile) {
inner = (
<Text type={type} style={style}>{`${prefix || ''}${profile[attr]}`}</Text>
<Text type={type} style={style}>{`${prefix || ''}${
profile[attr] || profile.handle
}`}</Text>
)
} else {
inner = (