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

Sizing and spacing fixes based on on-device testing

Browse source
This commit is contained in:
Paul Frazee 2022-11-05 16:12:06 -05:00
parent 5d6ab1f548
commit ff9161d8e7
13 changed files with 120 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/view/com/notifications/FeedItem.tsx
View file

@ -133,20 +133,20 @@ export const FeedItem = observer(function FeedItem({
style={styles.metaItem}
href={authors[0].href}
title={`@${authors[0].handle}`}>
<Text style={[s.f14, s.bold]}>
<Text style={[s.f15, s.bold]}>
{authors[0].displayName || authors[0].handle}
</Text>
</Link>
{authors.length > 1 ? (
<>
<Text style={[styles.metaItem, s.f14]}>and</Text>
<Text style={[styles.metaItem, s.f14, s.bold]}>
<Text style={[styles.metaItem, s.f15]}>and</Text>
<Text style={[styles.metaItem, s.f15, s.bold]}>
{authors.length - 1} {pluralize(authors.length - 1, 'other')}
</Text>
</>
) : undefined}
<Text style={[styles.metaItem, s.f14]}>{action}</Text>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15]}>{action}</Text>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
{ago(item.indexedAt)}
</Text>
</View>

14
src/view/com/post-thread/PostThread.tsx
View file

@ -1,4 +1,4 @@
import React, {useState, useEffect, useRef} from 'react'
import React, {useState, useEffect} from 'react'
import {observer} from 'mobx-react-lite'
import {ActivityIndicator, FlatList, Text, View} from 'react-native'
import {
@ -9,12 +9,9 @@ import {useStores} from '../../../state'
import {SharePostModel} from '../../../state/models/shell'
import {PostThreadItem} from './PostThreadItem'
const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
export const PostThread = observer(function PostThread({uri}: {uri: string}) {
const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>()
const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
useEffect(() => {
if (view?.params.uri === uri) {
@ -27,14 +24,6 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
newView.setup().catch(err => console.error('Failed to fetch thread', err))
}, [uri, view?.params.uri, store])
// TODO
// useFocusEffect(() => {
// if (Date.now() - lastUpdate > UPDATE_DELAY) {
// view?.update()
// setLastUpdate(Date.now())
// }
// })
const onPressShare = (uri: string) => {
store.shell.openModal(new SharePostModel(uri))
}
@ -83,6 +72,7 @@ export const PostThread = observer(function PostThread({uri}: {uri: string}) {
renderItem={renderItem}
refreshing={view.isRefreshing}
onRefresh={onRefresh}
style={{flex: 1}}
/>
)
})

58
src/view/com/post-thread/PostThreadItem.tsx
View file

@ -77,14 +77,14 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</Link>
<View style={styles.layoutContent}>
<View style={[styles.meta, s.mt5]}>
<View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -104,7 +104,7 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
</View>
</View>
@ -125,8 +125,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={repostsHref}
title={repostsTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.repostCount}</Text>{' '}
<Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black, s.f16]}>
{item.repostCount}
</Text>{' '}
{pluralize(item.repostCount, 'repost')}
</Text>
</Link>
@ -138,8 +140,10 @@ export const PostThreadItem = observer(function PostThreadItem({
style={styles.expandedInfoItem}
href={likesHref}
title={likesTitle}>
<Text style={[s.gray5, s.semiBold]}>
<Text style={[s.bold, s.black]}>{item.likeCount}</Text>{' '}
<Text style={[s.gray5, s.semiBold, s.f16]}>
<Text style={[s.bold, s.black, s.f16]}>
{item.likeCount}
</Text>{' '}
{pluralize(item.likeCount, 'like')}
</Text>
</Link>
@ -205,37 +209,20 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</Link>
<View style={styles.layoutContent}>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, {alignItems: 'center'}]}>
<FontAwesomeIcon
icon="reply"
size={9}
style={[s.gray4, s.mr5]}
/>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f12, s.gray5]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.meta}>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link
style={styles.metaItem}
href={authorHref}
title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -250,11 +237,24 @@ export const PostThreadItem = observer(function PostThreadItem({
/>
</PostDropdownBtn>
</View>
{item.replyingToAuthor &&
item.replyingToAuthor !== item.author.handle && (
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Link
href={`/profile/${item.replyingToAuthor}`}
title={`@${item.replyingToAuthor}`}>
<Text style={[s.f14, s.blue3]}>
@{item.replyingToAuthor}
</Text>
</Link>
</View>
)}
<View style={styles.postTextContainer}>
<RichText
text={record.text}
entities={record.entities}
style={[styles.postText, s.f15, s['lh15-1.3']]}
style={[styles.postText, s.f17, s['lh17-1.3']]}
/>
</View>
<PostCtrls

8
src/view/com/post/Post.tsx
View file

@ -97,12 +97,12 @@ export const Post = observer(function Post({uri}: {uri: string}) {
<View style={styles.layoutContent}>
<View style={styles.meta}>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f16, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link style={styles.metaItem} href={authorHref} title={authorTitle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
</View>
@ -123,7 +123,7 @@ export const Post = observer(function Post({uri}: {uri: string}) {
<RichText
text={record.text}
entities={record.entities}
style={[s.f15, s['lh15-1.3']]}
style={[s.f16, s['lh16-1.3']]}
/>
</View>
<PostCtrls

15
src/view/com/posts/FeedItem.tsx
View file

@ -84,15 +84,15 @@ export const FeedItem = observer(function FeedItem({
style={styles.metaItem}
href={authorHref}
title={item.author.handle}>
<Text style={[s.f15, s.bold]}>{item.author.displayName}</Text>
<Text style={[s.f17, s.bold]}>{item.author.displayName}</Text>
</Link>
<Link
style={styles.metaItem}
href={authorHref}
title={item.author.handle}>
<Text style={[s.f14, s.gray5]}>@{item.author.handle}</Text>
<Text style={[s.f15, s.gray5]}>@{item.author.handle}</Text>
</Link>
<Text style={[styles.metaItem, s.f14, s.gray5]}>
<Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(item.indexedAt)}
</Text>
<View style={s.flex1} />
@ -108,13 +108,12 @@ export const FeedItem = observer(function FeedItem({
</PostDropdownBtn>
</View>
{replyHref !== '' && (
<View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
<FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
<Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
<View style={[s.flexRow, s.mb5, {alignItems: 'center'}]}>
<Text style={[s.gray5, s.f15, s.mr2]}>Replying to</Text>
<Link href={replyHref} title="Parent post">
<UserInfoText
did={replyAuthorDid}
style={[s.f12, s.gray5]}
style={[s.f15, s.blue3]}
prefix="@"
/>
</Link>
@ -124,7 +123,7 @@ export const FeedItem = observer(function FeedItem({
<RichText
text={record.text}
entities={record.entities}
style={[s.f15, s['lh15-1.3']]}
style={[s.f17, s['lh17-1.3']]}
/>
</View>
<PostCtrls

37
src/view/com/profile/ProfileHeader.tsx
View file

@ -154,8 +154,10 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity
style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}>
<Text style={[s.bold, s.mr2]}>{view.followersCount}</Text>
<Text style={s.gray5}>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.followersCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.followersCount, 'follower')}
</Text>
</TouchableOpacity>
@ -163,27 +165,35 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
<Text style={s.gray5}>following</Text>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.followsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>following</Text>
</TouchableOpacity>
) : undefined}
{view.isScene ? (
<TouchableOpacity
style={[s.flexRow, s.mr10]}
onPress={onPressFollows}>
<Text style={[s.bold, s.mr2]}>{view.followsCount}</Text>
<Text style={s.gray5}>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.followsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.followsCount, 'member')}
</Text>
</TouchableOpacity>
) : undefined}
<View style={[s.flexRow, s.mr10]}>
<Text style={[s.bold, s.mr2]}>{view.postsCount}</Text>
<Text style={s.gray5}>{pluralize(view.postsCount, 'post')}</Text>
<Text style={[s.bold, s.mr2, styles.metricsText]}>
{view.postsCount}
</Text>
<Text style={[s.gray5, styles.metricsText]}>
{pluralize(view.postsCount, 'post')}
</Text>
</View>
</View>
{view.description && (
<Text style={[s.mb5, s.f15, s['lh15-1.3']]}>{view.description}</Text>
<Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
)}
{
undefined /*<View style={styles.badgesLine}>
@ -268,7 +278,7 @@ const styles = StyleSheet.create({
// marginBottom: 14,
},
displayName: {
fontSize: 24,
fontSize: 28,
fontWeight: 'bold',
},
@ -277,7 +287,7 @@ const styles = StyleSheet.create({
marginBottom: 8,
},
handle: {
fontSize: 14,
fontSize: 15,
fontWeight: 'bold',
color: colors.gray5,
},
@ -288,7 +298,7 @@ const styles = StyleSheet.create({
marginRight: 5,
},
typeLabel: {
fontSize: 14,
fontSize: 15,
fontWeight: 'bold',
color: colors.gray5,
},
@ -297,6 +307,9 @@ const styles = StyleSheet.create({
flexDirection: 'row',
marginBottom: 8,
},
metricsText: {
fontSize: 15,
},
badgesLine: {
flexDirection: 'row',

8
src/view/com/util/DropdownBtn.tsx
View file

@ -157,9 +157,9 @@ const styles = StyleSheet.create({
menuItem: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 6,
paddingLeft: 10,
paddingRight: 30,
paddingVertical: 10,
paddingLeft: 15,
paddingRight: 40,
},
menuItemBorder: {
borderTopWidth: 1,
@ -172,6 +172,6 @@ const styles = StyleSheet.create({
marginRight: 8,
},
label: {
fontSize: 15,
fontSize: 18,
},
})

2
src/view/com/util/UserBanner.tsx
View file

@ -5,7 +5,7 @@ import {getGradient} from '../../lib/asset-gen'
export function UserBanner({handle}: {handle: string}) {
const gradient = getGradient(handle)
return (
<Svg width="400" height="120" viewBox="50 0 200 100">
<Svg width="100%" height="120" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor={gradient[0]} stopOpacity="1" />