Change Details

This story is one part of all the contents that go in the quick view mentioned in [[ https://phabricator.wikimedia.org/T306898 | T306898 ]] **Image specifications in quick view** [] The header image in the quick view should be the same image used in the thumbnail/Go bar (see T306883). This image should match the one shown as thumbnail in the results so that the quick view could be connected to the result shown. [] The width and height of the image should be variable depending on the image size. However there should be a max height (as specified in [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | figma ]]) and the image should not be displayed larger than that. [] The image should maintain its ratio and the empty spaces (left and right) will be marked by a gray (F8F9A) background. [] There should never be an empty space (above or below) the image as the image area will shrink if it is smaller than the max height of designated area. [] When the image is not present do not show anything. The contents below the image area should take its place. Check [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | Figma ]] for the specs.

This story is one part of all the contents that go in the quick view mentioned in [[ https://phabricator.wikimedia.org/T306898 | T306898 ]] **Image specifications in quick view** [] The header image in the quick view should be the same image used in the thumbnail/Go bar (see T306883). This image should match the one shown as thumbnail in the results so that the quick view could be connected to the result shown. [] The width of an image box should be the width of the quick view component. [] The height of the image box should be fixed for [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | landscape ]] image. [] The height of the image box should be variable for portrait image. [] The height should not go beyond a maximum height as specified in figma for [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=2314%3A42099 | Portrait ]] image. [] If the width of the quick view component shrinks on small screens then the height will adjust to retain its proportion. [] The image should fill the image box and align to the top of the image similar to the rules prescribed for thumbnails. See option 4 [[ https://phabricator.wikimedia.org/T307034 | here ]] as an example. [] When the image is not present do not show anything. The contents below the image area should take its place. Check [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | Figma ]] for the specs. Lanscape image (when the image width is larger than its height) {F35421763} Portrait image (when the image height is larger than its width) {F35421765}

This story is one part of all the contents that go in the quick view mentioned in [[ https://phabricator.wikimedia.org/T306898 | T306898 ]] **Image specifications in quick view** [] The header image in the quick view should be the same image used in the thumbnail/Go bar (see T306883). This image should match the one shown as thumbnail in the results so that the quick view could be connected to the result shown. [] The width and height of the image should be variable depending on the image size. However there should be a max height (as specified in[] The width of an image box should be the width of the quick view component. [] The height of the image box should be fixed for [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | figma ]]) andlandscape ]] image. [] The height of the image box should not be displayed larger than thatvariable for portrait image. [] The image should maintain its ratio and the empty spaces (left and right) will be marked by a gray (F8F9A) backgroundheight should not go beyond a maximum height as specified in figma for [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=2314%3A42099 | Portrait ]] image. [] There should never be an empty space (above or below) the image as the image area will shrink if it is smaller than the max height of designated area. If the width of the quick view component shrinks on small screens then the height will adjust to retain its proportion. [] The image should fill the image box and align to the top of the image similar to the rules prescribed for thumbnails. See option 4 [[ https://phabricator.wikimedia.org/T307034 | here ]] as an example. [] When the image is not present do not show anything. The contents below the image area should take its place. Check [[ https://www.figma.com/file/86M7oLZplSxXKwKJR59mIK/Special%3ASearch-on-Wikipedia?node-id=1536%3A16289 | Figma ]] for the specs. Lanscape image (when the image width is larger than its height) {F35421763} Portrait image (when the image height is larger than its width) {F35421765}