Merge lp:~rbanffy/launchpad/highlight_listing_tr into lp:launchpad

[Ricardo Bánffy]

Makes slight changes to the Launchpad web interface styles to make the site slightly easier to use and navigate. Some parte look strange. The initial motivation was to make listings (such as https://code.launchpad.net/maas/+activereviews) easier to read with alternating backgrounds and line hovers.

[Colin Watson (cjwatson)]

Please set a commit message for your merge proposal; the landing machinery requires this. Also, it's a good idea with UI branches to give some example pages that highlight your change. In the absence of one I looked at https://code.launchpad.dev/gnome-terminal, but you may have a better example.

This doesn't seem to quite do what you want. The way that descendant selectors work mean that what you're doing here is selecting a tr element inside another tr. This works better:

  table.listing tbody tr:not(.thead):hover

But not(.thead) is weird inside tbody; and in any case tables aren't obliged to have an explicit tbody element. Perhaps what you meant is more like this?

  table.listing tr:not(.thead):hover

The contrast between white and lightgrey feels a bit too sharp and jarring to me, and I wonder if there's a shade in between those two that we could pick, preferably one already in use in Launchpad. For selected rows in the official tags form, we use #eee, and that feels much nicer to me here.

There are some views where this looks distinctly weird. For example, in a development instance with sampledata, try https://launchpad.dev/ubuntu/+source/evolution and hover over the various rows in the table at the bottom. Can we find a way not to highlight the blank rows?

review: Needs Fixing

[Ricardo Bánffy (rbanffy)]

Used a CSS selector identical to launchpad_tweaks. If affects pages in the "Code" section.

review: Needs Resubmitting

Unmerged revisions

17486. By Ricardo Bánffy on 2016-03-18

Apply cjwatson's suggestion and use the CSS selector that's used in launchpad_tweaks

17485. By Ricardo Bánffy on 2016-03-18

merge trunk

17484. By Ricardo Bánffy on 2015-05-07

Narrow down CSS selector

17483. By Ricardo Bánffy on 2015-05-07

Highlight the listing row where the pointer is so it's easier to navigate long listings

=== modified file 'lib/canonical/launchpad/icing/css/base.css'
--- lib/canonical/launchpad/icing/css/base.css	2015-03-24 11:30:04 +0000
+++ lib/canonical/launchpad/icing/css/base.css	2016-03-18 20:02:02 +0000
@@ -402,6 +402,10 @@
     border: none;
     }
 
+table.listing tbody tr:hover {
+    background: #eee;
+    }
+
 table.listing tfoot td {
     border: 1px solid #d2d2d2;
     }