matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Grid spacing improvements

Browse Source
This commit is contained in:
Chewbacca
2023-04-21 10:11:34 -04:00
parent 63ca6554d1
commit e5f7fe244c
4 changed files with 16 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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,
}}