mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
Adjust grid card rows
This commit is contained in:
@@ -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),
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user