This may or may not cannibalize T205608: Floating button to collapse „All entered languages“

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.

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

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.

@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

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

Cool. Thanks a lot @alaa_wmde

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

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 the changes landed on beta now. I checked on https://m.wikidata.beta.wmflabs.org/wiki/Q11