diff options
Diffstat (limited to 'src/view/com/util')
-rw-r--r-- | src/view/com/util/post-embeds/ExternalLinkEmbed.tsx | 40 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/QuoteEmbed.tsx | 1 | ||||
-rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 18 |
3 files changed, 21 insertions, 38 deletions
diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index 27aa804d3..1523dcf53 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -23,29 +23,16 @@ export const ExternalLinkEmbed = ({ ) return ( - <View - style={{ - flexDirection: !isMobile && !embedPlayerParams ? 'row' : 'column', - }}> + <View style={{flexDirection: 'column'}}> {link.thumb && !embedPlayerParams ? ( <View - style={ - !isMobile - ? { - borderTopLeftRadius: 6, - borderBottomLeftRadius: 6, - width: 120, - aspectRatio: 1, - overflow: 'hidden', - } - : { - borderTopLeftRadius: 6, - borderTopRightRadius: 6, - width: '100%', - height: 200, - overflow: 'hidden', - } - }> + style={{ + borderTopLeftRadius: 6, + borderTopRightRadius: 6, + width: '100%', + height: isMobile ? 200 : 300, + overflow: 'hidden', + }}> <Image style={styles.extImage} source={{uri: link.thumb}} @@ -61,7 +48,6 @@ export const ExternalLinkEmbed = ({ paddingHorizontal: isMobile ? 10 : 14, paddingTop: 8, paddingBottom: 10, - flex: !isMobile ? 1 : undefined, }}> <Text type="sm" @@ -69,16 +55,13 @@ export const ExternalLinkEmbed = ({ style={[pal.textLight, styles.extUri]}> {toNiceDomain(link.uri)} </Text> - <Text - type="lg-bold" - numberOfLines={isMobile ? 4 : 2} - style={[pal.text]}> + <Text type="lg-bold" numberOfLines={4} style={[pal.text]}> {link.title || link.uri} </Text> {link.description ? ( <Text type="md" - numberOfLines={isMobile ? 4 : 2} + numberOfLines={4} style={[pal.text, styles.extDescription]}> {link.description} </Text> @@ -90,8 +73,7 @@ export const ExternalLinkEmbed = ({ const styles = StyleSheet.create({ extImage: { - width: '100%', - height: 200, + flex: 1, }, extUri: { marginTop: 2, diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx index e793f983e..fbb89af27 100644 --- a/src/view/com/util/post-embeds/QuoteEmbed.tsx +++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx @@ -98,6 +98,7 @@ export function QuoteEmbed({ return ( <Link style={[styles.container, pal.borderDark, style]} + hoverStyle={{borderColor: pal.colors.borderLinkHover}} href={itemHref} title={itemTitle}> <PostMeta diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index c94ce9684..00a102e7b 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -63,7 +63,7 @@ export function PostEmbeds({ const mediaModeration = isModOnQuote ? {} : moderation const quoteModeration = isModOnQuote ? moderation : {} return ( - <View style={[styles.stackContainer, style]}> + <View style={style}> <PostEmbeds embed={embed.media} moderation={mediaModeration} /> <ContentHider moderation={quoteModeration}> <MaybeQuoteEmbed embed={embed.record} moderation={quoteModeration} /> @@ -168,11 +168,14 @@ export function PostEmbeds({ const link = embed.external return ( - <View style={[styles.extOuter, pal.view, pal.border, style]}> - <Link asAnchor href={link.uri}> - <ExternalLinkEmbed link={link} /> - </Link> - </View> + <Link + asAnchor + anchorNoUnderline + href={link.uri} + style={[styles.extOuter, pal.view, pal.borderDark, style]} + hoverStyle={{borderColor: pal.colors.borderLinkHover}}> + <ExternalLinkEmbed link={link} /> + </Link> ) } @@ -180,9 +183,6 @@ export function PostEmbeds({ } const styles = StyleSheet.create({ - stackContainer: { - gap: 6, - }, imagesContainer: { marginTop: 8, }, |