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

Merge branch 'fix-carousel-arrows' into 'develop'

Browse source 
Fix button in Carousel

See merge request soapbox-pub/soapbox!2122
This commit is contained in:
Chewbacca 2023-01-05 21:23:35 +00:00
commit acb959f680
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/soapbox/features/feed-filtering/feed-carousel.tsx
View file

@ -159,7 +159,7 @@ const FeedCarousel = () => {
<button <button
data-testid='prev-page' data-testid='prev-page'
onClick={handlePrevPage} onClick={handlePrevPage}
className='w-7 flex items-center justify-center disabled:opacity-25 transition-opacity duration-500' className='h-full w-7 flex items-center justify-center disabled:opacity-25 transition-opacity duration-500'
disabled={!hasPrevPage} disabled={!hasPrevPage}
> >
<Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-5 w-5' /> <Icon src={require('@tabler/icons/chevron-left.svg')} className='text-black dark:text-white h-5 w-5' />
@ -171,7 +171,7 @@ const FeedCarousel = () => {
<div <div
className='z-10 flex items-center justify-center absolute left-0 top-0 bottom-0 bg-white dark:bg-primary-900' className='z-10 flex items-center justify-center absolute left-0 top-0 bottom-0 bg-white dark:bg-primary-900'
style={{ style={{
width: widthPerAvatar, width: widthPerAvatar || 'auto',
}} }}
> >
<CarouselItem <CarouselItem
@ -194,7 +194,11 @@ const FeedCarousel = () => {
> >
{isFetching ? ( {isFetching ? (
new Array(20).fill(0).map((_, idx) => ( new Array(20).fill(0).map((_, idx) => (
<div className='flex flex-shrink-0 justify-center' style={{ width: widthPerAvatar }} key={idx}> <div
className='flex flex-shrink-0 justify-center'
style={{ width: widthPerAvatar || 'auto' }}
key={idx}
>
<PlaceholderAvatar size={56} withText /> <PlaceholderAvatar size={56} withText />
</div> </div>
)) ))
@ -204,7 +208,7 @@ const FeedCarousel = () => {
key={avatar?.account_id || index} key={avatar?.account_id || index}
className='flex flex-shrink-0 justify-center' className='flex flex-shrink-0 justify-center'
style={{ style={{
width: widthPerAvatar, width: widthPerAvatar || 'auto',
}} }}
> >
{avatar === null ? ( {avatar === null ? (
@ -240,7 +244,7 @@ const FeedCarousel = () => {
<button <button
data-testid='next-page' data-testid='next-page'
onClick={handleNextPage} onClick={handleNextPage}
className='w-7 flex items-center justify-center disabled:opacity-25 transition-opacity duration-500' className='h-full w-7 flex items-center justify-center disabled:opacity-25 transition-opacity duration-500'
disabled={!hasNextPage} disabled={!hasNextPage}
> >
<Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-5 w-5' /> <Icon src={require('@tabler/icons/chevron-right.svg')} className='text-black dark:text-white h-5 w-5' />