Page MenuHomePhabricator

Change styling of label, description and aliases of interface language
Closed, ResolvedPublic

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, but for now it only contains the already exting watchlist star and editing pin.

Mockups of final version:
LTR :




RTL :


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

Dev notes

  • This story will include introducing vue.js to the frontend for all termbox related things. Ideally, the watchlist star and title stay out of it.

Related Objects

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 24 2018, 10:21 AM
Lea_WMDE triaged this task as Medium priority.Sep 27 2018, 6:49 AM
Lea_WMDE updated the task description. (Show Details)
Lea_WMDE updated the task description. (Show Details)Sep 27 2018, 6:55 AM
Lea_WMDE updated the task description. (Show Details)Sep 27 2018, 7:05 AM
Lea_WMDE updated the task description. (Show Details)
Lea_WMDE updated the task description. (Show Details)Sep 27 2018, 9:40 AM
Lea_WMDE set the point value for this task to 13.
Lea_WMDE removed the point value for this task.

Here is another spec file to support the styling. The rule of thumb for spacing of the text is: heights of the text plus 8 px, eg. for a one line text that means:
font: 24 px
plus 8 px
makes a text box of 32 px height
font is centered in that box

for two line text that means:
2*24 px=48 px
plus 8 px
makes a box of 56 px height
font is centered in that as well. line heights is 100%.

This was not explicitely stated in the ticket (my bad): Are you doing this only for js-using people or for everyone? The end product should show the interface language-terms the same way for js and non-js users, but I understand if this ticket was estimated only with js in mind (and would create another ticket if that was the case)

It was said in the story time yesterday, that a ticket should in the best case cover js and non js and not have completely diffeent requirements for the two . Please correct me if I'm wrong @Pablo-WMDE

All the better!

Lea_WMDE closed this task as Resolved.Apr 12 2019, 10:45 AM
Lea_WMDE claimed this task.