Implement better arrows for modal pager
- Controls (
left arrow
,right arrow
andclose button
) are always visible. Show the left/right arrows will demonstrate that there is more content, without necessarily needing to hover over the content - Controls are at 60% opacity by default. On Hover this increases to
100%
. Feel free to use any animation which may enhance things. - The position of the arrows have been moved.
- Pressing escape on the keyboard should close the modal also.
Let me know if you've any questions at all.
https://gitlab.com/minds/front/uploads/95533eb32d3589daebb604c46e9ff831/modal-arrows.png
changed milestone to %Sprint:01/29 Abatic Aenome
added scoped labels
changed weight to 4
added scoped label
assigned to @eiennohi
added scoped label and automatically removed label
unassigned @edgebal
added scoped label and automatically removed label
assigned to @omadrid
- Developer
@brianhatchet is the close button supposed to literally say 'esc', as pictured?
- Developer
Yes, as a hint to the short cut key to close the modal pager
- Developer
@brianhatchet My 2 cents that no one asked for is that moving the arrows creates a worse ux and that there are better ways to increase awareness that the pager is there. Maybe we should just make it so the existing arrows appear for a certain time after any mouse movement and/or on hover over anywhere in the modal (as opposed to just the content). The design in the mockup works in very wide screens but creates problems on narrower ones, depending on whether the repositioned arrows supposed to be (a) fixed to fit the window, or (b) fixed to be outside the modal edges
-
If (a), looks messy. The right arrow will overlap various other controls on the modal -- depending on where the right arrow ends up, it could prevent or accidentally trigger upvotes/downvotes/opening share modal, etc.
-
If (b) one or both the arrows could easily be pushed out of view entirely and people won't be able to easily page right and see new content without constantly scrolling back and forth to access the arrows.
Note also that if the goal is to have the arrows lie outside the modal edges, we'll also have to make adjustments to the calculations for the margin around the modal itself, because currently it gets down to 20px, which isn't big enough to comfortably fit the arrows.
The arrows should def have the same animation as the rest of the modal stuff though.
Edited by Olivia Madrid -