Refactor drafting UI - #108
Conversation
This was necessary to ensure the alignment of the source and translated verses when the page was scrolled.
Improve textareas with aria, id, and spellcheck
|
|
||
| {activeVerseId < totalSourceVerses && ( | ||
| <div className='absolute right-4 z-10' style={{ top: buttonTop }}> | ||
| <Button |
There was a problem hiding this comment.
The Next Verse button should be displayed at the bottom of the last verse.
There was a problem hiding this comment.
In the following, should the 'Next verse' button move to the following verse (1), the next empty verse (2), or the next verse after the last completed (3)?
If the button is anchored on the last completed verse, clicking it would be unintuitive.
There was a problem hiding this comment.
After discussing this, we have decided to keep the Next Verse button below the last verse that can be edited. The Next Verse button will be used only for "unlocking" the next verse for editing. The Enter or Tab keys will move the user down a verse. So, for example, if they translate all the way to verse 6 and then see a needed edit in verse 3, they can click on verse 3, make the edit, then press Enter three times to be back in the edit box for verse 6 and continue translating. If they hit Enter again when they are in the edit box for verse 6 or if they click the Next Verse button, it will move them to verse 7.
There was a problem hiding this comment.
The content should be stretched to use more horizontal space. There's space on both sides.
There was a problem hiding this comment.
There is a well understood design principle that text that is too wide is more difficult to read. The best width for text should be between 50-75 characters, or for blogs or larger bodies of text, the text area should be no more than roughly 700px. ref
The width I set is generally closer to 55 characters, depending on language. I can see an argument for a little wider text area here ( maybe up to max-w-7xl) but not filling the screen on larger devices.
There was a problem hiding this comment.
I have always thought, like Kasey, that shorter line lengths are better. But I have done some research and I am finding that the shorter lengths apply to reading and not editing. For editing, having a larger context is better. Taking from other programs like Google Docs or MS Word they seem to be about 95 characters wide. I think Kasey's recommendation of 700px (or the widest preset width in Tailwind) for each the source and target pane will allow for that.
The button should now stay with the last revealed verse and de disabled if there is no content in that verse.
3 participants
This refactor is to ensure alignment of the source verses and target verses when a translator is working on the drafting page.
The SourcePanel and TargetPanel components were kept for now. We can remove them after we are certain that we will not need them.