The translation editor of Content Translation is not well suited for small screens. Given the need for contextual information, it provides three columns to show the original article, the translation and the tools provided to facilitate the process. This is convenient in wider screens, but it would help to have an alternative solution to support smaller screens.
A narrow width mode is proposed to better accommodate small windows:
| Full-width | Narrow width |
|---|---|
 |  |
A narrow mode
When the width does not allow the three columns to comfortably fit, only two columns will be shown at a time.
The default view will show the source and target columns. There will be a "+" action on the margin that will make the viewport to transition showing the target and tools column instead.
|  |
Some considerations:
- The "+" icon will appear in the margin next to the current active paragraph, and will include an active area much bigger than the "+" shape.
- The transition to show the tools column will be triggered by either clicking or hovering the "+" icon.
- An "X" icon will be provided in the tools panel for users to go back to the default view.
- Swiping left and right will allow to show the tools column and hide it.
- When the tools panel is visible, part of the source article will remain visible on the other extreme. That area will be used also to return to the default view either by clicking or hovering. Note that in this context the source article would act as a whole block, the user intent is not to click on a specific link of the partially visible article, so the click should not be propagated beyond making the source article return into the viewport.
A prototype and an animated example illustrates some of these aspects:
