| ovasileva | |
| Jun 9 2021, 11:57 AM |
| F34635925: Screen Shot 2021-09-07 at 1.47.11 PM.png | |
| Sep 7 2021, 5:48 PM |
| F34635920: Screen Shot 2021-09-07 at 10.42.07 AM.png | |
| Sep 7 2021, 5:44 PM |
| F34631615: Screen Shot 2021-09-03 at 7.27.57 PM.png | |
| Sep 4 2021, 2:40 AM |
| F34631616: Screen Shot 2021-09-03 at 7.26.20 PM.png | |
| Sep 4 2021, 2:40 AM |
| F34631614: Horizontal_page_preview_dimensions.png | |
| Sep 4 2021, 2:40 AM |
| F34631591: Screen Shot 2021-09-03 at 7.04.00 AM.png | |
| Sep 4 2021, 2:23 AM |
| F34631585: Screen Shot 2021-09-03 at 7.05.19 AM.png | |
| Sep 4 2021, 2:23 AM |
| F34631581: Screen Shot 2021-09-03 at 7.06.48 AM.png | |
| Sep 4 2021, 2:23 AM |
Observed
Expected
All previews should fit within the same container, images should be the same size
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T284643#7332683 |
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T284643#7332698 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | • alexhollender_WMF | T284095 [GOAL] Fix page previews visual bugs and remove unnecessary code before end of quarter | |||
| Resolved | ovasileva | T284643 Regression: Page previews displaying images with different heights |
@ovasileva: Could you provide an example that this has regressed from?
AFAICT the image is being displayed correctly. The container, as you put it, has been shifted up to accommodate displaying the image in the pokey. In the case where the same preview is shown above the link the image is not shifted:
| Preview location | |
|---|---|
| Below |  |
| Above |  |
What I've been able to find so far (still looking for the original spec):
we tested different sizes of previews: https://www.mediawiki.org/wiki/Wikimedia_Research/Design_Research/Reading_Team_UX_Research/Hovercards_Usability to determine best size, which assumes that there was a container - I'll keep looking to find how big it's supposed to be though
It looks like images for portrait popups currently range from 320 x 200 to 320 x 320. The example in the description is one of these square 320 x 320 images.
Are we sure the expected behavior is for all portrait popups to have the same image dimensions (i.e. 320 x 200)? Without taking a deeper look at the code history, I thought that there has always been some range in the image dimensions for both portrait and landscape images.
I am tracking down the design spec. In the meantime I think we should hold off on making any changes.
I think we need to understand this one before doing the above task ^ (T255549#7266861)
@Jdlrobson @ovasileva apologies for the delay here. I've documented the design specifications here: https://www.mediawiki.org/wiki/Page_Previews/Design_specifications
I believe the relevant part for this task is: for vertical page previews the image should always be 320x192px.
So I think the takeaway here, is that for https://doc.wikimedia.org/Popups/master/js/ui/?path=/story/thumbnails--portrait-small-square the image should always appear on the right and that we need to set a max height on these images.
I am in the processing of building out a storybook code-ifying this but due to back issues this will need to wait until Monday.
Change 714103 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/extensions/Popups@master] Design spec dimensions should be documented in storybook
Change 714104 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/extensions/Popups@master] Adjust previews to meet specifications
Change 714103 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Design spec dimensions should be documented in storybook
Change 714104 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Adjust previews to meet specifications
@alexhollender can you review the different stories on https://doc.wikimedia.org/Popups/master/js/ui/ to check they all look as expected.
I'm working on the settings cog/extract separately.
@Edtadros the design spec has changed a few times so the images above (and in other tasks) could cause confusion. Official spec: https://www.mediawiki.org/wiki/Page_Previews/Design_specifications
Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA
Test Artifact(s):
Validate image sizes per T284643#7322406
✅ AC1: Portrait
✅ AC2: Landscape
Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA
Test Artifact(s):
Validate image sizes per T284643#7322406
Steps to reproduce
Go to https://en.wikipedia.org/wiki/Norfolk
✅ Hover over Saxons
@alexhollender I'm assuming the height of 250 is due to 8px for the pointer. That said, it would seem to pass based on the numbers, but the image looks worse. I also cannot get it to appear in portrait to better compare it. Thoughts?
UPDATE: This is a pass per T284643#7337211
here is a side-by-side with the image in the task description...I suspect the difference is because the image is smaller in the landscape version. seems okay to me.
