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

scroll only if the entry doesn't entirely fit on screen (same as commafeed v1)

Browse Source
This commit is contained in:
Athou
2022-08-19 08:43:13 +02:00
parent 243aaac3da
commit 051fa37949
3 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,8 @@ export const Constants = {
mobileBreakpoint: DEFAULT_THEME.breakpoints.md, mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
headerHeight: 60, headerHeight: 60,
sidebarWidth: 350, sidebarWidth: 350,
isTopVisible: (div: HTMLDivElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
isBottomVisible: (div: HTMLDivElement) => div.getBoundingClientRect().bottom <= window.innerHeight,
}, },
dom: { dom: {
mainScrollAreaId: "main-scroll-area-id", mainScrollAreaId: "main-scroll-area-id",

6
commafeed-client/src/components/content/FeedEntries.tsx
View File

@@ -52,8 +52,7 @@ export function FeedEntries() {
if (selectedEntry) { if (selectedEntry) {
if (selectedEntry.expanded) { if (selectedEntry.expanded) {
const ref = refs.current[selectedEntry.id] const ref = refs.current[selectedEntry.id]
const bottomVisible = ref.getBoundingClientRect().bottom <= window.innerHeight if (Constants.layout.isBottomVisible(ref)) {
if (bottomVisible) {
dispatch(selectNextEntry()) dispatch(selectNextEntry())
} else { } else {
const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId) const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)
@@ -73,8 +72,7 @@ export function FeedEntries() {
if (selectedEntry) { if (selectedEntry) {
if (selectedEntry.expanded) { if (selectedEntry.expanded) {
const ref = refs.current[selectedEntry.id] const ref = refs.current[selectedEntry.id]
const topVisible = ref.getBoundingClientRect().top >= Constants.layout.headerHeight if (Constants.layout.isTopVisible(ref)) {
if (topVisible) {
dispatch(selectPreviousEntry()) dispatch(selectPreviousEntry())
} else { } else {
const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId) const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)

1
commafeed-client/src/components/content/FeedEntry.tsx
View File

@@ -58,6 +58,7 @@ export function FeedEntry(props: FeedEntryProps) {
setTimeout(() => { setTimeout(() => {
if (!ref.current) return if (!ref.current) return
if (!props.expanded) return if (!props.expanded) return
if (Constants.layout.isTopVisible(ref.current) && Constants.layout.isBottomVisible(ref.current)) return
document.getElementById(Constants.dom.mainScrollAreaId)?.scrollTo({ document.getElementById(Constants.dom.mainScrollAreaId)?.scrollTo({
// having a small gap between the top of the content and the top of the page is sexier // having a small gap between the top of the content and the top of the page is sexier