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} timestamp={item.post.indexedAt}
/> />
{replyHref !== '' && ( {replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> <View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<FontAwesomeIcon <FontAwesomeIcon
icon="reply" icon="reply"
size={9} size={9}

View File

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

View File

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

View File

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

View File

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

View File

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