Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

improve external link design (#2577)

* improve external link design

* slight changes

* use 1.91 aspect for images

authored by

Hailey and committed by
GitHub
b96302be dafa0fb1

+19 -25
+19 -25
src/view/com/util/post-embeds/ExternalLinkEmbed.tsx
··· 29 29 }, [link.uri, externalEmbedPrefs]) 30 30 31 31 return ( 32 - <View style={{flexDirection: 'column'}}> 32 + <View style={styles.container}> 33 33 {link.thumb && !embedPlayerParams ? ( 34 - <View 35 - style={{ 36 - borderTopLeftRadius: 6, 37 - borderTopRightRadius: 6, 38 - width: '100%', 39 - height: isMobile ? 200 : 300, 40 - overflow: 'hidden', 41 - }}> 42 - <Image 43 - style={styles.extImage} 44 - source={{uri: link.thumb}} 45 - accessibilityIgnoresInvertColors 46 - /> 47 - </View> 34 + <Image 35 + style={{aspectRatio: 1.91}} 36 + source={{uri: link.thumb}} 37 + accessibilityIgnoresInvertColors 38 + /> 48 39 ) : undefined} 49 40 {(embedPlayerParams?.isGif && ( 50 41 <ExternalGifEmbed link={link} params={embedPlayerParams} /> ··· 52 43 (embedPlayerParams && ( 53 44 <ExternalPlayer link={link} params={embedPlayerParams} /> 54 45 ))} 55 - <View 56 - style={{ 57 - paddingHorizontal: isMobile ? 10 : 14, 58 - paddingTop: 8, 59 - paddingBottom: 10, 60 - }}> 46 + <View style={[styles.info, {paddingHorizontal: isMobile ? 10 : 14}]}> 61 47 <Text 62 48 type="sm" 63 49 numberOfLines={1} ··· 65 51 {toNiceDomain(link.uri)} 66 52 </Text> 67 53 {!embedPlayerParams?.isGif && ( 68 - <Text type="lg-bold" numberOfLines={4} style={[pal.text]}> 54 + <Text type="lg-bold" numberOfLines={3} style={[pal.text]}> 69 55 {link.title || link.uri} 70 56 </Text> 71 57 )} 72 58 {link.description && !embedPlayerParams?.hideDetails ? ( 73 59 <Text 74 60 type="md" 75 - numberOfLines={4} 61 + numberOfLines={link.thumb ? 2 : 4} 76 62 style={[pal.text, styles.extDescription]}> 77 63 {link.description} 78 64 </Text> ··· 83 69 } 84 70 85 71 const styles = StyleSheet.create({ 86 - extImage: { 87 - flex: 1, 72 + container: { 73 + flexDirection: 'column', 74 + borderRadius: 6, 75 + overflow: 'hidden', 76 + }, 77 + info: { 78 + width: '100%', 79 + bottom: 0, 80 + paddingTop: 8, 81 + paddingBottom: 10, 88 82 }, 89 83 extUri: { 90 84 marginTop: 2,