LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fixes scrolling with long sidebars

Browse source
This commit is contained in:
jessop 2019-10-20 18:41:28 -04:00 • committed by Sean Yesmunt
parent fde8b92476
commit 08249c183e
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/ui/component/claimList/view.jsx
View file

@ -1,5 +1,6 @@
// @flow
import { MAIN_WRAPPER_CLASS } from 'component/app/view';
import { MAIN_CLASS } from 'component/page/view';
import type { Node } from 'react';
import React, { useEffect, useState } from 'react';
import classnames from 'classnames';
@ -10,6 +11,7 @@ import usePersistedState from 'effects/use-persisted-state';
const SORT_NEW = 'new';
const SORT_OLD = 'old';
const PADDING_ALLOWANCE = 100;
type Props = {
uris: Array<string>,
@ -61,8 +63,14 @@ export default function ClaimList(props: Props) {
function handleScroll(e) {
if (page && pageSize && onScrollBottom && !scrollBottomCbMap[page]) {
const x = document.querySelector(`.${MAIN_WRAPPER_CLASS}`);
const mc = document.querySelector(`.${MAIN_CLASS}`);
if (x && window.scrollY + window.innerHeight >= x.offsetHeight) {
if (
x &&
mc &&
(window.scrollY + window.innerHeight >= x.offsetHeight ||
x.offsetHeight - mc.offsetHeight > PADDING_ALLOWANCE)
) {
if (!loading && urisLength >= pageSize) {
onScrollBottom();

3
src/ui/component/page/view.jsx
View file

@ -5,6 +5,7 @@ import classnames from 'classnames';
import SideBar from 'component/sideBar';
import Header from 'component/header';
export const MAIN_CLASS = 'main';
type Props = {
children: Node | Array<Node>,
className: ?string,
@ -22,7 +23,7 @@ function Page(props: Props) {
<Fragment>
<Header authHeader={authPage} />
<div className={classnames('main-wrapper__inner')}>
<main className={classnames('main', className, { 'main--full-width': authPage })}>{children}</main>
<main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
{!authPage && <SideBar obscureSideBar={obscureSideBar} />}
</div>
</Fragment>