reduce thread footer height where possible
This commit is contained in:
@@ -481,6 +481,11 @@ export function PostThread({uri}: {uri: string}) {
|
|||||||
],
|
],
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const footerHeight = useMemo(
|
||||||
|
() => Math.max(180, windowHeight - 200 - thread.state.replyCount * 100),
|
||||||
|
[windowHeight, thread.state.replyCount],
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Layout.Header.Outer headerRef={headerRef}>
|
<Layout.Header.Outer headerRef={headerRef}>
|
||||||
@@ -532,13 +537,14 @@ export function PostThread({uri}: {uri: string}) {
|
|||||||
* account for the `on*ReachedThreshold` values.
|
* account for the `on*ReachedThreshold` values.
|
||||||
*
|
*
|
||||||
* Otherwise, and on web, this value needs to be the height of
|
* Otherwise, and on web, this value needs to be the height of
|
||||||
* the viewport _minus_ a sensible min-post height e.g. 200, so
|
* the viewport _minus_ a sensible min-post height e.g. 200 plus
|
||||||
* that there's enough scroll remaining to get the anchor post
|
* 100 per reply, so that there's enough scroll remaining to get the
|
||||||
* back to the top of the screen when handling scroll.
|
* anchor post back to the top of the screen when handling scroll,
|
||||||
|
* while trying to minimize the height if there's enough replies.
|
||||||
*/
|
*/
|
||||||
height={platform({
|
height={platform({
|
||||||
web: windowHeight - 200,
|
web: footerHeight,
|
||||||
default: deferParents ? windowHeight * 2 : windowHeight - 200,
|
default: deferParents ? windowHeight * 2 : footerHeight,
|
||||||
})}
|
})}
|
||||||
style={isTombstoneView ? {borderTopWidth: 0} : undefined}
|
style={isTombstoneView ? {borderTopWidth: 0} : undefined}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -277,6 +277,18 @@ export function usePostThread({anchor}: {anchor?: string}) {
|
|||||||
setOtherItemsVisible,
|
setOtherItemsVisible,
|
||||||
])
|
])
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Count the number of posts beneath the anchor
|
||||||
|
*/
|
||||||
|
const replyCount = useMemo(() => {
|
||||||
|
return items.reduce((acc, item) => {
|
||||||
|
if (item.type === 'threadPost' && item.depth > 0) {
|
||||||
|
return acc + 1
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, 0)
|
||||||
|
}, [items])
|
||||||
|
|
||||||
return useMemo(
|
return useMemo(
|
||||||
() => ({
|
() => ({
|
||||||
state: {
|
state: {
|
||||||
@@ -292,6 +304,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
|
|||||||
sort,
|
sort,
|
||||||
view,
|
view,
|
||||||
otherItemsVisible,
|
otherItemsVisible,
|
||||||
|
replyCount,
|
||||||
},
|
},
|
||||||
data: {
|
data: {
|
||||||
items,
|
items,
|
||||||
@@ -320,6 +333,7 @@ export function usePostThread({anchor}: {anchor?: string}) {
|
|||||||
setView,
|
setView,
|
||||||
threadgate,
|
threadgate,
|
||||||
items,
|
items,
|
||||||
|
replyCount,
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user