garrettmills/commafeed
1
0
Fork 0
forked from Archives/Athou_commafeed
Code Pull Requests Activity

scroll to the correct position regardless of the position or height of the header

Browse Source
This commit is contained in:
Athou
2024-01-18 08:52:06 +01:00
parent 5f29838bd2
commit 99db85328b
3 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
commafeed-client/src/app/constants.ts
View File

@@ -89,10 +89,14 @@ export const Constants = {
mobileBreakpointName: "md",
headerHeight: 60,
entryMaxWidth: 650,
isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
isTopVisible: (div: HTMLElement) => {
const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
return div.getBoundingClientRect().top >= (header?.bottom ?? 0)
},
isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
},
dom: {
headerId: "header",
entryId: (entry: Entry) => `entry-id-${entry.id}`,
entryContextMenuId: (entry: Entry) => entry.id,
},

5
commafeed-client/src/app/entries/thunks.ts
View File

@@ -174,10 +174,11 @@ export const selectEntry = createAppAsyncThunk(
}
)
const scrollToEntry = (entryElement: HTMLElement, scrollSpeed: number | undefined, onScrollEnded: () => void) => {
const header = document.getElementById(Constants.dom.headerId)?.getBoundingClientRect()
const offset = (header?.bottom ?? 0) + 3
scrollToWithCallback({
options: {
// add a small gap between the top of the content and the top of the page
top: entryElement.offsetTop - Constants.layout.headerHeight - 3,
top: entryElement.offsetTop - offset,
behavior: scrollSpeed && scrollSpeed > 0 ? "smooth" : "auto",
},
onScrollEnded,

2
commafeed-client/src/pages/app/Layout.tsx
View File

@@ -133,7 +133,7 @@ export default function Layout(props: LayoutProps) {
}}
padding={{ base: 6, [Constants.layout.mobileBreakpointName]: "md" }}
>
<AppShell.Header id="header">
<AppShell.Header id={Constants.dom.headerId}>
<OnMobile>
{mobileMenuOpen && (
<Group justify="space-between" p="md">