gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: card height with date field (#1106)

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2024-04-26 11:08:17 -04:00 committed by GitHub
parent e655745961
commit 79a6fc5a2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/components/collections/Collection.classes.ts
View File

@ -12,6 +12,7 @@ const collectionClasses = generateClassNames('Collection', [
'header-icon', 'header-icon',
'header-label', 'header-label',
'new-entry-button', 'new-entry-button',
'new-entry-button-text',
]); ]);
export default collectionClasses; export default collectionClasses;

7
packages/core/src/components/collections/Collection.css
View File

@ -83,5 +83,10 @@
.CMS_Collection_new-entry-button { .CMS_Collection_new-entry-button {
@apply hidden @apply hidden
md:flex; md:flex
min-w-0;
}
.CMS_Collection_new-entry-button-text {
@apply truncate;
} }

8
packages/core/src/components/collections/CollectionHeader.tsx
View File

@ -76,9 +76,11 @@ const CollectionHeader: FC<CollectionHeaderProps> = ({ collection }) => {
</h2> </h2>
{newEntryUrl ? ( {newEntryUrl ? (
<Button to={newEntryUrl} className={collectionClasses['new-entry-button']}> <Button to={newEntryUrl} className={collectionClasses['new-entry-button']}>
{t('collection.collectionTop.newButton', { <div className={collectionClasses['new-entry-button-text']}>
collectionLabel: collectionLabelSingular ?? pluralLabel, {t('collection.collectionTop.newButton', {
})} collectionLabel: collectionLabelSingular ?? pluralLabel,
})}
</div>
</Button> </Button>
) : null} ) : null}
</div> </div>

15
packages/core/src/components/collections/entries/EntryListingCardGrid.tsx
View File

@ -3,6 +3,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
import { VariableSizeGrid as Grid } from 'react-window'; import { VariableSizeGrid as Grid } from 'react-window';
import { import {
COLLECTION_CARD_DATE_HEIGHT,
COLLECTION_CARD_HEIGHT, COLLECTION_CARD_HEIGHT,
COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE, COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE,
COLLECTION_CARD_MARGIN, COLLECTION_CARD_MARGIN,
@ -64,7 +65,7 @@ const CardWrapper: FC<GridChildComponentProps<CardGridItemData>> = ({
} }
const data = entryData[index]; const data = entryData[index];
const cardHeight = const cardHeight =
index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN : style.height; index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN * 2 : style.height;
return ( return (
<div <div
@ -114,9 +115,15 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
}, []); }, []);
const getDefaultHeight = useCallback((data?: CollectionEntryData) => { const getDefaultHeight = useCallback((data?: CollectionEntryData) => {
return isNotNullish(data?.imageFieldName) const base = isNotNullish(data?.imageFieldName)
? COLLECTION_CARD_HEIGHT ? COLLECTION_CARD_HEIGHT
: COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE; : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE;
if (isNotNullish(data?.dateFieldName)) {
return base + COLLECTION_CARD_DATE_HEIGHT;
}
return base;
}, []); }, []);
const [prevCardHeights, setPrevCardHeight] = useState<number[]>([]); const [prevCardHeights, setPrevCardHeight] = useState<number[]>([]);
@ -185,12 +192,12 @@ const EntryListingCardGrid: FC<EntryListingCardGridProps> = ({
} }
if (cardHeights[i] > rowHeight && cardHeights[i]) { if (cardHeights[i] > rowHeight && cardHeights[i]) {
rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN; rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN * 2;
} }
} }
if (rowHeight === 0) { if (rowHeight === 0) {
rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN; rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN * 2;
} }
return rowHeight; return rowHeight;

1
packages/core/src/constants/views.ts
View File

@ -8,6 +8,7 @@ export const COLLECTION_CARD_WIDTH = 240;
export const COLLECTION_CARD_HEIGHT = 204; export const COLLECTION_CARD_HEIGHT = 204;
export const COLLECTION_CARD_IMAGE_HEIGHT = 140; export const COLLECTION_CARD_IMAGE_HEIGHT = 140;
export const COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE = 56; export const COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE = 56;
export const COLLECTION_CARD_DATE_HEIGHT = 24;
export const COLLECTION_CARD_MARGIN = 10; export const COLLECTION_CARD_MARGIN = 10;
export const EDITOR_SIZE_COMPACT = 'compact'; export const EDITOR_SIZE_COMPACT = 'compact';