Page MenuHomePhabricator

Match the style of maplink numbered boxes to the existing ones as used in WV
Closed, ResolvedPublic

Description

This page has a good comparison of the existing numbbered links with what <maplink> generates. We should match that style to simplify the migration

Also, I tried to do another template migration, with even uglier boxes. Feel free to play with the template

Copy of the template's CSS:

<span style="border:1px solid {{User:Yurik/Sandbox/TypeToColor|{{{type|listing}}}}}; background:{{User:Yurik/Sandbox/TypeToColor|{{{type|listing}}}}}; 
font-weight:bold; display:inline-block; width:2em; text-align:center; color:#fff;" title="Map for this '{{{type|listing}}}' marker">

Event Timeline

Restricted Application added subscribers: Zppix, Aklapper. · View Herald Transcript

Change 292055 had a related patch set uploaded (by JGirault):
Match the style of maplink numbered boxes to the existing ones as used in wikivoyage.

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

Here is the suggested design of the maplink box:

/cc @Volker_E : note that I used --bdc-heading #ccc for the border, which in my opinion looks a bit nicer than the darker --bdc-base #222. See screenshot below using #222:

Change 292055 merged by jenkins-bot:
Match the style of maplink numbered boxes to the existing ones as used in wikivoyage.

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

Nope, found a bug - http://vem4.wmflabs.org/wiki/PoiTest -- the colors do not match. Also, I don't think we should make link box that big - lets keep it inline with the existing styles as defined by the community - I wouldn't want to fight two battles at the same time - the styling and migration :) See styling at https://en.wikivoyage.org/wiki/Salzburg#See

@JGirault @MaxSem I'm not exactly sure how to proceed, lets discuss.

  • For WV, we need an ability to simplify the switchover, which means we must match the existing style exactly. Which means that for an autonumbered maplinks, we should generate colored boxes that look identical to existing ones. Note that this usecase is always behind a template, so we can use any kind of complex template-based html generation here.
  • For "geohack" replacement, we need to generate geo coordinates as a simple clickable text (we already do that) - as seen at the top right here.
  • For other usecases, we can introduce any kind of format we think are good.

For VW, the marker template figures out the color itself, so it can generate something like this:

<maplink ... style="background: #0f0f0f">{ ... "marker-color": "#0f0f0f" ...} </>

Which would generate

<a class="mw-kartographer mw-kartographer-link" style="background: #0f0f0f;" ... >...</a>

Without the style parameter, <maplink> would generate the same html but without the "style" parameter. We could also allow class attribute. Thoughts?

Another discussion with @MaxSem:

<maplink ... class="maplink-restaurant">{ ... "marker-color": "#0f0f0f" ...} </>

Which would generate

<a class="mw-kartographer mw-kartographer-link maplink-restaurant">...</a>

Lets remove the automatic style generation and put it behind a feature flag (disabled for now)

Change 292603 had a related patch set uploaded (by MaxSem):
Add class parameter to <maplink>

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

Change 292603 merged by jenkins-bot:
Add class parameter to <maplink>

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

Change 293252 had a related patch set uploaded (by Yurik):
Fixed <maplink> styling

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

Change 293360 had a related patch set uploaded (by Yurik):
Fixed <maplink> autostyling

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

Change 293252 merged by jenkins-bot:
Fixed <maplink> autostyling

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

Change 293360 merged by jenkins-bot:
Fixed <maplink> autostyling

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