Page MenuHomePhabricator

Image border missing in Timeless skin
Closed, ResolvedPublic

Description

Images using the code [[File:Flag of Japan.svg|30px|border]] are expected to have a 1px grey border.
But this border is missing in the Timeless skin.

Demo: https://en.wikipedia.org/w/index.php?title=Draft:Sandbox&oldid=817291472&useskin=timeless
Expected: https://en.wikipedia.org/w/index.php?title=Draft:Sandbox&oldid=817291472&useskin=vector

Indeed, it is missing the following rule from mediawiki.skinning/content.css (module mediawiki.skinning.interface):

img.thumbborder {
	border: 1px solid #eaecf0;
}

Event Timeline

Od1n created this task.Dec 27 2017, 12:28 PM
Eugene233 added a subscriber: Eugene233.

@Od1n I will be adding this task on google code-in site :)

@Eugene233: Would you mentor this in Google-Code-in-2017 or why was the tag added? :)

Yes @Od1n I wish to mentor this task

Od1n updated the task description. (Show Details)Dec 27 2017, 3:13 PM
Od1n added a comment.Dec 27 2017, 7:21 PM

I just noticed this border's color is varying across the skins…

I tried to determine the proper color for Timeless, without success.

Isarra added a subscriber: Isarra.Dec 27 2017, 8:31 PM

@Od1n: Use the @grey-bright variable.

Od1n added a comment.EditedDec 28 2017, 8:24 AM

Thanks :) @grey-bright variable is #eee. It's a bit too light in my opinion. The next one, @grey, is #ccc, which in turn is a bit too dark. Something between the two would have been optimal.

This being said, I'd bend for @grey because we need the contrast, and it is the value used for other borders. Also note it is closer to the Minerva skin's value.

@grey-bright is what is used for image borders in thumbs. It should be the same. Whether or not the value is too light in general is a separate issue; you are welcome to file a task about that as well.

SamanthaNguyen moved this task from Backlog to Bugs on the Timeless board.Jan 2 2018, 10:05 PM
Od1n added a comment.Jan 31 2018, 11:47 AM

Any news on this?

Od1n added a comment.EditedApr 2 2018, 9:52 AM

I made the patch, but the Gerrit Patch Uploader currently fails to submit it (and there is no error message).

Gerrit is a PITA to use without this tool, so for now I'll just post the patch below. If someone wants to submit it right now, please do :)

(summary: Add missing border on plain pictures with border option)

--- a/resources/screen-common.less
+++ b/resources/screen-common.less
@@ -425,7 +425,8 @@
 	font-size: 95%;
 	padding: 0.5em 1em;
 }
-.thumbinner .thumbimage {
+.thumbinner .thumbimage,
+.thumbborder {
 	border: solid 1px @grey-bright;
 }
 #mw-content li.gallerybox div.thumb {

Change 447037 had a related patch set uploaded (by Gerrit Patch Uploader; owner: Jean-Yves Le Gallou):
[mediawiki/skins/Timeless@master] Add missing border on plain pictures with border option

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

Change 447037 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Add missing border on plain pictures with border option

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

Isarra closed this task as Resolved.Aug 30 2018, 2:26 AM
Isarra claimed this task.