website: Drag handles for ranking items #230
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…lear they can be dragged. The formatting changes to the SortableItem also had the side-effect of removing the dot points.
…the webpage layout. When the items are drag-able outside the page boundary the viewport leaves the page boundary. This looks particularly unprofessionally on mobile. There is also another option to restrict to the page boundaries (restrictToWindowEdges) which might be better but it doesn't appear to work on mobile (firefox); the issue is that the items get stuck slightly off to the left edge of the viewport and can't be moved horizontally at all (even without restrictToVerticalAxis).
othrayte
requested review from
fozziethebeat,
k-nearest-neighbor and
AbdBarho
as code owners
fozziethebeat
requested changes
Jan 1, 2023
| sortableKeyboardCoordinates, | ||
| verticalListSortingStrategy, | ||
| } from "@dnd-kit/sortable"; | ||
| import { restrictToVerticalAxis } from "@dnd-kit/modifiers"; |
There was a problem hiding this comment.
small nit, could you move this import up above sortable so it's in order?
There was a problem hiding this comment.
Sure, just to confirm external imports should be alphabetically by @scope / unscoped name, then by scoped package name? so:
- a
- @b/a
- @b/e
- c
- c-foo
There was a problem hiding this comment.
I think with the new eslint change that goes in @ is always first. So it'd be
@b/a
@b/e
a
c
c-foo
fozziethebeat
approved these changes
Jan 1, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds drag handles, to the rank prompts and replies pages of the website.
Closes #223
Removed the dot points that were appearing next to each item. Restrict ranking items to vertical motion to avoid breaking the webpage layout; there is an even better option to restrict to the window but that didn't seem to work on mobile (firefox) were the issue looks the most unprofessional.
Also enabled the keyboard sensor so that the items can be moved without a mouse. To use select one of the drag handles with
TABor the mouse to give it focus, pressENTERorSPACEto start moving the item and use the arrow keys (up or down) to reorder the items, pressENTERorSPACEagain when done,ESCAPEcancels the action. There is a full description at https://docs.dndkit.com/guides/accessibility#keyboard-shortcuts which also mentions we might want to customise the screen reader prompt.