This ticket describes the interaction of opening and closing quick view on Desktop.
Interaction on Desktop
Opening
- When the user clicks on the snippet, open the quick view on the right.
- Show arrow pointing to the quick view, establishing the connection between the result selected and quick view.
-
The position of the quick view should respect the position of the snippet i.e. the quick view could open near the bottom of the page if the snippet is at the bottom of the page. We need to make sure that the arrow is pointing to its quick view. (see T318951) - Position the quick view on the page in a way that the maximum of its content is visible.
- Turn the opacity of the sister project contents down as shown in Figma, when the quick view is open. This is because some quick view may be smaller in size and the overlapping content could be distracting.
Closing
- Users can close the quick view by clicking on the close button on the top right corner of the quick view.
- Users can also close the quick view by clicking on the snippet i.e. the snippet cta serves as a toggle to open and close the quick view
Link to Desktop specs in Figma