Background
We are primarily concerned with mobile user behavior for our Image Browsing prototype. However, we think it makes sense to build a responsive UI from the get-go here (in part because MediaWiki makes it hard to truly segregate "mobile" and "desktop" users – skin selection and mobile domain usage don't necessarily guarantee anything about device or viewport in our ecosystem).
Note: @JScherer-WMF will populate this ticket with some screenshots to illustrate the intended behavior alongside the descriptions here.
Small screen behavior
We should think of our UI in "mobile first" terms. So small screen behavior is the default, and additional behavior will be introduced at larger viewport sizes.
On small screens / by default, users will see the following:
- The DetailView component will fill the entire viewport when active. The user will see a full-bleed image that is centered on whatever we believe to be the most relevant part of the image (per T402203). Images will fill the entire height of this area.
- The Visual Table of Contents component will be immediately below the DetailView component, visible on scroll. Within the Visual Table of Contents, every VTOC Item component will be stacked in a single column. Images within the VTOC items will have a height of 300px
or less. Images inside VTOC items should be shown in their entirety (don't crop them), and they should be centered.
Large(r) screen behavior
- When viewport width exceeds 640px, the Visual Table of Contents will switch to a 2-column layout. One thing to note about this layout – there will be two columns or "tracks", and VTOC items will be placed in alternating tracks in the order they occur within the page, but they will not have fixed heights within these tracks. Height will instead be determined by the amount of text content. Image height restrictions will not change from the mobile styles above. We will probably need to use CSS Grid to create this "masonry" style layout, and may need a dedicated task for that work.
- When viewport width exceeds 1000px (the same as the max content container size on Minerva), both the DetailView and Visual Table of Contents components will stop expanding; instead a backdrop element will be visible in any additional space to the left and right edges.
- Images within the DetailView will still crop based on subject detection, but the exact dimensions be: 1000px wide x 100vh tall (there is no margin at the top or bottom). Images will fill the entire height of this area and will be cropped arbitrarily.
Implementation considerations
- None of this behavior is skin-dependent (unless we want to use a different max-width on Vector vs Minerva to match the skin-specific container widths?)
- Would user font-size preference or Codex font mode impact any of these values? not clear
- We are not hiding the UI from desktop browsers
QA process
- This patchdemo instance can be used: https://patchdemo.wmcloud.org/wikis/7b60cdc924/wiki/Berlin
- Visit a few well-illustrated articles on that wiki (I've been going to pages for major cities, which typically have lots of different types of photos included).
- View the feature desktop and mobile viewport sizes (or real devices)
- Try different skins, text sizes, etc (may need to log in for that)
- Make note of any weird design or layout issues here in the comments
(You can disregard the lack of loading states for now, that will be handled in T402973).
Requirement
Build responsive UI behavior for Image Browsing that adapts to different viewport sizes while maintaining a mobile-first approach. On small screens, the DetailView must fill the viewport and the Visual Table of Contents (VTOC) must render in a single column with uncropped images ≤300px tall. On viewports wider than 640px, the VTOC must render in a 2-column alternating "masonry" layout. On viewports wider than 1000px, the DetailView and VTOC must max out at 1000px width with backdrop padding on the sides. Cropping behavior, image height rules, and alignment must remain consistent with these specifications.
BDD
Feature: Responsive layout for Image Browsing components
Scenario: Small screen layout
Given the viewport width is ≤640px
When an article with images is loaded
Then the DetailView fills the viewport height with a full-bleed image cropped based on subject detection
And the VTOC appears below the DetailView in a single column
And VTOC images are centered, fully visible, and ≤300px in height
Scenario: Medium screen layout
Given the viewport width is >640px and ≤1000px
When an article with images is loaded
Then the VTOC renders in a 2-column alternating masonry layout
And VTOC image height remains ≤300px
Scenario: Large screen layout
Given the viewport width is >1000px
When an article with images is loaded
Then the DetailView and VTOC stop expanding beyond 1000px width
And a backdrop element fills extra space on left and right
And the DetailView image is 1000px wide x 100vh tall, filling the area with cropping as neededTest Steps
Test Case 1: Verify small screen layout (≤640px)
- Open https://patchdemo.wmcloud.org/wikis/7b60cdc924/wiki/Berlin
- Resize viewport to ≤640px width
- AC1: DetailView image fills viewport height with subject-detection cropping
- AC2: VTOC is rendered directly below DetailView in a single column
- AC3: VTOC images are fully visible, centered, and have height ≤300px
Test Case 2: Verify medium screen layout (>640px ≤1000px)
- Resize viewport width to between 641px and 1000px
- AC4: VTOC renders in a 2-column alternating masonry layout
- AC5: VTOC images remain centered, fully visible, and height ≤300px
Test Case 3: Verify large screen layout (>1000px)
- Resize viewport width to >1000px
- AC6: DetailView and VTOC max out at 1000px width
- AC7: Backdrop element fills extra space on both sides
- AC8: DetailView image is constrained to 1000px width x 100vh height and cropped arbitrarily as needed
https://phabricator.wikimedia.org/T402964#11181553
QA Results - Patchdemo
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T402964#11181553 |
| 2 | ✅ | T402964#11181553 |
| 3 | ✅ | T402964#11181553 |
| 4 | ✅ | T402964#11181553 |
| 5 | ✅ | T402964#11181553 |
| 6 | ❓ | T402964#11181553 |
| 7 | ✅ | T402964#11181553 |
| 8 | ❓ | T402964#11181553 |
