NTNGL-5467 | Enable List Tile Drag and Drop#6973
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
NicholasHallman
left a comment
NicholasHallman
left a comment
There was a problem hiding this comment.
Descriptions for what some of this css is accomplishing
| } | ||
|
|
||
| :host([layout="tile"]) .d2l-list-item-drag-bottom-marker { | ||
| right: calc(-0.9rem + 3px); |
There was a problem hiding this comment.
Lots of magic numbers here but to explain, the -0.9 rem is the gap between the cards and the 3px is half of the 6px that was previously used to center the markers
| :host([layout="tile"]) .d2l-list-item-drag-drop-grid { | ||
| display: grid; | ||
| grid-template-rows: 100%; | ||
| grid-template-columns: 1rem 1fr 1fr 1rem; | ||
| } |
There was a problem hiding this comment.
This rotates the drop targets
| :host([layout="tile"]:not([is-draggable])) { | ||
| grid-template-columns: | ||
| [start outside-control-start] 0 | ||
| [outside-control-end control-start] minmax(0, min-content) | ||
| [control-end actions-start] minmax(0, auto) | ||
| [actions-end end]; |
There was a problem hiding this comment.
This varient ensures that the selection box is the left most item when the drag handle isn't present. There's a fun layout issue that prevents minmax(0, min-content) from ever equalling 0. My guess is that this is due to the content below the header spanning this column and so chrome assumes the column can't have a width of 0.
| :host([layout="tile"][draggable]) d2l-selection-input { | ||
| margin: auto; | ||
| } |
There was a problem hiding this comment.
the drag handle makes the title bar slightly taller so we need to tell the selection to center itself
1 participant
Almost entirely css changes to re-enable drag and keyboard arrangement functionality for tiles.
The rest of the css is for properly positioning the elements and rotating the marker
Functional Tests (Demo Manual QA)
Highlighting some design decisions we made in the meeting with Glen and Tayzia