Adjust grid card rows

This commit is contained in:
jeffvli
2022-11-19 20:49:28 -08:00
parent d66c756af5
commit 24b0d37bd1
3 changed files with 21 additions and 5 deletions
@@ -109,7 +109,7 @@ const DetailSection = styled.div`
const Row = styled.div<{ $secondary?: boolean }>` const Row = styled.div<{ $secondary?: boolean }>`
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 25px; height: 22px;
padding: 0 0.2rem; padding: 0 0.2rem;
overflow: hidden; overflow: hidden;
color: ${({ $secondary }) => color: ${({ $secondary }) =>
@@ -236,6 +236,7 @@ export const DefaultCard = ({
$secondary={index > 0} $secondary={index > 0}
component={Link} component={Link}
overflow="hidden" overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
to={generatePath( to={generatePath(
row.route!.route, row.route!.route,
row.route!.slugs?.reduce((acc, slug) => { row.route!.slugs?.reduce((acc, slug) => {
@@ -264,6 +265,7 @@ export const DefaultCard = ({
$noSelect $noSelect
$secondary={index > 0} $secondary={index > 0}
overflow="hidden" overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
> >
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
@@ -294,7 +296,12 @@ export const DefaultCard = ({
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
) : ( ) : (
<Text $noSelect $secondary={index > 0} overflow="hidden"> <Text
$noSelect
$secondary={index > 0}
overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
>
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
)} )}
@@ -110,7 +110,7 @@ const DetailSection = styled.div`
const Row = styled.div<{ $secondary?: boolean }>` const Row = styled.div<{ $secondary?: boolean }>`
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
height: 25px; height: 22px;
padding: 0 0.2rem; padding: 0 0.2rem;
overflow: hidden; overflow: hidden;
color: ${({ $secondary }) => color: ${({ $secondary }) =>
@@ -217,6 +217,7 @@ export const PosterCard = ({
{itemIndex > 0 && ( {itemIndex > 0 && (
<Text <Text
$noSelect $noSelect
size={index > 0 ? 'xs' : 'md'}
sx={{ sx={{
display: 'inline-block', display: 'inline-block',
padding: '0 2px 0 1px', padding: '0 2px 0 1px',
@@ -231,6 +232,7 @@ export const PosterCard = ({
$secondary={index > 0} $secondary={index > 0}
component={Link} component={Link}
overflow="hidden" overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
to={generatePath( to={generatePath(
row.route!.route, row.route!.route,
row.route!.slugs?.reduce((acc, slug) => { row.route!.slugs?.reduce((acc, slug) => {
@@ -258,6 +260,7 @@ export const PosterCard = ({
$noSelect $noSelect
$secondary={index > 0} $secondary={index > 0}
overflow="hidden" overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
> >
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
@@ -274,6 +277,7 @@ export const PosterCard = ({
$noSelect $noSelect
component={Link} component={Link}
overflow="hidden" overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
to={generatePath( to={generatePath(
row.route.route, row.route.route,
row.route.slugs?.reduce((acc, slug) => { row.route.slugs?.reduce((acc, slug) => {
@@ -287,7 +291,12 @@ export const PosterCard = ({
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
) : ( ) : (
<Text $noSelect $secondary={index > 0} overflow="hidden"> <Text
$noSelect
$secondary={index > 0}
overflow="hidden"
size={index > 0 ? 'xs' : 'md'}
>
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
)} )}
@@ -52,7 +52,7 @@ export const VirtualInfiniteGrid = ({
return { return {
columnCount: itemsPerRow, columnCount: itemsPerRow,
itemHeight: itemSize! + cardRows.length * 25 + itemGap, itemHeight: itemSize! + cardRows.length * 22 + itemGap,
itemWidth: itemSize! + itemGap, itemWidth: itemSize! + itemGap,
rowCount: Math.ceil(itemCount / itemsPerRow), rowCount: Math.ceil(itemCount / itemsPerRow),
}; };