Page MenuHomePhabricator

Adjust gaps and contrast in Use-Of-Funds in large viewports
Closed, ResolvedPublic1 Estimated Story Points

Description

When the Use of Funds page displays the budget comparison in two columns, the bars are too close to the company names. Also, the vertical alignment of the labels and bars is a little off. Also, the accessibility tools complain about contrast and it should be improved.

20240109_12h29m12s_grim.png (295×609 px, 31 KB)

Implementation Details

  • The styles for the banners and the Fundraising Application need to be changed.

Related Objects

Event Timeline

kai.nissen set the point value for this task to 3.
gabriel-wmde renamed this task from Adjust gaps in Use-Of-Funds in large viewports to Adjust gaps and contrast in Use-Of-Funds in large viewports.Apr 23 2024, 10:23 AM
gabriel-wmde updated the task description. (Show Details)
gabriel-wmde changed the point value for this task from 3 to 5.
AbbanWMDE moved this task from Doing to Review on the WMDE-FUN-Sprint-2024-04-23 board.
AbbanWMDE subscribed.

@Erdinc_Ciftci_WMDE
We would like to change the design of the blue-highlighted "Wikipedia" in the screenshot a bit, because:

  • contrast blue-grey is not ideal
  • the blue text looks like a link (but it isn't)

Do you have ideas/suggestions how to highlight the entry in a decent way within the design concept?

The current solution is deployed at https://testing03.wikimedia.customers.manitu.net/use-of-funds?

gabriel-wmde changed the point value for this task from 5 to 1.May 7 2024, 10:07 AM

The layout fix looks good to me. Regarding the "Wikipedia" highlight, I think it's also fine to just highlight the bar (as it is now).