Skip to content

Commit 8638764

Browse files
ofahimIQSSofahimIQSS
authored
Merge pull request #735 from IQSS/730-collection-page-items-tweaks
Collection Page - Cards tweaks
2 parents 918bcde + bd7f4e7 commit 8638764

27 files changed

Lines changed: 486 additions & 321 deletions

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"@dnd-kit/sortable": "8.0.0",
1818
"@dnd-kit/utilities": "3.2.2",
1919
"@faker-js/faker": "7.6.0",
20-
"@iqss/dataverse-client-javascript": "2.0.0-alpha.48",
20+
"@iqss/dataverse-client-javascript": "2.0.0-alpha.49",
2121
"@iqss/dataverse-design-system": "*",
2222
"@istanbuljs/nyc-config-typescript": "1.0.2",
2323
"@tanstack/react-table": "8.9.2",

‎src/sections/collection/collection-items-panel/items-list/ItemsList.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,12 +175,15 @@ export const ItemsList = forwardRef(
175175
<li key={`${collectionItem.type}-${index}`}>
176176
{collectionItem?.type === CollectionItemType.COLLECTION && (
177177
<CollectionCard
178-
parentCollectionAlias={parentCollectionAlias}
179178
collectionPreview={collectionItem}
179+
parentCollectionAlias={parentCollectionAlias}
180180
/>
181181
)}
182182
{collectionItem?.type === CollectionItemType.DATASET && (
183-
<DatasetCard datasetPreview={collectionItem} />
183+
<DatasetCard
184+
datasetPreview={collectionItem}
185+
parentCollectionAlias={parentCollectionAlias}
186+
/>
184187
)}
185188
{collectionItem?.type === CollectionItemType.FILE && (
186189
<FileCard filePreview={collectionItem} />

‎src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.module.scss‎

Lines changed: 12 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,9 @@
2020
@include link-hover-underlined;
2121
}
2222

23-
.left-side-content {
24-
display: flex;
25-
flex-wrap: wrap;
26-
gap: 8px;
27-
28-
.affiliation {
29-
margin: 0;
30-
color: $dv-subtext-color;
31-
}
23+
.affiliation {
24+
margin-left: 6px;
25+
color: $dv-subtext-color;
3226
}
3327

3428
.title-and-labels {
@@ -50,11 +44,6 @@
5044
}
5145
}
5246

53-
.thumbnail-and-info-wrapper {
54-
display: flex;
55-
gap: 1rem;
56-
}
57-
5847
.card-thumbnail-container {
5948
padding-block: 0.25rem;
6049

@@ -78,22 +67,16 @@
7867
}
7968
}
8069

81-
.card-info-container {
82-
align-self: flex-start;
70+
.card-body-container {
71+
align-items: flex-start;
8372
font-size: $dv-font-size-sm;
8473

85-
.date-link-wrapper {
86-
display: flex;
87-
flex-wrap: wrap;
88-
column-gap: 0.5rem;
89-
90-
.date {
91-
color: $dv-subtext-color;
92-
}
74+
.release-or-create-date {
75+
color: $dv-subtext-color;
76+
}
9377

94-
a {
95-
@include link-hover-underlined;
96-
}
78+
a {
79+
@include link-hover-underlined;
9780
}
9881

9982
.description {
@@ -102,7 +85,8 @@
10285
line-clamp: 3;
10386
-webkit-box-orient: vertical;
10487
width: 100%;
88+
margin: 0;
10589
overflow: hidden;
106-
color: black;
90+
color: #000;
10791
}
10892
}

‎src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.tsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { CollectionCardHeader } from './CollectionCardHeader'
2-
import { CollectionCardThumbnail } from './CollectionCardThumbnail'
3-
import { CollectionCardInfo } from './CollectionCardInfo'
42
import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview'
3+
import { CollectionCardBody } from './CollectionCardBody'
54
import styles from './CollectionCard.module.scss'
65

76
interface CollectionCardProps {
@@ -13,13 +12,10 @@ export function CollectionCard({ collectionPreview, parentCollectionAlias }: Col
1312
return (
1413
<article className={styles['card-main-container']} data-testid="collection-card">
1514
<CollectionCardHeader collectionPreview={collectionPreview} />
16-
<div className={styles['thumbnail-and-info-wrapper']}>
17-
<CollectionCardThumbnail collectionPreview={collectionPreview} />
18-
<CollectionCardInfo
19-
parentCollectionAlias={parentCollectionAlias}
20-
collectionPreview={collectionPreview}
21-
/>
22-
</div>
15+
<CollectionCardBody
16+
collectionPreview={collectionPreview}
17+
parentCollectionAlias={parentCollectionAlias}
18+
/>
2319
</article>
2420
)
2521
}

src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardInfo.tsx renamed to src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardBody.tsx

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,51 @@
11
import { Stack } from '@iqss/dataverse-design-system'
22
import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview'
3+
import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage'
34
import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode'
4-
import { DateHelper } from '@/shared/helpers/DateHelper'
55
import { Route } from '@/sections/Route.enum'
6-
import { LinkToPage } from '@/sections/shared/link-to-page/LinkToPage'
6+
import { CollectionCardThumbnail } from './CollectionCardThumbnail'
7+
import { DateHelper } from '@/shared/helpers/DateHelper'
78
import styles from './CollectionCard.module.scss'
89

9-
interface CollectionCardInfoProps {
10+
interface CollectionCardBodyProps {
1011
collectionPreview: CollectionItemTypePreview
1112
parentCollectionAlias?: string
1213
}
1314

14-
export function CollectionCardInfo({
15+
export const CollectionCardBody = ({
1516
collectionPreview,
1617
parentCollectionAlias
17-
}: CollectionCardInfoProps) {
18+
}: CollectionCardBodyProps) => {
1819
const isStandingOnParentCollectionPage =
1920
!!parentCollectionAlias && collectionPreview.parentCollectionAlias === parentCollectionAlias
2021

2122
return (
22-
<div className={styles['card-info-container']}>
23-
<Stack gap={1}>
24-
<div className={styles['date-link-wrapper']}>
23+
<Stack direction="horizontal" gap={3} className={styles['card-body-container']}>
24+
<CollectionCardThumbnail collectionPreview={collectionPreview} />
25+
<Stack direction="vertical" gap={1}>
26+
<Stack direction="horizontal" gap={1}>
2527
<time
2628
dateTime={collectionPreview.releaseOrCreateDate.toLocaleDateString()}
27-
className={styles.date}>
29+
className={styles['release-or-create-date']}>
2830
{DateHelper.toDisplayFormat(collectionPreview.releaseOrCreateDate)}
2931
</time>
3032
{!isStandingOnParentCollectionPage && (
31-
<LinkToPage
32-
type={DvObjectType.COLLECTION}
33-
page={Route.COLLECTIONS}
34-
searchParams={{ id: collectionPreview.parentCollectionAlias?.toString() }}>
35-
{collectionPreview.parentCollectionName}
36-
</LinkToPage>
33+
<span className={styles['link-to-collection-wrapper']}>
34+
<span>- </span>
35+
<LinkToPage
36+
type={DvObjectType.COLLECTION}
37+
page={Route.COLLECTIONS}
38+
searchParams={{ id: collectionPreview.parentCollectionAlias?.toString() }}>
39+
{collectionPreview.parentCollectionName}
40+
</LinkToPage>
41+
</span>
3742
)}
38-
</div>
43+
</Stack>
3944

4045
{collectionPreview.description && (
4146
<p className={styles.description}>{collectionPreview.description}</p>
4247
)}
4348
</Stack>
44-
</div>
49+
</Stack>
4550
)
4651
}

‎src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardHeader.tsx‎

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Badge, Icon, IconName } from '@iqss/dataverse-design-system'
1+
import { Badge, Icon, IconName, Stack } from '@iqss/dataverse-design-system'
22
import { Route } from '@/sections/Route.enum'
33
import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview'
44
import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode'
@@ -12,28 +12,33 @@ interface CollectionCardHeaderProps {
1212
export function CollectionCardHeader({ collectionPreview }: CollectionCardHeaderProps) {
1313
return (
1414
<header className={styles['card-header-container']}>
15-
<div className={styles['left-side-content']}>
16-
<LinkToPage
17-
type={DvObjectType.COLLECTION}
18-
page={Route.COLLECTIONS}
19-
searchParams={{ id: collectionPreview.alias.toString() }}>
20-
{collectionPreview.name}
21-
</LinkToPage>
22-
{collectionPreview.affiliation && (
23-
<p className={styles.affiliation}>({collectionPreview.affiliation})</p>
24-
)}
25-
{!collectionPreview.isReleased && (
26-
<div>
27-
<Badge variant="warning">Unpublished</Badge>
28-
</div>
29-
)}
30-
{collectionPreview.userRoles &&
31-
collectionPreview.userRoles.map((role, index) => (
32-
<div key={index}>
33-
<Badge variant="success">{role}</Badge>
34-
</div>
35-
))}
36-
</div>
15+
<Stack direction="horizontal" gap={2} className="flex-wrap">
16+
<span>
17+
<LinkToPage
18+
type={DvObjectType.COLLECTION}
19+
page={Route.COLLECTIONS}
20+
searchParams={{ id: collectionPreview.alias.toString() }}>
21+
{collectionPreview.name}
22+
</LinkToPage>
23+
{collectionPreview.affiliation && (
24+
<span className={styles.affiliation}>({collectionPreview.affiliation})</span>
25+
)}
26+
</span>
27+
28+
<Stack direction="horizontal" gap={1} className="flex-wrap">
29+
{!collectionPreview.isReleased && <Badge variant="warning">Unpublished</Badge>}
30+
31+
{collectionPreview.userRoles && (
32+
<Stack direction="horizontal" gap={1} className="flex-wrap">
33+
{collectionPreview.userRoles.map((role, index) => (
34+
<Badge key={index} variant="info">
35+
{role}
36+
</Badge>
37+
))}
38+
</Stack>
39+
)}
40+
</Stack>
41+
</Stack>
3742

3843
<div className={styles['top-right-icon']}>
3944
<Icon name={IconName.COLLECTION} />

‎src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.module.scss‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,6 @@
1212
border-radius: 4px;
1313
}
1414

15-
.thumbnail-and-info-wrapper {
16-
display: flex;
17-
gap: 1rem;
18-
}
19-
2015
.card-header-container {
2116
display: flex;
2217
gap: 1rem;
@@ -68,23 +63,25 @@
6863
}
6964
}
7065

71-
.card-info-container {
72-
display: flex;
73-
flex-direction: column;
74-
gap: 4px;
75-
align-self: flex-start;
76-
width: 100%;
66+
.card-body-container {
67+
align-items: flex-start;
7768
font-size: $dv-font-size-sm;
7869

79-
.date {
70+
.release-or-create-date {
8071
color: $dv-subtext-color;
8172
}
8273

74+
.link-to-collection-wrapper a {
75+
@include link-hover-underlined;
76+
}
77+
8378
.citation-box {
8479
display: -webkit-box;
8580
padding: 4px;
8681
overflow: hidden;
82+
font-size: $dv-font-size-sm;
8783
background-color: color.adjust($dv-primary-color, $lightness: 51%);
84+
border: solid 1px color.adjust($dv-primary-color, $lightness: 20%);
8885
border-radius: 4px;
8986
-webkit-line-clamp: 5;
9087
line-clamp: 5;
@@ -96,6 +93,7 @@
9693

9794
&.deaccesioned {
9895
background-color: color.adjust($dv-danger-box-color, $lightness: 6%);
96+
border: solid 1px color.adjust($dv-danger-color, $lightness: 20%);
9997
}
10098

10199
& > div {
@@ -109,6 +107,7 @@
109107
line-clamp: 3;
110108
-webkit-box-orient: vertical;
111109
width: 100%;
110+
margin: 0;
112111
overflow: hidden;
113112
color: #000;
114113
}

‎src/sections/collection/collection-items-panel/items-list/dataset-card/DatasetCard.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,26 @@
11
import { DatasetItemTypePreview } from '@/dataset/domain/models/DatasetItemTypePreview'
22
import { DatasetCardHeader } from './DatasetCardHeader'
3-
import { DatasetCardThumbnail } from './DatasetCardThumbnail'
4-
import { DatasetCardInfo } from './DatasetCardInfo'
3+
import { DatasetCardBody } from './DatasetCardBody'
54
import styles from './DatasetCard.module.scss'
65

76
interface DatasetCardProps {
87
datasetPreview: DatasetItemTypePreview
8+
parentCollectionAlias?: string
99
}
1010

11-
export function DatasetCard({ datasetPreview }: DatasetCardProps) {
11+
export function DatasetCard({ datasetPreview, parentCollectionAlias }: DatasetCardProps) {
1212
return (
1313
<article className={styles['card-main-container']} data-testid="dataset-card">
1414
<DatasetCardHeader
1515
persistentId={datasetPreview.persistentId}
1616
version={datasetPreview.version}
1717
userRoles={datasetPreview.userRoles}
18+
publicationStatuses={datasetPreview.publicationStatuses}
19+
/>
20+
<DatasetCardBody
21+
datasetPreview={datasetPreview}
22+
parentCollectionAlias={parentCollectionAlias}
1823
/>
19-
<div className={styles['thumbnail-and-info-wrapper']}>
20-
<DatasetCardThumbnail
21-
persistentId={datasetPreview.persistentId}
22-
version={datasetPreview.version}
23-
thumbnail={datasetPreview.thumbnail}
24-
/>
25-
<DatasetCardInfo
26-
version={datasetPreview.version}
27-
releaseOrCreateDate={datasetPreview.releaseOrCreateDate}
28-
description={datasetPreview.description}
29-
/>
30-
</div>
3124
</article>
3225
)
3326
}

0 commit comments

Comments
 (0)