Skip to content

Conversation

@ThibaudDauce
Copy link
Contributor

@ThibaudDauce ThibaudDauce commented Jan 28, 2026

Extracted from #847

  • Created ObjectCard base component with badges, media and default slots to provide a consistent card layout (border, hover, flex structure, fr-enlarge-link) shared across all horizontal cards. Created sub-components ObjectCardBadge (single badge only, uses absolute positioning), ObjectCardHeader and ObjectCardShortDescription (CSS line-clamp-2 + JS truncation to limit DOM size).
  • Created new card components: TopicCard, PostCard, DiscussionMessageCard, and ReuseHorizontalCard (extracted from the horizontal/search mode of ReuseCard into its own component).
  • Refactored DatasetCard and DataserviceCard to use ObjectCard. Added organization logo / avatar / placeholder on the left side of DataserviceCard, matching the layout of DatasetCard.
  • Added consistent iconography across all cards using Remix Icons (RiDatabase2Line for datasets, RiTerminalLine for dataservices, RiLineChartLine for reuses, RiChat3Line for discussions, RiArticleLine for posts, RiBookShelfLine for topics), with aria-hidden="true" on all decorative icons.
  • Extended Placeholder component with Dataservice and Topic types (RiTerminalLine and RiBookShelfLine).
  • Fixed badge layout on DataserviceCard: removed conditional mt-2 that caused misalignment in grids when a card had badges next to one without.
  • Fixed DiscussionCard (components/Discussions/) to guard against null closed_by with v-else-if.
  • Used RiSubtractLine as separator consistently across all cards (replaced middle dots in TopicCard and DiscussionMessageCard).
  • Added removeMarkdown to TopicCard description truncation, consistent with other cards.
  • Updated the /design/cards page to showcase all card types in a 2-column grid, fetching data directly via useAPI.
  • Moved types to datagouv-components: Page, Post, Comment, Thread.
  • Changed Discussion types to use UserReference/OrganizationReference instead of full User/Organization. Adapted getOwnerEmails in utils/owner.ts to fetch user by ID since UserReference doesn't carry email.

Fix #867

image

@ThibaudDauce ThibaudDauce marked this pull request as draft January 28, 2026 10:52
@ThibaudDauce ThibaudDauce marked this pull request as ready for review January 28, 2026 14:59

<div
v-if="topic.organization || topic.owner"
class="text-sm m-0 flex flex-wrap md:flex-nowrap gap-y-1 items-center truncate"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have an overflow issue on the topic card only
Image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 633ac99 (I've created a new component to have the same logic everywhere)

Copy link
Contributor

@nicolaskempf57 nicolaskempf57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it fixes #867 too

@ThibaudDauce ThibaudDauce merged commit 78120f7 into main Jan 28, 2026
6 checks passed
@ThibaudDauce ThibaudDauce deleted the new_cards branch January 28, 2026 15:35
ThibaudDauce added a commit that referenced this pull request Jan 29, 2026
- Remove DiscussionCard.vue (replaced by DiscussionMessageCard.vue in #903)
- Reset ReuseCard.vue to main version

Co-Authored-By: Claude Opus 4.5 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make dataservice badge relative in cards

3 participants