Page MenuHomePhabricator

Too large link's area in 'Other project' section on wikipedia.org
Closed, ResolvedPublicDesign

Description

In the "other portals" section, a pseudo-button is used for links. The border of this pseudo-button megre with other icons and other links. It seems to me a little uncomfortable. It also bothers me that the link area is too large relative to the link's text.

Current result

image.png (387×743 px, 33 KB)

Expected

портал.gif (973×1 px, 206 KB)

Event Timeline

Iniquity renamed this task from Too large link area to Too large link's area in 'Other project' section on wikipedia.org.Jun 17 2020, 7:51 PM
Iniquity updated the task description. (Show Details)
Iniquity updated the task description. (Show Details)

Hello @Iniquity
i have decrease width of link border.

image.png (768×1 px, 138 KB)

is this width seems fine.
from my observation we can't decrease width more than this because it will change other link's text alignment. (some text will come below of other text).

Hello @Iniquity
i have decrease width of link border.

image.png (768×1 px, 138 KB)

is this width seems fine.
from my observation we can't decrease width more than this because it will change other link's text alignment. (some text will come below of other text).

I think I would like to see the same paddings from all sides. Otherwise it looks ugly.

image.png (456×1 px, 53 KB)

In the example in the picture, I reduced the width of the button to 90% and added padding = 1em. This is better, but some buttons still have different margins/paddings. It also seems to me that it is necessary to abandon the border altogether and use the background change on hover with grey color from here: https://design.wikimedia.org/style-guide/visual-style_colors.html

Change 671632 had a related patch set uploaded (by Bharatkhatri; owner: Bharatkhatri):
[wikimedia/portals@master] Too large link's area in 'Other project' section on wikipedia.org

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

I have added border and padding according to your instructions...adding border created a small effect in link automatically....
please check is this effect is good for portal or i have to do some changes in it...

I was thinking about something like this:

#eaecf0#eaf3ff#eaf3ff75
портал.gif (973×1 px, 206 KB)
портал3.gif (976×1 px, 255 KB)
портал2.gif (976×1 px, 253 KB)

I have submit the patch again according to your need...please check it out.
I felt #eaecf0 best matches with theme..
"#eaf3ff75" this color was not going with theme and #eaf3ff is very light for a white background.
but i personally felt this hover effect not looking good on articles link. because it showing underline effect too.
But if you feel comfortable with this patch you can merge this : ) .

Change 671632 had a related patch set uploaded (by Bharatkhatri; owner: Bharatkhatri):
[wikimedia/portals@master] Too large link's area in 'Other project' section on wikipedia.org

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

hello @Iniquity can you please review this patch...or give any idea ...so i can proceed further

Change 672527 had a related patch set uploaded (by Bharatkhatri; owner: Bharatkhatri):
[wikimedia/portals@master] Closing of border line and container in not smooth

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

Change 672527 had a related patch set uploaded (by Bharatkhatri; owner: Bharatkhatri):
[wikimedia/portals@master] Closing of border line and container in not smooth

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

Please ignore this commit... i have added wrong bug task by mistakely....

Jdrewniak added a subscriber: Jdrewniak.

Nice, I agree this would be a good change :)

Change 671632 merged by jenkins-bot:
[wikimedia/portals@master] Too large link's area in 'Other project' section on wikipedia.org

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