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

Post layout tweaks (#53)

Browse source 
* Increase left margin on feed and embiggen avis

* Decrease feed margins a bit

* Tweak post bottom margin

* Update loading placeholder to match feed

* Update 'view full thread' positioning

* Update postthread to match feed layout

* Update notifications and individual post to match new layout

* Add missing aborted check
This commit is contained in:
Paul Frazee 2023-01-19 10:35:57 -06:00 • committed by GitHub
parent 6588961d2e
commit 2798250489
7 changed files with 44 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -116,12 +116,17 @@ export const PostThreadItem = observer(function PostThreadItem({
return (
<>
<View
style={[styles.outer, {borderTopColor: pal.colors.border}, pal.view]}>
style={[
styles.outer,
styles.outerHighlighted,
{borderTopColor: pal.colors.border},
pal.view,
]}>
<View style={styles.layout}>
<View style={styles.layoutAvi}>
<Link href={authorHref} title={authorTitle}>
<UserAvatar
size={50}
size={52}
displayName={item.post.author.displayName}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
@ -275,7 +280,7 @@ export const PostThreadItem = observer(function PostThreadItem({
<View style={styles.layoutAvi}>
<Link href={authorHref} title={authorTitle}>
<UserAvatar
size={50}
size={52}
displayName={item.post.author.displayName}
handle={item.post.author.handle}
avatar={item.post.author.avatar}
@ -346,17 +351,23 @@ export const PostThreadItem = observer(function PostThreadItem({
const styles = StyleSheet.create({
outer: {
borderTopWidth: 1,
paddingLeft: 10,
},
outerHighlighted: {
paddingTop: 2,
paddingLeft: 6,
paddingRight: 6,
},
parentReplyLine: {
position: 'absolute',
left: 34,
left: 44,
top: -1 * PARENT_REPLY_LINE_LENGTH + 6,
height: PARENT_REPLY_LINE_LENGTH,
borderLeftWidth: 2,
},
childReplyLine: {
position: 'absolute',
left: 34,
left: 44,
top: 65,
bottom: 0,
borderLeftWidth: 2,
@ -398,12 +409,12 @@ const styles = StyleSheet.create({
alignItems: 'center',
flexWrap: 'wrap',
paddingBottom: 8,
paddingRight: 20,
paddingRight: 10,
minHeight: 36,
},
postTextLargeContainer: {
paddingLeft: 4,
paddingBottom: 20,
paddingHorizontal: 0,
paddingBottom: 10,
},
expandedInfo: {
flexDirection: 'row',