Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Condensed list card components for user lists #1251

Merged
merged 3 commits into from
Jul 11, 2024
Merged

Conversation

jonkafton
Copy link
Contributor

@jonkafton jonkafton commented Jul 10, 2024

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/4790

Description (What does it do?)

Screenshots (if appropriate):

image
image
image
image

How can this be tested?

While logged in, navigate to the dashboard "My lists" screen at /dashboard/#my-lists and select a list. You should have a "My Favorites" list, or can create a new list if necessary.

If there are no items in the list, from the homepage or search page, use the card action buttons to add items to you list.

Check the list items render according to designs at desktop and mobile screen widths.

Check variations in Storybook at http://localhost:6006/?path=/story/smoot-design-cards-learningresourcelistcardcondensed--free-course

Additional Context

This adds Card/ListCardCondensed base slots template and a LearningResourceCard/LearningResourceListCardCondensed to the ol-components library. These import heavily from their sibling Card/ListCardCondensed and LearningResourceCard/LearningResourceListCard, overriding styles only where they deviate. Relative to the existing resource list cards:

  • Tighter margins and padding on the card and text contents.
  • Smaller font for title.
  • Action buttons have a larger gap.
  • Mobile action buttons keep their border (they do not change at mobile breakpoint).
  • Top left resource type is anchored top (flex-start).
  • Height is not constrained. The card grows in height as longer titles wrap (I set a 4 line clamp which should rarely be hit).

Drag and sorting is to be done in a separate task.

@jonkafton jonkafton marked this pull request as draft July 10, 2024 20:47
@jonkafton jonkafton marked this pull request as ready for review July 11, 2024 15:08
@gumaerc gumaerc self-assigned this Jul 11, 2024
@jonkafton jonkafton added the Needs Review An open Pull Request that is ready for review label Jul 11, 2024
Copy link
Contributor

@gumaerc gumaerc left a comment

Choose a reason for hiding this comment

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

👍 LGTM!

@jonkafton jonkafton removed the Needs Review An open Pull Request that is ready for review label Jul 11, 2024
@jonkafton jonkafton merged commit fec3034 into main Jul 11, 2024
11 checks passed
@jonkafton jonkafton deleted the jk/4790-user-list-style branch July 11, 2024 16:50
@odlbot odlbot mentioned this pull request Jul 11, 2024
10 tasks
@odlbot odlbot mentioned this pull request Jul 11, 2024
12 tasks
mbertrand pushed a commit that referenced this pull request Jul 15, 2024
* Condensed list card components. Apply to ItemsListing page

* Style lint

* Update test and remove duplication
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.

2 participants