launchpad-reviewers team mailing list archive

[Deryck Hodge <deryck.hodge@xxxxxxxxxxxxx>]

Deryck Hodge has proposed merging lp:~deryck/launchpad/custom-bug-listings-css-polish into lp:launchpad.

Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)
Related bugs:
  Bug #884920 in Launchpad itself: "Custom Bug Listings are missing CSS to format correctly"
  https://bugs.launchpad.net/launchpad/+bug/884920

For more details, see:
https://code.launchpad.net/~deryck/launchpad/custom-bug-listings-css-polish/+merge/81147

This branch adds some CSS to get the new bug listings design looking more like the mockups at https://dev.launchpad.net/Projects/CustomBugListings/.  There were some changes to markup required.  I dropped the table we had previously and went with divs.  I also added some sections and a load of class names.  Some of these markup changes will make it easier to format the page once we add in all the fields that have been requested.

I put the CSS in what I believe are the appropriate places, but I welcome correction and pointers to the right place if I got it wrong.  Also make lint complains to no end about not having extra newlines, but as far as I can tell we don't follow this rule in the existing stylesheets.  So I followed the existing style, rather than reformat two entire files.
-- 
https://code.launchpad.net/~deryck/launchpad/custom-bug-listings-css-polish/+merge/81147
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~deryck/launchpad/custom-bug-listings-css-polish into lp:launchpad.

=== modified file 'lib/canonical/launchpad/icing/style-3-0.css'
--- lib/canonical/launchpad/icing/style-3-0.css	2011-10-28 17:09:49 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css	2011-11-03 13:54:30 +0000
@@ -1719,6 +1719,31 @@
 .importanceUNDECIDED, .importanceUNDECIDED a {
     color: #999;
     }
+#client-listing .importanceCRITICAL, #client-listing .importanceCRITICAL a {
+    background: red;
+    color: white;
+    }
+#client-listing .importanceHIGH, #client-listing .importanceHIGH a {
+    background:#f60;
+    color: white;
+    }
+#client-listing .importanceMEDIUM, #client-listing .importanceMEDIUM a {
+    background: green;
+    color: white;
+    }
+#client-listing .importanceLOW, #client-listing .importanceLOW a {
+    background: black;
+    color: white;
+    }
+#client-listing .importanceWISHLIST, #client-listing .importanceWISHLIST a {
+    background: blue;
+    color: white;
+    }
+#client-listing .importanceUNDECIDED, #client-listing .importanceUNDECIDED a {
+    background: #999;
+    color: white;
+    }
+
 .status :link, .importance :link {
     text-decoration: none;
     }
@@ -1882,6 +1907,7 @@
 
 .discreet, .lesser, .duplicate-details {
     font-size: 10px;
+    clear: left;
     }
 pre.changelog, table.diff,
 .bug-comment, .bug-activity, .codereviewcomment {

=== modified file 'lib/canonical/launchpad/icing/style.css'
--- lib/canonical/launchpad/icing/style.css	2011-10-27 11:36:13 +0000
+++ lib/canonical/launchpad/icing/style.css	2011-11-03 13:54:30 +0000
@@ -600,6 +600,59 @@
   display: inline;
 }
 
+/* Rules for CustomBugListings bug search result lists. */
+div#client-listing {
+    float: left;
+    }
+div.buglisting-row {
+    float: left;
+    margin-top: 5px;
+    border-bottom: 1px solid #EEE;
+    min-width: 585px;
+    width: 100%;
+    }
+div.buglisting-col1 {
+    width: 100px;
+    float: left;
+    padding-bottom: 8px;
+    }
+div.buglisting-col2 {
+    width: 70%;
+    float: left;
+    }
+div.buglisting-col3 {
+    width: 10%;
+    float: right;
+    }
+div#client-listing .importance {
+    height: 1.5em;
+    width: 6em;
+    font-size: .8em;
+    padding: 0 5px;
+    border-radius: 2px;
+    text-transform: uppercase;
+    line-height: 1.5em;
+    margin: 5px 50px 5px 0;
+    text-align: center;
+    position: relative;
+    left: 10px;
+    }
+div#client-listing .buglisting-col2 {
+    color: #999;
+    }
+div#client-listing .bug-related-icons {
+    float: right;
+    margin: 3px 0 3px 0;
+    }
+div#client-listing .bug-heat-icons {
+    float: right;
+    margin: 3px 0 3px 0;
+    }
+div#client-listing .status {
+    position: relative;
+    left: 10px;
+    }
+
 /* === Translations === */
 
 .translation code {font-weight: bold;} /* an interpolation code, such as %i */

=== modified file 'lib/lp/bugs/templates/buglisting.mustache'
--- lib/lp/bugs/templates/buglisting.mustache	2011-10-13 22:12:09 +0000
+++ lib/lp/bugs/templates/buglisting.mustache	2011-11-03 13:54:30 +0000
@@ -1,25 +1,37 @@
-<table class="listing narrow-listing">
-<tbody>
+<div class="listing">
 {{#bugtasks}}
-    <tr>
-        <td class={{importance_class}}>
-            {{importance}}
-        </td>
-        <td>
-            #{{id}} <a href="{{bug_url}}">{{title}}</a>
-        </td>
-        <td align="right">
-            {{{badges}}}{{{bug_heat_html}}}
-        </td>
-    </tr>
-    <tr >
-        <td class={{status_class}} style="border-style: none">
+  <div class="buglisting-row">
+
+    <div class="buglisting-col1">
+        <div class="importance {{importance_class}}">
+          {{importance}}
+        </div>
+        <div class="status {{status_class}}">
             {{status}}
-        </td>
-        <td colspan="2" style="border-style: none">
-            <span class="{{bugtarget_css}}">{{bugtarget}}</span>
-        </td>
-    </tr>
+        </div>
+    </div>
+
+    <div class="buglisting-col2">
+        <div class="buginfo">
+            <span class="bugnumber">#{{id}}</span>
+            <a href="{{bug_url}}" class="bugtitle">{{title}}</a>
+        </div>
+        <div class="buginfo-extras">
+            <div class="{{bugtarget_css}}">
+              {{bugtarget}}
+            </div>
+        </div>
+    </div>
+
+    <div class="buglisting-col3">
+        <span class="bug-heat-icons">
+             {{{bug_heat_html}}}
+        </span>
+        <span class="bug-related-icons">
+            {{{badges}}}
+        </span>
+    </div>
+
+  </div>
 {{/bugtasks}}
-</tbody>
-</table>
+</div>

=== modified file 'lib/lp/bugs/templates/bugs-listing-table.pt'
--- lib/lp/bugs/templates/bugs-listing-table.pt	2011-11-02 16:33:35 +0000
+++ lib/lp/bugs/templates/bugs-listing-table.pt	2011-11-03 13:54:30 +0000
@@ -23,7 +23,7 @@
     <tal:mustache
         condition="request/features/bugs.dynamic_bug_listings.enabled">
         <div id="bugs-orderby"></div>
-        <span id="client-listing" tal:content="structure context/mustache" />
+        <div id="client-listing" tal:content="structure context/mustache" />
         <script tal:content="structure context/mustache_listings" />
     </tal:mustache>
     <div class="lesser"