Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
  • Sign in / Register
Minds Frontend
Minds Frontend
  • Project overview
  • Repository
  • Issues 407
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 66
  • CI / CD
  • Security & Compliance
  • Packages
  • Analytics
  • Wiki
  • Snippets
  • Members
  • Collapse sidebar
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Minds
  • Minds FrontendMinds Frontend
  • Issues
  • #2473

Closed
Open
Opened 3 weeks ago by Brian Hatchet@brianhatchet:speech_balloon:
Report abuse New issue

Implement better arrows for modal pager

  • Controls (left arrow, right arrow and close 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

Linked issues
0

  • Discussion 3
  • Designs 0
  • Brian Hatchet :speech_balloon: @brianhatchet changed milestone to %Sprint:01/29 Abatic Aenome 3 weeks ago

    changed milestone to %Sprint:01/29 Abatic Aenome

  • Brian Hatchet :speech_balloon: @brianhatchet added Platform::Browser Sprint::01/29 Abatic Aenome Squad::Yellow scoped labels 3 weeks ago

    added scoped labels

  • Brian Hatchet :speech_balloon: @brianhatchet changed weight to 4 3 weeks ago

    changed weight to 4

  • Brian Hatchet :speech_balloon: @brianhatchet added Status::Backlog scoped label 3 weeks ago

    added scoped label

  • Brian Hatchet :speech_balloon: @brianhatchet assigned to @eiennohi 3 weeks ago

    assigned to @eiennohi

  • Brian Hatchet :speech_balloon: @brianhatchet added Squad::Blue scoped label and automatically removed Squad::Yellow label 3 weeks ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet unassigned @edgebal 3 weeks ago

    unassigned @edgebal

  • Brian Hatchet :speech_balloon: @brianhatchet added Sprint::02/12 - Baritone Baboon scoped label and automatically removed Sprint::01/29 Abatic Aenome label 3 weeks ago

    added scoped label and automatically removed label

  • Brian Hatchet :speech_balloon: @brianhatchet assigned to @omadrid 1 week ago

    assigned to @omadrid

  • Olivia Madrid
    Olivia Madrid @omadrid · 43 minutes ago
    Developer

    @brianhatchet is the close button supposed to literally say 'esc', as pictured?

  • Brian Hatchet
    Brian Hatchet :speech_balloon: @brianhatchet · 28 minutes ago
    Developer

    Yes, as a hint to the short cut key to close the modal pager

  • Olivia Madrid
    Olivia Madrid @omadrid · 11 minutes ago
    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. image

    • 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. image

    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 7 minutes ago
Please register or sign in to reply
2 Assignees
Marcelo Rivera's avatar
Olivia Madrid's avatar
none
Epic
None
Sprint::01/29 Abatic Aenome
Milestone
Sprint::01/29 Abatic Aenome
Time tracking
No estimate or time spent
None
Due date
None
4
Labels
Platform::Browser Sprint::02/12 - Baritone Baboon Squad::Blue Status::Backlog
4
Weight
4
Confidentiality
Not confidential
Lock issue
Unlocked
4
4 participants
user avatar
user avatar
user avatar
user avatar
Reference: minds/front#2473