Style charm results panel.

Style charm results panel.

Does not include filter dropdown as that design is not finalized.

Added further styling as specified by Matt.

https://code.launchpad.net/~bac/juju-gui/charm-search-style/+merge/133325

(do not edit description out of merge proposal)

[bac, 2012-11-07 19:34:52]

Please take a look.

[gary.poster, 2012-11-07 21:10:44]

Hi Brad.  This really looks much better, thank you.

Matt is the one who will be pickier than I, but here's a start:

- The visual design doesn't seem to bold the series names or the charm names,
but they are bold in the app right now.

- It looks to me like there is too much space between the package name and the
summary, in comparison to the visual design.

- The visual design looks like it might be alternating darker and lighter gray
background colors for each package, and then using the lighter gray color for
mouseover.  I'm not sure that's right, but something is going on, and it
probably warrants checking with Matt.

- If you search for something that is available in multiple series (I used
"buildbot" :-) ) then the top line of the second series (Oneiric, in this case)
looks too thick.  AFAICT, the last .charm-entry should not have a bottom-border.
 That fixes it for me. "&:last-child { bottom-border: 0; }" maybe?

That's it.  Fix those and I'm automatically +1.  Thanks!

Gary

[frankban, 2012-11-08 10:26:27]

Nothing to add to what Gary wrote.
The charm search panel looks very good now.

[bac, 2012-11-08 12:51:15]

On 2012/11/07 21:10:44, gary.poster wrote:
> Hi Brad.  This really looks much better, thank you.
> 
> Matt is the one who will be pickier than I, but here's a start:
> 
> - The visual design doesn't seem to bold the series names or the charm names,
> but they are bold in the app right now.

Good catch and it looks much better.

> 
> - It looks to me like there is too much space between the package name and the
> summary, in comparison to the visual design.

The design calls for 10px, which is what I set padding-top to.  But there
appears to be extra space below the charm name.  I'm going to reduce padding-top
for the summary to 6px to give a resulting spacing that appears to be 10px-ish.

> 
> - The visual design looks like it might be alternating darker and lighter gray
> background colors for each package, and then using the lighter gray color for
> mouseover.  I'm not sure that's right, but something is going on, and it
> probably warrants checking with Matt.

WIll do.  Had checked with Jovan but he deferred to Matt.  Matt and I will talk
today.

Until he says definitively I have implemented alternating background colors,
which was easy to do with
&:nth-child(even) and &:nth-child(odd)
I must say the effect is so slight that I find it more annoying than helpful. 
But it now matches your interpretation of the visual design.  I think the
confusion could've been avoided had the assets been named list_even_div and
list_odd_div instead of list_one_div and list_two_div.  I bring this up, and the
Friday review card, because I think we are experiencing considerable churn based
on the imprecise communication and specification between the designers and us. 
There is room for improvement and we should seek to get better specs so we
aren't doing archeology with color pickers and mind reading.

> 
> - If you search for something that is available in multiple series (I used
> "buildbot" :-) ) then the top line of the second series (Oneiric, in this
case)
> looks too thick.  AFAICT, the last .charm-entry should not have a
bottom-border.
>  That fixes it for me. "&:last-child { bottom-border: 0; }" maybe?

Good catch and thanks for the fix.  It appears to work for me.

> 
> That's it.  Fix those and I'm automatically +1.  Thanks!
> 
> Gary

[bac, 2012-11-08 12:52:43]

Please take a look.

[bac, 2012-11-08 12:55:25]

*** Submitted:

Style charm results panel.

Does not include filter dropdown as that design is not finalized.

R=gary.poster, francesco.banconi
CC=
https://codereview.appspot.com/6817101

[bac, 2012-11-08 15:53:44]

*** Submitted:

Style charm results panel.

Does not include filter dropdown as that design is not finalized.

Added further styling as specified by Matt.

R=
CC=
https://codereview.appspot.com/6817101