Page MenuHomePhabricator

Move label, description and aliases of interface language to their new positions
Closed, ResolvedPublic8 Story Points

Description

Motivation
To prepare for a holistic experiences once mobile shows terms in multiple languages, the display of the terms in the interface language must be altered as well.
The goal is to have a clear interface structure, with all interactive elements reaching into an interactive aread at the right of the screen for LTR (and left for RTL) languages. This structure will be followed throughout the termbox rehaul.

Mockups of final version:
LTR :





RTL :


Acceptance criteria:

  • The item's label, description and alias are displayed as shown in the mocks. Use the svgs to read out the proportions.
  • The pen is located in the specified position, as shown in the mock ups. After clicking the icon, the special page (SetLabelsDescriptionsAliases) is opened, with input fields are pre-filled with existing data, and the special page is displayed in the user's language.
  • The style is left bound for LTR languages and right bound for RTL languages
  • Icons change direction depending on which direction the interface language has
  • The design is responsive. In portrait mode it breaks as indicated in the portray mock
  • Design specifications as defined below are followed

Design specifications

  • red areas are touch targets
  • the red line with an arrow is a keyline which is the strict border for text content not to overlap with the interactive area
  • a touch target needs to have at least 48 px by 48 px, the icon/text is placed centered/centered
  • blue areas show the heights from font baseline to another baseline
  • green areas are paddings

Notes:

  • The watchlist and edit button should have the same behavior as before
  • Although present in the mocks, this ticket does not cover the "In more languages" link

Event Timeline

Lea_WMDE triaged this task as Normal priority.Oct 16 2018, 11:47 AM
Lea_WMDE created this task.

Change 472015 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] TermboxView: backend request in dedicated class

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

Change 472015 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TermboxView: backend request in dedicated class

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

Change 476488 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] TermboxView: render item id locally

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

Change 476541 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] Termbox: style entity id, use latest template

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

Change 476488 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] TermboxView: render item id locally

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

Change 476541 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Termbox: style entity id, use latest template

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

Change 477585 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: use latest version

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

Change 477585 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: use latest version

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

Change 477778 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: use latest version

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

Change 477988 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: use latest version

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

Change 477778 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: use latest version

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

Change 477988 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: use latest version

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

Pablo-WMDE added a subscriber: Pablo-WMDE.EditedDec 6 2018, 3:27 PM

Hello @Lea_WMDE,
please find the result of this story at https://wikidata.beta.wmflabs.org/w/index.php?title=Item:Q11&useformat=mobile

Should you see a gray box that looks off-place, please beware that this is not us (T209882#4802891) and hopefully gone soon.

Yay! Product review!
I have a few concerns:

  • The font looks different to the rest of the page and to the mock. Is this beta specific?
  • The star seems to be a bit off to the left, its righter edge not really aligned with the magnifiying glass and edit pen icons below
  • The edit pen for editing the item is missing.

@Hanna_Petruschat_WMDE can you double check the star comment of mine? Thanks!

Not saying we got the fonts right (have not looked further in the platform support so chances are you don't even see the font we specified) but the design came with an explicit font specification so it "looking different to the rest of the page" is expected unless implicit AC was we also re-styled the entire rest of the page "while we were at it".
Similarly, star and pen were merely touched, but surly will have to be addressed before a real release. I'm happy to see this feedback though - let's track it in a format that works for everyone and address it step by step.

Edit icon needs to be added, to fulfil the story.

WMDE-leszek updated the task description. (Show Details)Dec 12 2018, 3:37 PM

Meta question :Where should I move this ticket if it is not done? Back to backlog?

@Lea_WMDE I moved it back to ToDo in our iteration board until we are confident again that we have all (our) sub-tasks of it covered.

Change 481879 had a related patch set uploaded (by Matthias Geisler; owner: Matthias Geisler):
[mediawiki/extensions/Wikibase@master] Make alias seperator as message

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

Change 481879 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Make alias seperator as message

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

Change 483086 had a related patch set uploaded (by Pablo Grass (WMDE); owner: Pablo Grass (WMDE)):
[mediawiki/extensions/Wikibase@master] termbox: use latest version incl dressed up edit pen

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

Change 483086 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] termbox: use latest version incl dressed up edit pen

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

@Lea_WMDE Please find an updated version at https://wikidata.beta.wmflabs.org/w/index.php?title=Item:Q11&useformat=mobile

(Given this is deployed continuously, parts of the next story ["all languages link"] may already be showing in the mark-up rendered on the server side).

Yay, we are super close to being done!
I found two small things:

  • The edit pen is not aligned with star and other pen in the "actionable icon column"

  • In portrait mode the text break rather early, and I expect it should run for longer (but I might also not be up to date with the breakpoint specifications)

Pablo-WMDE added a comment.EditedJan 14 2019, 1:23 PM

Hi,

The edit pen is not aligned with star and other pen in the "actionable icon column"

I made T213538 to address this. We planned to address this when getting to the first story truly demanding responsiveness (happens only within a very small width window)

In portrait mode the text break rather early, and I expect it should run for longer (but I might also not be up to date with the breakpoint specifications)

Figma says "column scale from 260 to 420 px" - I believe that's the maximum width we are seeing.

Lea_WMDE closed this task as Resolved.Jan 16 2019, 9:46 AM
Lea_WMDE claimed this task.

Just to clarify:

In portrait mode the text break rather early, and I expect it should run for longer (but I might also not be up to date with the breakpoint specifications)

Figma says "column scale from 260 to 420 px" - I believe that's the maximum width we are seeing.

The break is wanted as lines are easier to read if there are around 60 characters. I'm breaking a Wikipedia/Mediawiki pattern here for the sake of a truely better reading experience.