(Go: >> BACK << -|- >> HOME <<)
Page MenuHomePhabricator
Create Task
Maniphest T327926

Sync Kartographer popup image behavior
Closed, ResolvedPublic
Actions

Description

Currently the width of the pageimage in nearby popups can vary a lot. It mainly depends on the width of the popup, that's influenced by the length of the title and/or description. Since these two can vary a lot the current range of image widths is somewhere between under 50 and 277px. The latter given due to the max popup width minus the margins.

Screenshot from 2023-01-25 15-09-42.png (1×1 px, 1 MB)

In that context we decided on two things as MVP to at least improve the situation without too much guesswork.

Acceptance criteria:

  • Sync the layout of Nearby popups with the marker popups from user input
  • Depending on the max width popup images can reach, reduce the size we load them e.g. with the 250 width preset
  • TO CHECK: Increase min width for popups

Demo for fix:
https://en.wikipedia.beta.wmflabs.org/wiki/Maptests/Inline_marker#/map/0

  • Load nearby markers and compare the Opéra de Monte-Carlo popups

Details

SubjectRepoBranchLines +/-
[POC] Nearby: Soft transition for async thumbnail loadingmediawiki/extensions/Kartographermaster+29 -14
Fix placement of double-bordered "thumb" images in popupsmediawiki/extensions/Kartographermaster+24 -7
Nearby: Fix bogus popup size calculationmediawiki/extensions/Kartographermaster+7 -2
Nearby: Reduce thumbnail size further down to 220pxmediawiki/extensions/Kartographermaster+1 -1
Nearby: Reduce thumbnail size loaded to 250mediawiki/extensions/Kartographermaster+1 -1
Nearby: Minor tweaks/updates to popup CSS codemediawiki/extensions/Kartographermaster+9 -4
Customize query in gerrit

Event Timeline

WMDE-Fisch created this task.Jan 25 2023, 3:41 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 25 2023, 3:41 PM
WMDE-Fisch moved this task from Backlog to Ready for pickup on the WMDE-GeoInfo-FocusArea board.Jan 25 2023, 3:42 PM
gerritbot added a comment.Jan 25 2023, 4:08 PM

Change 883097 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Minor tweaks/updates to popup CSS code

https://gerrit.wikimedia.org/r/883097

gerritbot added a project: Patch-For-Review.Jan 25 2023, 4:08 PM

Change 882666 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] [POC] Nearby: Soft transition for async thumbnail loading

https://gerrit.wikimedia.org/r/882666

lilients_WMDE updated the task description. (Show Details)Feb 2 2023, 11:12 AM
gerritbot added a comment.Feb 2 2023, 2:13 PM

Change 883097 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Nearby: Minor tweaks/updates to popup CSS code

https://gerrit.wikimedia.org/r/883097

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.22; 2023-02-06).Feb 2 2023, 3:00 PM
WMDE-Fisch claimed this task.Feb 3 2023, 9:39 AM
WMDE-Fisch added a project: WMDE-TechWish-Sprint-2023-01-18.
WMDE-Fisch moved this task from Sprint Backlog to Doing on the WMDE-TechWish-Sprint-2023-01-18 board.
WMDE-Fisch added a comment.Feb 3 2023, 11:57 AM

General insights:

  • Nearby marker popups and popups from user input share the same CSS.
  • If the users manually adds an image to the popup content {1] it behaves exactly the same. So by default it tries to fit the title width until a certain maximum.
  • When manually adding images users can give a fixed image width [2] this way the width can exceed the size given by the title width, but never the maximum width of 277px

[1]

"description": "[[File:Casino_de_Montecarlo,_Mónaco,_2016-06-23,_DD_04.jpg]",

[2]

"description": "[[File:Casino_de_Montecarlo,_Mónaco,_2016-06-23,_DD_04.jpg|title|400px]",
gerritbot added a comment.Feb 3 2023, 12:13 PM

Change 886347 had a related patch set uploaded (by WMDE-Fisch; author: WMDE-Fisch):

[mediawiki/extensions/Kartographer@master] Nearby: Reduce thumbnail size loaded to 250

https://gerrit.wikimedia.org/r/886347

WMDE-Fisch added a comment.Feb 3 2023, 12:16 PM

From my perspective increasing the max width of the popups is not really helpful. They already feel quite large IMO.

WMDE-Fisch removed WMDE-Fisch as the assignee of this task.Feb 3 2023, 12:16 PM
WMDE-Fisch updated the task description. (Show Details)
WMDE-Fisch moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2023-01-18 board.
WMDE-Fisch moved this task from Ready for pickup to In sprint on the WMDE-GeoInfo-FocusArea board.Feb 3 2023, 3:40 PM
gerritbot added a comment.Feb 3 2023, 4:00 PM

Change 886347 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Nearby: Reduce thumbnail size loaded to 250

https://gerrit.wikimedia.org/r/886347

WMDE-Fisch moved this task from Tech Review to Demo on the WMDE-TechWish-Sprint-2023-01-18 board.Feb 8 2023, 9:50 AM
WMDE-Fisch updated the task description. (Show Details)Feb 13 2023, 8:35 AM
gerritbot added a comment.Feb 13 2023, 1:44 PM

Change 888698 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Fix bogus popup size calculation

https://gerrit.wikimedia.org/r/888698

WMDE-Fisch added a comment.Feb 13 2023, 2:08 PM
In T327926#8609975, @gerritbot wrote:

Change 888698 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Fix bogus popup size calculation

https://gerrit.wikimedia.org/r/888698

With the width:auto there's something like this happening on custom markers with an image:

220px.png (399×424 px, 192 KB)

thiemowmde closed this task as Resolved.Feb 15 2023, 12:21 PM
gerritbot added a comment.Feb 15 2023, 6:02 PM

Change 889587 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Nearby: Reduce thumbnail size further down to 220px

https://gerrit.wikimedia.org/r/889587

gerritbot added a comment.Feb 15 2023, 6:29 PM

Change 889587 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/Kartographer@master] Nearby: Reduce thumbnail size further down to 220px

Reason:

https://gerrit.wikimedia.org/r/889587

gerritbot added a comment.Feb 16 2023, 7:02 AM

Change 888698 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Nearby: Fix bogus popup size calculation

https://gerrit.wikimedia.org/r/888698

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.24; 2023-02-20); removed MW-1.40-notes (1.40.0-wmf.22; 2023-02-06).Feb 16 2023, 8:01 AM
gerritbot added a comment.Feb 17 2023, 10:30 AM

Change 889953 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/Kartographer@master] Fix placement of double-bordered "thumb" images in popups

https://gerrit.wikimedia.org/r/889953

gerritbot added a comment.Mar 13 2023, 12:29 PM

Change 889953 merged by jenkins-bot:

[mediawiki/extensions/Kartographer@master] Fix placement of double-bordered "thumb" images in popups

https://gerrit.wikimedia.org/r/889953

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.27; 2023-03-13); removed MW-1.40-notes (1.40.0-wmf.24; 2023-02-20).Mar 13 2023, 1:01 PM
gerritbot added a comment.Jun 2 2023, 8:51 AM

Change 882666 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/Kartographer@master] [POC] Nearby: Soft transition for async thumbnail loading

Reason:

The resulting animation is super disturbing.

https://gerrit.wikimedia.org/r/882666

Maintenance_bot removed a project: Patch-For-Review.Jun 2 2023, 9:11 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL