This ticket describes the interaction of opening and closing quick view on Mobile.
More information on the overview of quick view in the epic ticket T306341
Opening
[x] When the user clicks on the snippet or the arrow (pointing down), open the quick view below it. (This ticket can show a box in the specified space as details of quick view will be covered in other tickets.)
[x] The position of the arrow will not shift in relation to the snippet.
[x] Do not shift the screen if the quick view is above the fold.
[x] Move the screen up if the quick view is below the fold.
[x] Inverse the arrow to point up (indicating that quick view can be close by tapping on it).
[x] If another quick view is open, the previous one will close and the new one will open. Make the opening/closing smoother by having the content slide up or down i.e. smoother animation.
Specs in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=3126%3A46227 | Figma ]]
{F35605542}
Closing
[x] When the user click on the snippet or the arrow (pointing up) close the preview.
[x] Preview will also be automatically closed if another preview is opened. Make the opening/closing smoother by having the content slide up or down i.e. smoother animation.
[x] The position of the arrow remains fixed in relation to the snippet.
[x] Show arrow pointing to the quick view, establishing the connection between the result selected an
[x] Inverse the arrow to point down (indicating that quick view can be opened by tapping on it).
Specs in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=3125%3A49390 | Figma ]]
{F35605545}
[x] Add subtle animation to arrow while opening and closing. Arrow animation example on this [[ https://codepen.io/gibatronic/pen/gMVVvR | link ]]
Note: A new ticket has been created to allow users to open multiple previews at once to avoid jumping of the content. To be re-evaluated in milestone 4. T321590