Change Details

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 [] 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.) [] The position of the arrow will not shift in relation to the snippet. [] Do not shift the screen if the quick view is above the fold. [] Move the screen up if the quick view is below the fold. [] Inverse the arrow to point up (indicating that quick view can be close by tapping on it). [] When another quick view is opened the previous one stays open (in the same scroll position user left it), unless the user explicitly closes it. Specs in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=3126%3A46227 | Figma ]] {F35605542} Closing [] When the user click on the snippet or the arrow (pointing up) close the preview. [] Each preview that has been previously opened by the user will need to be individually closed. [] The position of the arrow remains fixed in relation to the snippet. [] Show arrow pointing to the quick view, establishing the connection between the result selected an [] 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} [] Add subtle animation to arrow while opening and closing. Arrow animation example on this [[ https://codepen.io/gibatronic/pen/gMVVvR | link ]]

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 [] 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.) [] The position of the arrow will not shift in relation to the snippet. [] Do not shift the screen if the quick view is above the fold. [] Move the screen up if the quick view is below the fold. [] Inverse the arrow to point up (indicating that quick view can be close by tapping on it). [] 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 [] When the user click on the snippet or the arrow (pointing up) close the preview. [] 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. [] The position of the arrow remains fixed in relation to the snippet. [] Show arrow pointing to the quick view, establishing the connection between the result selected an [] 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} [] 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

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 [] 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.) [] The position of the arrow will not shift in relation to the snippet. [] Do not shift the screen if the quick view is above the fold. [] Move the screen up if the quick view is below the fold. [] Inverse the arrow to point up (indicating that quick view can be close by tapping on it). [] WhenIf another quick view is opened the previous one stays open (in the same scroll position user left it),, 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. unless the user explicitly closes itsmoother animation. Specs in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=3126%3A46227 | Figma ]] {F35605542} Closing [] When the user click on the snippet or the arrow (pointing up) close the preview. [] Each preview that has been previously opened by the user will need to be individually closedPreview 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. [] The position of the arrow remains fixed in relation to the snippet. [] Show arrow pointing to the quick view, establishing the connection between the result selected an [] 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} [] 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