472274 - summarized timetracking data line layout is quite "heavy"

Status: RESOLVED FIXED

(Bugzilla :: Query/Bug List, defect)

Description

[bigstijn]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Build Identifier: bugzilla 3.3.1

summarized timetracking data line layout is quite "heavy".
IMHO, the solid black line isn't the best choice for this.

I would choose to have a single line above the summary value, and have the color the same as the table header color.

So, for dusk, something like:

tr.bz_time_summary_line {
    color: #6169c0;
    vertical-align: bottom;
}

  <tr class="bz_time_summary_line">         
          <td class="bz_total_label" colspan="8"><b>Totals</b></td>
          <td><hr>2.0</td>
  </tr>

(I used <hr> to have the single line, maybe there are better options)

Reproducible: Always

Steps to Reproduce:
1.
2.
3.

Comment 1

[bigstijn]

see bug 316425 for the original feature.

Aaron, just for your information, I put you in CC.

Comment 2

[Frédéric Buclin]

Yeah, a lighter color would be better. :)

Comment 3

[Aaron Larson]

My choice of solid black was based on the summary line from summarize_time.cgi.  In fact, my first attempt (in bug 316425) used the same CSS names as from summarize_time.  I'm by no means a graphic artist, so I don't have an informed opinion here, but if you like a lighter color, then I suggest the color of the title bar:

    background-color: #929bb1;

I tried various permutations of border-top* to get just a line, but my CSS skills are inadequate for the task.

How do you want to proceed?

Comment 4

[bigstijn]

I'm also not so familiar with CSS, nor with the bugzilla style rules or naming conventions, so, Frédéric, don't hesitate to comment on this.

Beside td.bz_total_label,
I defined 
td.bz_total_value {
    border-top-style: solid;
    border-top-color: #000000;
    border-top-width: 4px;
}

I swapped the summary line colors to black on white:
tr.bz_time_summary_line {
    background-color: #FFFFFF;
    color: #000000;
}

and adapted td.bz_total_label to have the same border-width and white border-color:
td.bz_total_label {
    font-weight: bold;
    text-align: right;
    border-top-style: solid;
    border-top-width: 4px;
    border-top-color: #FFFFFF;
}

I used these classes in the following HTML:
  <tr class="bz_time_summary_line">         
          <td class="bz_total_label" colspan="8"><b>Totals</b></td>
          <td class="bz_total_value">33 %</td>
          <td class="bz_total_value">75.0</td>
  </tr>

which gives the following (IMHO better) layout (see att).


Still one remark, I have the impression you don't use
td.bz_estimated_time_column,
td.bz_remaining_time_column,
td.bz_actual_time_column,
td.bz_percentage_complete_column {
    text-align: right;
}
in the HTML-code ?

(But I don't know the best way to combine these things, just copy text-align in bz_total_value, or can you "inherit" this in the same CSS-file?)

Comment 5

[bigstijn]

Attachment: layout according comment 4

Comment 6

[Teemu Mannermaa (:wicked)]

(In reply to comment #4)
> Still one remark, I have the impression you don't use
> td.bz_estimated_time_column,
> td.bz_remaining_time_column,
> td.bz_actual_time_column,
> td.bz_percentage_complete_column {
>     text-align: right;
> }
> in the HTML-code ?

Sure we do, those classes are used in col tags inside the colgroup tag. Unfortunately it seems neither IE nor FF respect these settings and the columns remain left aligned.

I remember that during review I saw that one or the another browser did respect these settings but I just tested it again and neither browser did this time. So I'm not sure why my memory says otherwise. :)

Bigstijn, can you make a patch for the changes you describe in comment 4 and request a review? I think it might make the output look better. What do you think, LpSolit (see the attachment)?

Comment 7

[Frédéric Buclin]

(In reply to comment #6)
> What do you think, LpSolit (see the attachment)?

I think it may look strange if timetracking columns are not in a consecutive order. I was thinking about a bluish row instead, for all columns. This would be a one-liner.

Comment 8

[bigstijn]

Attachment: layout according comment 4, but with timetracking columns not in a consecutive order

This still looks fine, imho.

Comment 9

[bigstijn]

Attachment: layout according comment 4, but with timetracking columns not in a consecutive order - print preview

remark to comment 4: print preview shows a little white bar on top of totals, while this bar isn't visible for other columns.  Probably some minor style changes can prevent this.

Comment 10

[bigstijn]

(In reply to comment #6)

> Sure we do, those classes are used in col tags inside the colgroup tag.
> Unfortunately it seems neither IE nor FF respect these settings and the columns
> remain left aligned.

If they are added as class to the html-td tag, they're working:
    <td class="bz_percentage_complete_column" style="white-space: nowrap;"> 0 %
    </td>

Maybe they don't work in colgroup because http://www.w3.org/TR/CSS21/tables.html#columns didn't specify text-align as properties applying to column and column-group elements.

Comment 11

[bigstijn]

Attachment: layout according comment 7 (color #929bb1), but with timetracking columns not in a consecutive order

Which layout should we take?
Aaron, Frédéric, Teemu, what is your opinion?

Comment 12

[Aaron Larson]

Attachment: HTML sample heavy line

I think a line above the total row looks better, but I very much don't like the appearance when the line is split.  I created an attachment which is an HTML fragment of a bug list so that you can play with it without needing to modify Bugzilla source and/or templates.

I hacked the result so that every <td> in the summary row includes a class of "bz_total_cell" (in addition to the previous classes).  Then followed the suggestion in comment 4.  So the operative changes are:

  <tr class="bz_time_summary_line">         
          <td class="bz_total_label bz_total_cell" colspan="8"><b>Totals</b></td>
          <td class="bz_total_cell">158.0</td>
          <td class="bz_total_cell">28.0</td>
          <td class="bz_total_cell">90.0</td>
          <td class="bz_total_cell">312 %</td>
  </tr>

and the following style rule:

td.bz_total_cell {
    border-top-style: solid;
    border-top-color: #000000;
    border-top-width: 4px;
}

The patch to do the above would be very straight forward.

Comment 13

[Aaron Larson]

(In reply to comment #12)

>     border-top-width: 4px;

After playing with it for a while, I find that 3px is slightly preferable.  either way, I think the right solution is to endure that every cell in the summary row has a particular class, then anyone can style as they desire.  I didn't realize that it was not possible to style a TR border, or I would have included the class on the TD elements from the beginning.  As usual, ignorance is expensive.  Sorry folks.

Comment 14

[Teemu Mannermaa (:wicked)]

Attachment: Fix layout, V1

This fixes the total line "heaviness" by doing what Aaron explained in comment #12. Except I used lighter color from comment #3 for the border line.

I also took the opportunity to fix the time tracking field alignment problem by copying the CSS classes to td elements from the unsupported col elements. This is the proper way since col align is deprecated in favor of CSS. See http://www.webmasterworld.com/forum83/4242.htm, bug 915 comment 162 and http://ln.hixie.ch/?start=1070385285&count=1 for details.

Additionally I fixed the numerous validation warnings about empty span elements due to marking security bugs with a [SEC] for text based browsers implemented in bug 261210.

Comment 15

[Max Kanat-Alexander]

Comment on attachment 376535 [details] [diff] [review]
Fix layout, V1

>Index: skins/standard/buglist.css
> tr.bz_time_summary_line {
>-    background: black;
>-    color: white;
> }

  Um, don't just leave around an empty rule. :-)

>Index: template/en/default/list/table.html.tmpl

  There seem to be a lot of changes in this file that have nothing to do with this bug.

Comment 16

[Teemu Mannermaa (:wicked)]

Attachment: Fix layout, V2

(In reply to comment #15)
>   There seem to be a lot of changes in this file that have nothing to do with
> this bug.

I'll move col/colgroup fix to bug 470608 and [SEC] validation error probably to bug 296034 or somewhere else. Here's the patch without those changes that'll fix only this bug.

Comment 17

[Max Kanat-Alexander]

Why didn't you just put the class on the <tr> and style that?

Comment 18

[Teemu Mannermaa (:wicked)]

(In reply to comment #17)
> Why didn't you just put the class on the <tr> and style that?

Because that doesn't seem to work for the border. It seems border-top-* styles won't get inherited to the <td> from the <tr> or applied to <tr> or something. :( Only right alignment happens when I move styles to <tr>.

Comment 19

[Max Kanat-Alexander]

Comment on attachment 388182 [details] [diff] [review]
Fix layout, V2

Okay. In that case, I suppose this is fine.

Comment 20

[Teemu Mannermaa (:wicked)]

Trunk:
Checking in skins/standard/buglist.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/buglist.css,v  <--  buglist.css
new revision: 1.16; previous revision: 1.15
done
Checking in template/en/default/list/table.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/list/table.html.tmpl,v  <--  table.html.tmpl
new revision: 1.45; previous revision: 1.44
done


3.4 branch:
Checking in skins/standard/buglist.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/buglist.css,v  <--  buglist.css
new revision: 1.15.2.1; previous revision: 1.15
done
Checking in template/en/default/list/table.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/list/table.html.tmpl,v  <--  table.html.tmpl
new revision: 1.42.2.2; previous revision: 1.42.2.1
done