diff --git a/packages/core/src/components/collections/Collection.classes.ts b/packages/core/src/components/collections/Collection.classes.ts index 5a8ad50e..6cad0207 100644 --- a/packages/core/src/components/collections/Collection.classes.ts +++ b/packages/core/src/components/collections/Collection.classes.ts @@ -12,6 +12,7 @@ const collectionClasses = generateClassNames('Collection', [ 'header-icon', 'header-label', 'new-entry-button', + 'new-entry-button-text', ]); export default collectionClasses; diff --git a/packages/core/src/components/collections/Collection.css b/packages/core/src/components/collections/Collection.css index f751d38e..ea5c82a6 100644 --- a/packages/core/src/components/collections/Collection.css +++ b/packages/core/src/components/collections/Collection.css @@ -83,5 +83,10 @@ .CMS_Collection_new-entry-button { @apply hidden - md:flex; + md:flex + min-w-0; +} + +.CMS_Collection_new-entry-button-text { + @apply truncate; } diff --git a/packages/core/src/components/collections/CollectionHeader.tsx b/packages/core/src/components/collections/CollectionHeader.tsx index 220c9173..c02c8df3 100644 --- a/packages/core/src/components/collections/CollectionHeader.tsx +++ b/packages/core/src/components/collections/CollectionHeader.tsx @@ -76,9 +76,11 @@ const CollectionHeader: FC = ({ collection }) => { {newEntryUrl ? ( ) : null} diff --git a/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx b/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx index 4b1812d5..0d39e854 100644 --- a/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx +++ b/packages/core/src/components/collections/entries/EntryListingCardGrid.tsx @@ -3,6 +3,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'; import { VariableSizeGrid as Grid } from 'react-window'; import { + COLLECTION_CARD_DATE_HEIGHT, COLLECTION_CARD_HEIGHT, COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE, COLLECTION_CARD_MARGIN, @@ -64,7 +65,7 @@ const CardWrapper: FC> = ({ } const data = entryData[index]; const cardHeight = - index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN : style.height; + index < cardHeights.length ? cardHeights[index] + COLLECTION_CARD_MARGIN * 2 : style.height; return (
= ({ }, []); const getDefaultHeight = useCallback((data?: CollectionEntryData) => { - return isNotNullish(data?.imageFieldName) + const base = isNotNullish(data?.imageFieldName) ? COLLECTION_CARD_HEIGHT : COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE; + + if (isNotNullish(data?.dateFieldName)) { + return base + COLLECTION_CARD_DATE_HEIGHT; + } + + return base; }, []); const [prevCardHeights, setPrevCardHeight] = useState([]); @@ -185,12 +192,12 @@ const EntryListingCardGrid: FC = ({ } if (cardHeights[i] > rowHeight && cardHeights[i]) { - rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN; + rowHeight = cardHeights[i] + COLLECTION_CARD_MARGIN * 2; } } if (rowHeight === 0) { - rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN; + rowHeight = getDefaultHeight() + COLLECTION_CARD_MARGIN * 2; } return rowHeight; diff --git a/packages/core/src/constants/views.ts b/packages/core/src/constants/views.ts index ed43bdb6..75398a9e 100644 --- a/packages/core/src/constants/views.ts +++ b/packages/core/src/constants/views.ts @@ -8,6 +8,7 @@ export const COLLECTION_CARD_WIDTH = 240; export const COLLECTION_CARD_HEIGHT = 204; export const COLLECTION_CARD_IMAGE_HEIGHT = 140; export const COLLECTION_CARD_HEIGHT_WITHOUT_IMAGE = 56; +export const COLLECTION_CARD_DATE_HEIGHT = 24; export const COLLECTION_CARD_MARGIN = 10; export const EDITOR_SIZE_COMPACT = 'compact';