Page MenuHomePhabricator

Break the sidebar in the translation dashboard into separate cards and adjust their style
Closed, ResolvedPublic

Description

Currently the translation dashboard has a sidebar on the right side where statistics and help links are shown.
In order to better align it with the design styleguide it was proposed to use separate cards instead. This will reduce the prominence of those elements keeping the focus on the main piece of content (the list of translations).

The expected result is captured in the mockup below:

cx-dashboard-reviewed.png (768×1 px, 165 KB)

Cards should follow the style described in T158410. The styling of the cards will also imply to:

  • Make the headings smaller for each section (16px bold font).
  • Don't use icons in the headings.
  • Don't use separation lines for the list of links in the help card.

Layout, color and typography details below:

cx-dashboard-cards-layout.png (469×1 px, 87 KB)

Event Timeline

Pginer-WMF renamed this task from Break the sidebar in the translation dashboard into separate cards to Break the sidebar in the translation dashboard into separate cards and adjust their style.Mar 20 2017, 3:21 PM
Pginer-WMF updated the task description. (Show Details)
  • Is any click action bound to the statistic ”21 this month“

Yes, it should lead the user to the "published" view, where the user can see the recent translations published that the number captures.

Change 375425 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Break dashboard sidebar into separate cards

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

Change 375425 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Break dashboard sidebar into separate cards

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

One minor comment, @Pginer-WMF how about using Base50 for the older statistics bars instead of Base70? I think it still differentiates well from Accent50 of latest bar.

@Pginer-WMF please take a look at the screenshot from cx-testing (100% scale):

Screen Shot 2017-09-05 at 3.48.05 PM.png (505×1 px, 113 KB)

One minor comment, @Pginer-WMF how about using Base50 for the older statistics bars instead of Base70? I think it still differentiates well from Accent50 of latest bar.

Makes sense. I updated the layout spec in the description. @Petar.petkovic can you adjust the color of the bars as part of the work on this ticket or do you prefer a separate ticket for this change?

@Pginer-WMF please take a look at the screenshot from cx-testing (100% scale):

Screen Shot 2017-09-05 at 3.48.05 PM.png (505×1 px, 113 KB)

The result looks good to me in general. Just a few details:

  • The cards seem to miss the shadow. These should follow the same style defined in T158410 (there is also an example codepen with the shadow values). The main pieces of paper, where the articles are listed, should use the same shadow too.
  • There an issue with the bars width that I reported as a separate ticket in T175141
  • The statistics labels ("this month" and "total") should use regular font width (unlike the numbers), and have a 4px separation from the numbers above.

(by the way, great choice of testing articles)

Makes sense. I updated the layout spec in the description. @Petar.petkovic can you adjust the color of the bars as part of the work on this ticket or do you prefer a separate ticket for this change?

@Pginer-WMF I will do it as part of this ticket, there is no need to create separate ticket.

  • There an issue with the bars width that I reported as a separate ticket in T175141

^^ This one requires separate ticket indeed.

Change 376279 had a related patch set uploaded (by Petar.petkovic; owner: Petar.petkovic):
[mediawiki/extensions/ContentTranslation@master] Fix dashboard card styles

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

Change 376279 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Fix dashboard card styles

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

Re-checked in cx-testing:

  • shadows are in place
  • the font is adjusted

The screenshot below is with 125% zoom.

Screen Shot 2017-09-07 at 3.54.47 PM.png (520×447 px, 34 KB)