Change Details

====Background Readers can tap on images presented as part of a Preview to see them in media viewer. We would like to make certain improvements to existing state of it. We plan to update the existing icons, improve the image alignements and add a counter to inform readers how many images are there. ====Design **General Information** - Given Wikipedia Preview popup now supports light and dark mode therefore we would like the media viewer to also support both dark and light modes. **Desktop (Viewports 1120px and above)** - **Image Counter ** - Positioning: Top-center of the device. - Padding: 16px from the top end of the device and 24px from the top edge of the image container. - Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates. - **Close Icon ** - Positioning: Top-right corner of the device, horizontally aligned with the image counter. - Padding: 16px right-side margin and 16px top margin. - Touch/Click Target: 48x48 pixels. - Design: Replace it with the updated one. - **Image Container ** - General principal: Ensure all images fit completely within the image container using a “fit” treatment to avoid cropping. In CSS, I believe this can be achieved using “contain” property. The image container should dynamically adjust its size based on the aspect ratio of the image. However, it should not exceed a defined maximum size to maintain a consistent layout. - Width consideration: Maintain 24px padding between the image container and the navigation arrows. - Height consideration: Maintain 24px padding from the top edge for the image counter and close icon. - **Image Description ** - Positioning: Adjacent to the bottom edge of the image container with 8px of padding to the bottom edge of the image container. - Overflow handling: No scroll handle. Ensure the text fits within the allocated space. If the text exceeds the maximum height, implement a scrolling mechanism within the description area. - Dynamic height: Minimum height to accommodate a single line of text, maximum height to fit up to 3-5 lines of text. - Text alignment: Center. - **Left/ Right Navigation ** - Visibility: Present only when applicable. - Left arrow: Hidden when viewing the first image. - Right arrow: Hidden when viewing the last image. - Single image: Both arrows hidden if there is only one image. - Positioning: 24px away from the edge of the viewport and 24px away from the edge of the image container. - Touch/Click Target: 48x48 pixels. **Smaller viewports (Below 1120px)** - **Image Counter ** - Positioning: Top-center of the device. - Padding: 16px from the top end of the device and 24px from the top edge of the image container. - Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates. - **Close Icon ** - Positioning: Top-right corner of the device, horizontally aligned with the image counter. - Padding: 16px right-side margin and 16px top margin. - Touch/Click Target: 48x48 pixels. - Design: Replace it with the updated one. - **Image Container ** - General principal: Ensure all images fit completely within the image container using a “fit” treatment to avoid cropping. In CSS, I believe this can be achieved using “contain” property. - Width consideration: Allow images to touch the left and right edges of the viewport. - Height consideration: Maintain 24px padding from the top edge for the image counter and close icon. - **Image Description ** - Positioning: Adjacent to the bottom edge of the image container with 8px of padding to the bottom edge of the image container. - Overflow handling: No scroll handle. Ensure the text fits within the allocated space. If the text exceeds the maximum height, implement a scrolling mechanism within the description area. - Dynamic height: Minimum height to accommodate a single line of text, maximum height to fit up to 3-5 lines of text. - Text alignment: Center. - **Left/ Right Navigation ** - Visibility: We don't show navigation arrows for devices below the viewport of 1120px. [[ https://www.figma.com/design/TIGMY3UFnz6LzAQpXnpmUk/Wikipedia-Preview-Design-File?node-id=1%3A4&t=syy2P0XcmYgRV9mU-1 | Design File ]]

====Background Readers can tap on images presented as part of a Preview to see them in media viewer. We would like to make certain improvements to existing state of it. We plan to update the existing icons, improve the image alignements and add a counter to inform readers how many images are there. ====Design **General Information** - Given Wikipedia Preview popup now supports light and dark mode therefore we would like the media viewer to also support both dark and light modes. **Desktop (Viewports 1120px and above)** - **Image Counter ** - Positioning: Top-center of the device. - Padding: 16px from the top end of the device and 24px from the top edge of the image container. - Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates. - **Close Icon ** - Positioning: Top-right corner of the device, horizontally aligned with the image counter. - Padding: 24px right-side margin and 16px top margin. - Touch/Click Target: 48x48 pixels. - Design: Replace it with the updated one. - **Image Container ** - General principal: Ensure all images fit completely within the image container using a “fit” treatment to avoid cropping. In CSS, I believe this can be achieved using “contain” property. The image container should dynamically adjust its size based on the aspect ratio of the image. However, it should not exceed a defined maximum size to maintain a consistent layout. - Width consideration: Maintain 24px padding between the image container and the navigation arrows. - Height consideration: Maintain 24px padding from the top edge for the image counter and close icon. - **Image Description ** - Positioning: Adjacent to the bottom edge of the image container with 8px of padding to the bottom edge of the image container. - Overflow handling: No scroll handle. Ensure the text fits within the allocated space. If the text exceeds the maximum height, implement a scrolling mechanism within the description area. - Dynamic height: Minimum height to accommodate a single line of text, maximum height to fit up to 3-5 lines of text. - Text alignment: Center. - **Left/ Right Navigation ** - Visibility: Present only when applicable. - Left arrow: Hidden when viewing the first image. - Right arrow: Hidden when viewing the last image. - Single image: Both arrows hidden if there is only one image. - Positioning: 24px away from the edge of the viewport and 24px away from the edge of the image container. - Touch/Click Target: 48x48 pixels. **Smaller viewports (Below 1120px)** - **Image Counter ** - Positioning: Top-center of the device. - Padding: 16px from the top end of the device and 24px from the top edge of the image container. - Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates. - **Close Icon ** - Positioning: Top-right corner of the device, horizontally aligned with the image counter. - Padding: 24px right-side margin and 16px top margin. - Touch/Click Target: 48x48 pixels. - Design: Replace it with the updated one. - **Image Container ** - General principal: Ensure all images fit completely within the image container using a “fit” treatment to avoid cropping. In CSS, I believe this can be achieved using “contain” property. - Width consideration: Allow images to touch the left and right edges of the viewport. - Height consideration: Maintain 24px padding from the top edge for the image counter and close icon. - **Image Description ** - Positioning: Adjacent to the bottom edge of the image container with 8px of padding to the bottom edge of the image container. - Overflow handling: No scroll handle. Ensure the text fits within the allocated space. If the text exceeds the maximum height, implement a scrolling mechanism within the description area. - Dynamic height: Minimum height to accommodate a single line of text, maximum height to fit up to 3-5 lines of text. - Text alignment: Center. - **Left/ Right Navigation ** - Visibility: We don't show navigation arrows for devices below the viewport of 1120px. [[ https://www.figma.com/design/TIGMY3UFnz6LzAQpXnpmUk/Wikipedia-Preview-Design-File?node-id=1%3A4&t=syy2P0XcmYgRV9mU-1 | Design File ]]

====Background Readers can tap on images presented as part of a Preview to see them in media viewer. We would like to make certain improvements to existing state of it. We plan to update the existing icons, improve the image alignements and add a counter to inform readers how many images are there. ====Design **General Information** - Given Wikipedia Preview popup now supports light and dark mode therefore we would like the media viewer to also support both dark and light modes. **Desktop (Viewports 1120px and above)** - **Image Counter ** - Positioning: Top-center of the device. - Padding: 16px from the top end of the device and 24px from the top edge of the image container. - Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates. - **Close Icon ** - Positioning: Top-right corner of the device, horizontally aligned with the image counter. - Padding: 16px24px right-side margin and 16px top margin. - Touch/Click Target: 48x48 pixels. - Design: Replace it with the updated one. - **Image Container ** - General principal: Ensure all images fit completely within the image container using a “fit” treatment to avoid cropping. In CSS, I believe this can be achieved using “contain” property. The image container should dynamically adjust its size based on the aspect ratio of the image. However, it should not exceed a defined maximum size to maintain a consistent layout. - Width consideration: Maintain 24px padding between the image container and the navigation arrows. - Height consideration: Maintain 24px padding from the top edge for the image counter and close icon. - **Image Description ** - Positioning: Adjacent to the bottom edge of the image container with 8px of padding to the bottom edge of the image container. - Overflow handling: No scroll handle. Ensure the text fits within the allocated space. If the text exceeds the maximum height, implement a scrolling mechanism within the description area. - Dynamic height: Minimum height to accommodate a single line of text, maximum height to fit up to 3-5 lines of text. - Text alignment: Center. - **Left/ Right Navigation ** - Visibility: Present only when applicable. - Left arrow: Hidden when viewing the first image. - Right arrow: Hidden when viewing the last image. - Single image: Both arrows hidden if there is only one image. - Positioning: 24px away from the edge of the viewport and 24px away from the edge of the image container. - Touch/Click Target: 48x48 pixels. **Smaller viewports (Below 1120px)** - **Image Counter ** - Positioning: Top-center of the device. - Padding: 16px from the top end of the device and 24px from the top edge of the image container. - Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates. - **Close Icon ** - Positioning: Top-right corner of the device, horizontally aligned with the image counter. - Padding: 16px24px right-side margin and 16px top margin. - Touch/Click Target: 48x48 pixels. - Design: Replace it with the updated one. - **Image Container ** - General principal: Ensure all images fit completely within the image container using a “fit” treatment to avoid cropping. In CSS, I believe this can be achieved using “contain” property. - Width consideration: Allow images to touch the left and right edges of the viewport. - Height consideration: Maintain 24px padding from the top edge for the image counter and close icon. - **Image Description ** - Positioning: Adjacent to the bottom edge of the image container with 8px of padding to the bottom edge of the image container. - Overflow handling: No scroll handle. Ensure the text fits within the allocated space. If the text exceeds the maximum height, implement a scrolling mechanism within the description area. - Dynamic height: Minimum height to accommodate a single line of text, maximum height to fit up to 3-5 lines of text. - Text alignment: Center. - **Left/ Right Navigation ** - Visibility: We don't show navigation arrows for devices below the viewport of 1120px. [[ https://www.figma.com/design/TIGMY3UFnz6LzAQpXnpmUk/Wikipedia-Preview-Design-File?node-id=1%3A4&t=syy2P0XcmYgRV9mU-1 | Design File ]]