Page MenuHomePhabricator

Restyle "more languages" & "all languages" sections
Closed, ResolvedPublic

Description

User testing concluded that the separation of language sections was not easily understood - these changes are a reaction to this.

AC

  • Background color for "In more languages" is Base90
  • Background color for "All entered languages" is Base80
  • Content of "main language", "in more languages" and "all entered lanaguages" have a padding on the left with value of 0.5em on all breakpoints (including the headings with the arrows). (Note this AC is not reflected in the mock-ups at the moment of writing it).
  • language labels is Base10
  • Alias Color is Base20
  • position of the expand/collapse arrows are on the left site, left aligned (likewise to the headline)
  • the text describing the sections is left aligned with 1 em distance to the arrow, this is valid for all breakpoints
  • the text color for the section headlines is base20
  • all section have only single arrows
  • the arrow color is base20
  • white background for input fields
  • fix vertical spacing according to Figma mockups

MOCK UP
Firgma File on green background:
https://www.figma.com/file/g86G4bYOcUoIPwEbN041nq/180607_Termbox-Mobile-Sprint?node-id=1741%3A2211

ASSETS

Details

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 16 2019, 1:47 PM

It probably does not make T205608: Floating button to collapse „All entered languages“ go away. The design may change, but the sticky element at the bottom of the screen should remain.

alaa_wmde triaged this task as High priority.Sep 25 2019, 9:02 AM
alaa_wmde moved this task from Ready to estimate to Ready to pick up on the Wikidata-Campsite board.

Change 539493 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Restyle 'In more languages' and 'All entered languages' sections

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

@Hanna_Petruschat_WMDE

Regarding the AC:

  • the background colors have a negative padding of 16px to the left
  • this negative padding seem to be needed, esp. with that specific value, for a certain skin. Where it might not be needed, or value should be different for other skins.
  • the background is not being expanded on wider view (supposedly because the space from the edge is bigger and we did not want to expand it too much till the edge, like done for the mobile version)

Until we figure out whether/how we want to achieve this, esp. in a way that is skin-agnostic, would you be okay if we leave this requirement out of this story to deliver the rest without waiting on this one?

pinging @raja_wmde for the above questions

alaa_wmde added a comment.EditedOct 2 2019, 12:21 PM

Discussed @raja_wmde and we agreed for now to apply the padding in the other way around.

new AC would be:

  • Content of main language, in more languages and all entered languages have padding on the left with value of 0.5em on all breakpoints.

And we drop the old AC of expanding the backgrond on the left with negative margin.

Following screenshot might give a visual aid:

@Hanna_Petruschat_WMDE with this change, we hope to move forward with the improvements without much aesthetically undesirable effects. We can revisit the background/padding bit once you are back.

alaa_wmde added a subscriber: Jakob_WMDE.

@Jakob_WMDE (as you have reviewed this before)

We changed the AC regarding the background as mentioned in comment above (updated in task description as well). We will cover any further necessary changes to that, as well as the vertical spacing between these sections in a follow up. We can move on with this in the current state from UX-side.

I have uploaded a new patch for the new AC now

alaa_wmde updated the task description. (Show Details)Oct 2 2019, 1:09 PM

Change 539493 merged by jenkins-bot:
[wikibase/termbox@master] Restyle 'In more languages' and 'All entered languages' sections

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

Hi @alaa_wmde! Thaks for bringing this forward. I have a small remark. In the screenshot, the whole width of the categories have a background color, including the so called interaction column. In the mock up above you can see that the right side has a white strip. This will be important when the edit button will become a sticky button. It kinda gives the termbox editability a frame. To better understand the structure of the page, I put in a mock here.

@Hanna_Petruschat_WMDE right I didn't notice that thanks. I will check how easy it is to do that and let you know

@Hanna_Petruschat_WMDE so it will be easier than I thought and will do it quickly so that we release it with this change

Change 541235 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Expand actions vertically along whole termbox

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

Change 541238 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[mediawiki/extensions/Wikibase@master] Pull restyling and "fewer languages" in termbox into Wikibase

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

Change 541235 merged by jenkins-bot:
[wikibase/termbox@master] Expand actions vertically along whole termbox

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

Change 541238 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Pull restyling and "fewer languages" in termbox into Wikibase

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

@Hanna_Petruschat_WMDE this can be tested on beta now

alaa_wmde updated the task description. (Show Details)Oct 10 2019, 1:12 PM

Talked to @Hanna_Petruschat_WMDE and we decided to include in this task scope:

  • white background for input fields
  • fix vertical spacing according to Figma mockups

Change 542068 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Apply white background to input fields in edit mode

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

Change 542118 had a related patch set uploaded (by Alaa Sarhan; owner: Alaa Sarhan):
[wikibase/termbox@master] Add vertical paddings (spacing) between term lists and toggle buttons

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

patches for white background for input fields, and wider vertical spacing are up

I just discovered, that in the real mobile Wikidata the styling of the section "in more languages" already happened but also causes that this section cannot be expanded. See screenshot below.

For the above acceptance criteria:
the BG should never be narrower than the text. In case of a screen narrower than 340px it would be great to have the screen horizontally scrolling.

In regards of the horizontal spacing: From what I can see the most pressing spacing issue is between the end of one section, e.g. "in more languages" and the section header of "All entered Languages".

Thanks a lot for the effort.

@Hanna_Petruschat_WMDE the non-expandable problem is likely to be the result of a problem we faced with termbox in production yesterday. Sent out a short incident report to Wikidata Campsite mailing list.

As for the BG never getting narrower on screens narrower than 340px, we can work on that .. since these changes of this story and the other one are in production already. I think I'm going to create new tasks for them.

In regards of the horizontal spacing: From what I can see the most pressing spacing issue is between the end of one section, e.g. "in more languages" and the section header of "All entered Languages".

Let's talk about this one on Monday in person, I don't think I get the issue yet. Unless you are referring to the vertical spacing maybe? for which there's a fix in code-review atm.

@alaa_wmde

Let's talk about this one on Monday in person, I don't think I get the issue yet. Unless you are referring to the vertical spacing maybe? for which there's a fix in code-review atm.

You are totally right. This was referring to the vertical spacing. Sorry for the confusion.!

Created T235605: mobile Termbox should not get narrower than 340px to capture the 340px width limit requirement for later

Change 542068 merged by jenkins-bot:
[wikibase/termbox@master] Apply white background to input fields in edit mode

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

Change 542118 merged by jenkins-bot:
[wikibase/termbox@master] Add vertical paddings (spacing) between term lists and toggle buttons

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

@Hanna_Petruschat_WMDE background and vertical spacing fixes can be tested on beta now

Thanks for the update, @alaa_wmde . I'm afraid the vertical spacing is still not fixed. There is no padding between the last alias of a fingerprint and the following toggle button.
And I can't find the right ticket for this so I comment here: The background of the textboxes is still transparent instead of white.

Change 543878 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: bump pin

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

thanks @Pablo-WMDE
sorry @Hanna_Petruschat_WMDE apparently I spoke too fast and forgot that there's another patch needed to get the changes up in beta :/

Change 543878 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: bump pin

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

Hanna_Petruschat_WMDE closed this task as Resolved.Oct 21 2019, 10:59 AM

Sweet! Thanks. Looks all good to me now! \o/

@Lea_Lacroix_WMDE
Just to check with you: This is already live. Since I've been doing this on the side I didn't follow the proper way to let you know about these changes beforehands. Is there anything I can take care of to communicate the change or does this change not need a separate announcement? If the latter, please feel free to set this to "done" on the campsite workboard. Thank you!