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

Merge branch 'group-grid-list-item-fixes' into 'tag-improvements'

Browse source 
Group grid list item fixes

See merge request soapbox-pub/soapbox!2459
This commit is contained in:
Chewbacca 2023-04-24 12:01:09 +00:00
commit 9602382d39
6 changed files with 23 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/soapbox/features/groups/components/discover/group-grid-item.tsx
View file

@ -20,7 +20,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
return (
<div
key={group.id}
className='relative flex shrink-0 flex-col space-y-2 px-0.5'
className='relative flex shrink-0 flex-col space-y-2 px-1'
style={{
width,
}}
@ -39,7 +39,11 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
/>
)}
<Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
<div
className='absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-gray-900 to-transparent pb-8 pt-12 transition-opacity duration-500'
/>
<Stack justifyContent='end' className='p-4 text-white' space={3}>
<GroupAvatar
group={group}
size={44}
@ -60,10 +64,6 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
</HStack>
</Stack>
</Stack>
<div
className='absolute inset-x-0 bottom-0 z-0 flex justify-center rounded-b-lg bg-gradient-to-t from-gray-900 to-transparent pb-8 pt-12 transition-opacity duration-500'
/>
</Stack>
</Link>

2
app/soapbox/features/groups/components/discover/popular-groups.tsx
View file

@ -53,7 +53,7 @@ const PopularGroups = () => {
{isFetching ? (
new Array(4).fill(0).map((_, idx) => (
<div
className='relative flex shrink-0 flex-col space-y-2 px-0.5'
className='relative flex shrink-0 flex-col space-y-2 px-1'
style={{ width: width || 'auto' }}
key={idx}
>

10
app/soapbox/features/groups/components/discover/search/results.tsx
View file

@ -46,10 +46,8 @@ export default (props: Props) => {
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
const renderGroupGrid = useCallback((group: Group) => (
<GroupGridItem group={group} />
), []);
return (
@ -79,10 +77,10 @@ export default (props: Props) => {
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
itemContent={(_index, group) => renderGroupGrid(group)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
<div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
),
List: GridList,
}}

10
app/soapbox/features/groups/popular.tsx
View file

@ -46,10 +46,8 @@ const Popular: React.FC = () => {
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
const renderGroupGrid = useCallback((group: Group) => (
<GroupGridItem group={group} />
), []);
return (
@ -73,10 +71,10 @@ const Popular: React.FC = () => {
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
itemContent={(_index, group) => renderGroupGrid(group)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
<div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
),
List: GridList,
}}

10
app/soapbox/features/groups/suggested.tsx
View file

@ -46,10 +46,8 @@ const Suggested: React.FC = () => {
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
const renderGroupGrid = useCallback((group: Group) => (
<GroupGridItem group={group} />
), []);
return (
@ -73,10 +71,10 @@ const Suggested: React.FC = () => {
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
itemContent={(_index, group) => renderGroupGrid(group)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
<div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
),
List: GridList,
}}

10
app/soapbox/features/groups/tag.tsx
View file

@ -50,10 +50,8 @@ const Tag: React.FC<ITag> = (props) => {
</div>
), []);
const renderGroupGrid = useCallback((group: Group, index: number) => (
<div className='pb-4'>
<GroupGridItem group={group} />
</div>
const renderGroupGrid = useCallback((group: Group) => (
<GroupGridItem group={group} />
), []);
if (isLoading || !tag) {
@ -100,10 +98,10 @@ const Tag: React.FC<ITag> = (props) => {
<VirtuosoGrid
useWindowScroll
data={groups}
itemContent={(index, group) => renderGroupGrid(group, index)}
itemContent={(_index, group) => renderGroupGrid(group)}
components={{
Item: (props) => (
<div {...props} className='w-1/2 flex-none' />
<div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
),
List: GridList,
}}