Open Mark-H opened 2 years ago
The UI looks indeed nicer. Few thoughts:
Glad you like it. ;)
I've been using Weblate for like 22 hours so there's going to be a lot of context I don't know (like those secondary languages), so hopefully someone can take this concept and make it happen. For now I've just loaded it up as a site-specific stylesheet.
Normal mode would require more work as the markup is very different, but general ideas could certainly apply there too. Don't render original texts in input style, de-emphasize what doesn't need emphasis, etc.
Perhaps for showing the secondary languages, consider shortening it to the locale key in a pill only if there's more than 1 visible, rendered inline with the original text? I don't know how to get secondary languages to show up, but something like this:
span {
background: #93aac1;
color: #fff;
padding: 1px 6px;
font-size: 0.8em;
border-radius: 15px;
margin-right: 0.5em;
}
Fewer lines is good, but indenting the source wrt. translation is unzenny. Since the contrasting colour lines are gone, it makes it easier to see the lines. However, they are very thin, so I guess one hard underline for each entry is better than boxing in each language.
vs
For anything other than single-line translations, this problem occurs:
Moving up to copy the source string is a farther distance to travel, and consequently not always found in the same place vis-a-vis the translation field.
I would suggest mapping those buttons to the bottom of each respective field, but an even better solution to additionally save space might exist.
Trying to save space is a great way to make a UI worse. You need a visual hierarchy and spacing to make it easy to use. If large multiline strings in multiple languages go out of view, maybe a different way to think about that is sticky positioning to keep the input in view.
@Mark-H My comment only concerns the distance to the buttons from the translation field, as it relates to the length of the original string. While I propose a consistency, I have only considered the options insofar as putting it inline with the language name is more costly in terms of what becomes a skewed vertical alignment.
If it is one atop the other, its attachment to the language name is more often not obvious, seeing as most strings are one-liners.
Describe the issue
Coming from CrowdIn, the Weblate translation inferface is a bit... cluttered. There's lacking visual hierarchy, and while I've found the Zen view to be useful, it wasn't super zen.
So I've muddled around a bit with some CSS and while I don't presently have the time to set up a local build to get acquainted with how Weblate is built and send a PR, I would like to provide you with the changes I made for your consideration. Someone who has contributed before will likely be able to adapt these changes into the CSS files fairly easily.
Before:![Schermafbeelding 2022-03-16 om 13 25 44](https://user-images.githubusercontent.com/312944/158589550-780fecb3-3be4-4c77-95de-ded32c6ffdd0.jpg)
After:
Hopefully you agree it's a little more easy on the eyes with less borders, more spacing, and de-emphasizing some elements.
Would be nice to take it a bit further by expanding the status border on the left to the entire block, however I could not accomplish that with CSS alone due to the markup structure.
The custom CSS:
I already tried
Steps to reproduce the behavior
Not applicable.
Expected behavior
No response
Screenshots
No response
Exception traceback
No response
How do you run Weblate?
weblate.org service
Weblate versions
No response
Weblate deploy checks
No response
Additional context
No response