Draggable list card styles #1282
Conversation
|
Great work, @jonkafton! I really like it 👍. The mobile card spacing is adjusted perfectly. |
There was a problem hiding this comment.
👍 Looks good! I did notice one style issue, but it isn't new.
The intent is:
- draggable has
cursor: pointer... this works fine - dragging has
cursor: grab... this does not
I believe the issue is in frontends/ol-components/src/components/SortableList/SortableList.tsx near
<div className="ol-dragging">{active && renderActive(active)}</div>
Might be worth fixing here.
| <Loading> | ||
| <LoadingSpinner loading /> | ||
| </Loading> |
There was a problem hiding this comment.
Should we replace this with skeletons? Guess it could be weird to show 10 skeletons and then render a list with 2 cards.
There was a problem hiding this comment.
Yes definitely, though I thought it out of the scope of this task.
| ${containerStyles} | ||
| display: flex; | ||
| ` | ||
|
|
||
| const Content = () => <></> |
There was a problem hiding this comment.
What is this for? I know it's not new, failed to notice it earlier.
There was a problem hiding this comment.
The DragArea and Body are siblings that need a flex container to place items adjacently. It happens that the LinkContainer is already a flex container, but we don't use this while in draggable mode (we don't want hover states or click to navigate), so here I'm adding a Container for dragging that displays flex.
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/4859
Description (What does it do?)
Applies the list card draggable / sortable designs to the User List and Learning Path item list screens.
Screenshots:
Condensed, desktop:
Condensed, mobile:
Default, desktop:
Default, mobile:
How can this be tested?
While logged in:
Navigate to these pages, click "Reorder" drag and confirm the draggable list card designs have been applied, https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=9005-102169&m=dev
Drag to a new position, click "Done ordering" and confirm that the new position is preserved after refresh.
Additional Context
The designs show the draggable list card in condensed mode for desktop (no image, User Lists version). I've added a mobile breakpoint that adjusts the drag handle and surrounding margins to work with the mobile view of the card ("condensed, mobile" above). @steven-hatch these could do with a design review and ideally added in Figma. Let me know if you have changes or if I have missed it in Figma. Same thing for the default larger list card view on the Learning Path Listings page.
Animation on the drag handle area width is challenging as we remove and redraw the list when we enter reordering mode, ie. ItemsListing toggles ItemsListingSortable and StyledPlainList. It's marked as optional, though let's prioritise separately if the design value warrants the complexity.