Filed this as minor. It still is just a tad disturbing so I thought I might file it.
You can see the bug if you go to the front page (http://localize.drupal.org) for the Catalan project.
The left edge has border-radius, the right one doesn't.

CommentFileSizeAuthor
#6 l10n_progress_complete_border-radius.patch3.05 KBtstoeckler
#2 Radiuses.png14.64 KBgábor hojtsy

Comments

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Project: Drupal.org site moderators » Localization server
Version: » 6.x-2.x-dev
Component: Localize.drupal.org » User interface

I'd love if you could help figure this out :) The markup is this:

<div class="l10n-community-progress"><div class="l10n-community-progress-translated" style="width:7.25%;" title="7.25% translated"></div><div class="l10n-community-progress-untranslated" style="width:92.75%;" title="92.75% untranslated"></div></div>

So we have a progress wrapper with a translated and untranslated portion. The CSS looks like this:

.l10n-community-progress {
  height: 1em;
  background-color: #eaeae1;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.l10n-community-progress-translated,
.l10n-community-progress-untranslated {
  background-color: #96bc44;
  height: 1em;
  float: left;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
}
.l10n-community-progress-untranslated {
  background-color: transparent;
}

So we have a radius on all corners of the background and a left radius on the translated and untranslated items. So unless you are close to 100% complete, this looks like a "pill" getting filled in. The right end of the translated one is not set with a radius, since that would end up looking like a rounded progress marker in a rounded box. Is that better?

Ps. agreed this is minor but since you've reported it... :)

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
StatusFileSize
new Radiuses.png14.64 KB

Ok, maybe this looks better (with radius on all borders of the translated string), agreed?

tstoeckler’s picture

tstoeckler
he/him
Primary language German
Location Essen, Germany
commented

Yeah, I had done that in Firebug as well.
Could you point me place the width gets dynamically set depending on the translation status? I would code a little patch which checks for "width = 100%" and adds the border-radius on the right side then conditionally. I think that still looks best.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

Well, the reason I did not do that is if the completeness is 99%, the no-radius border would still cover most of the radius background. So its not really easy to tell when exactly it covers the end, unless we can define the exact length of the progress bar, which we cannot due to it being flexible in the table cell.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Active » Closed (duplicate)

Ok, I'd apply the border radius on all corners as in the above image. Including in #798192: l10n_community rtl css files, since it was related to RTL styles.

tstoeckler’s picture

tstoeckler
he/him
Primary language German
Location Essen, Germany
commented
Status: Closed (duplicate) » Needs review
StatusFileSize
new l10n_progress_complete_border-radius.patch3.05 KB

Since I started such a stupid issue, I felt obligated to contribute something useful. :)
Here's a patch, which rolls back the border radius on all corners from #798192: l10n_community rtl css files (but with RTL styling), and adds a CSS class 'l10n-community-progress-completed' for translations which have a translation percentage of 100%. This CSS class, is then styled to have border radius on all four corners.
Untested, because I had no data to try it out with, but the module installed without errors at least.
I don't really care if you set this back to duplicate if you don't care enough about this, but now I can sleep better :)

droplet’s picture

droplet commented

how about 97% ~ 99% ?

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented
Status: Needs review » Closed (duplicate)

Yeah... As I've said, its a relative thing also depending on the length of the progress bar. I think the 'pill' looks of the #2 image are ok.