bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Column: fix border-radius of sticky header when scrolled

Browse source
This commit is contained in:
Alex Gleason 2023-04-05 13:54:43 -05:00
parent 1c45d575d4
commit d0e7ccb8c8
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/soapbox/components/ui/column/column.tsx
View file

@ -1,5 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import React from 'react'; import throttle from 'lodash/throttle';
import React, { useCallback, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import Helmet from 'soapbox/components/helmet'; import Helmet from 'soapbox/components/helmet';
@ -64,6 +65,19 @@ export interface IColumn {
const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => { const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props; const { backHref, children, label, transparent = false, withHeader = true, className, action, size } = props;
const soapboxConfig = useSoapboxConfig(); const soapboxConfig = useSoapboxConfig();
const [isScrolled, setIsScrolled] = useState(false);
const handleScroll = useCallback(throttle(() => {
setIsScrolled(window.pageYOffset > 32);
}, 50), []);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return ( return (
<div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}> <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>
@ -85,10 +99,11 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
label={label} label={label}
backHref={backHref} backHref={backHref}
className={clsx({ className={clsx({
'sticky top-12 z-10 bg-white dark:bg-primary-900 lg:top-16': !transparent, 'rounded-t-3xl': !isScrolled && !transparent,
'sticky top-12 z-10 bg-white/90 dark:bg-primary-900/90 backdrop-blur lg:top-16': !transparent,
'p-4 sm:p-0 sm:pb-4': transparent, 'p-4 sm:p-0 sm:pb-4': transparent,
'-mt-4 py-4': size !== 'lg' && !transparent, '-mt-4 -mx-4 p-4': size !== 'lg' && !transparent,
'-mt-4 py-4 sm:-mt-6 sm:py-6': size === 'lg' && !transparent, '-mt-4 -mx-4 p-4 sm:-mt-6 sm:-mx-6 sm:p-6': size === 'lg' && !transparent,
})} })}
action={action} action={action}
/> />