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.
