coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Enlarge scrollable area in sidebar for improved UX on small screens

Browse Source
This commit is contained in:
Tom Moor
2021-02-26 10:51:14 -08:00
parent a3e95023dc
commit 0c301fcf0c
3 changed files with 94 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/Scrollable.js
View File

@ -8,9 +8,10 @@ type Props = {|
shadow?: boolean,
topShadow?: boolean,
bottomShadow?: boolean,
flex?: boolean,
|};
function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
function Scrollable({ shadow, topShadow, bottomShadow, flex, ...rest }: Props) {
const ref = React.useRef<?HTMLDivElement>();
const [topShadowVisible, setTopShadow] = React.useState(false);
const [bottomShadowVisible, setBottomShadow] = React.useState(false);
@ -42,6 +43,7 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
<Wrapper
ref={ref}
onScroll={updateShadows}
$flex={flex}
$topShadowVisible={topShadowVisible}
$bottomShadowVisible={bottomShadowVisible}
{...rest}
@ -50,6 +52,8 @@ function Scrollable({ shadow, topShadow, bottomShadow, ...rest }: Props) {
}
const Wrapper = styled.div`
display: ${(props) => (props.$flex ? "flex" : "block")};
flex-direction: column;
height: 100%;
overflow-y: auto;
overflow-x: hidden;