Skip to content

Improve Gallery Component Usability (Feedback Würzburg)

🚀 Feature

As a user, I want improved visual cues and controls for the gallery component, so that I can intuitively interact with images and understand available actions.

🎨 Wireframe

  1. When an image is in fullscreen mode:
    • Pressing ESC closes fullscreen.
    • An "X" button in the top right corner also closes fullscreen.
  2. In the list view:
    • On hover over an image, display a fullscreen or magnifying glass (zoom) icon in the top right corner to signal the fullscreen option.
    • The icon should be intuitive and easy to recognize.
  3. General feedback:
    • When hovering over an image, a blue border appears to indicate it is clickable.
    • The border disappears after closing fullscreen or when not hovering.

Acceptance criteria

  • ESC key and "X" button both close fullscreen mode for images.

  • On hover in list view, a fullscreen or zoom icon appears in the top right of each image.

  • Images show a blue border on hover to indicate they are clickable; the border is removed as soon as the hover ends or fullscreen is closed.