Making Zen more Zen

[Mark-H]

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:

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:

.zen-unit {
  border-bottom: 1em solid #fff;
  border-top: 1em solid #fff;
}
.zen-unit tr td {
  border: none !important;;
}

/* Meta text/edit link */
.zen-unit tr:nth-child(1) td {
  color: #777;
  padding: 1.5rem 1.5rem 0 2.25rem;
  font-size: 0.8em;
}

.zen-unit {
  background: #fafafa;
  border-radius: 4px;
  overflow: hidden;
}
.zen-unit tr td:last-child {
  padding-right: 1.5rem !important;
}
.zen-unit tr:last-child td {
  padding-bottom: 1rem !important;
}
.zen-unit:first-child {
  border-radius: 4px;
  overflow: hidden;
}
.zen-unit:nth-child(2n) {
  background: #fafafa;
}

.zen .translatetext {
  background: transparent;
  padding: 0 0 0 1.25rem;
}
.zen .translatetext .language {
  display: none;
}
.zen .translatetext .form-group {
  display: flex; 
  margin-bottom: 0;
}
.zen .translatetext .form-group .language {
  padding-right: 1em;
  padding-top: 0.25em
}
.zen .translatetext .form-group .list-group {
  flex-grow: 1;
}
.zen .translatetext .form-group .list-group-item {
  background: transparent;
  border: 0;
  padding: 0;
  color: #1c252e;
}
.zen .translatetext .language {
  display: none;
}
.zen .translator {
  padding: 0.5rem 1.25rem;
}
.zen .translation-item > label {
  font-weight: normal;
  color: #777;
  font-size: 0.8em;
  padding: 0;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.zen .translation-item .translation-editor {
  background: #fff;
  color: #000;
  padding: 1rem;
}

.zen .translator .form-group {
  margin-bottom: 0;
  margin-top: 0.5rem;
}
.zen .translator .checkbox label {
  font-weight: normal;
}
.zen .btn-sidebar {
  left: 48px;
}

I already tried

• [X] I've read and searched the documentation.
• [X] I've searched for similar issues in this repository.

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

[nijel]

The UI looks indeed nicer. Few thoughts:

• there is no good reason to diverge the UI in the zen and normal mode
• hiding secondary languages in the zen mode is not desired, see https://github.com/WeblateOrg/weblate/issues/483
• the status bar is only next to the translation to avoid confusion with source or secondary language strings

[Mark-H]

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;
}

[comradekingu]

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

from https://github.com/WeblateOrg/weblate/issues/2767

[comradekingu]

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.

[Mark-H]

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.

[comradekingu]

@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.