launchpad-reviewers team mailing list archive

[William Grant <me@xxxxxxxxxxxxxxxxxx>]

William Grant has proposed merging lp:~wgrant/launchpad/redo-watermark-css into lp:launchpad.

Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~wgrant/launchpad/redo-watermark-css/+merge/97386

This branch reworks the watermark (title and facet menu) CSS to be simpler and less dependent on potentially variable whitespace, a problem I ran into while porting us to HTML5.

It's within a pixel of the old implementation in both XHTML and HTML rendered in WebKit, Gecko, Presto, and reasonably modern Tridents (IE8 and 9, but not 6 or 7). Sadly it's a little more complex than it could be, due to the fact that mhonarc uses the same styles and Product:+index stuffs an inline editor into the h1.
-- 
https://code.launchpad.net/~wgrant/launchpad/redo-watermark-css/+merge/97386
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~wgrant/launchpad/redo-watermark-css into lp:launchpad.

=== modified file 'lib/canonical/launchpad/icing/css/layout.css'
--- lib/canonical/launchpad/icing/css/layout.css	2012-03-10 15:33:33 +0000
+++ lib/canonical/launchpad/icing/css/layout.css	2012-03-14 12:30:28 +0000
@@ -66,77 +66,65 @@
     color: #f00;
     background-color: transparent;
     }
+/* The actions row of the watermark is reused by our mhonarc templates,
+ * which we can't easily change. So about half of this is overcomplex to
+ * support them too. Caution is also needed to avoid breaking
+ * Product:+index's inline title edit widget.
+ */
 div.watermark-apps-portlet {
     clear: both;
-    margin-bottom: .5em;
-    white-space: no-wrap;
-    }
-div.watermark-apps-portlet .wide {
+    margin-bottom: 0.8em;
+    }
+div.watermark-apps-portlet > div {
+    display: inline-block;
+    vertical-align: middle;
+    }
+div.watermark-apps-portlet > div.wide {
     width: 75%;
-    vertical-align: bottom;
-    margin-bottom: 0.3em;
     }
-div.watermark-apps-portlet img {
+div.watermark-apps-portlet > div > img {
+    display: block;
     margin: 0 1.5em 0 0;
     }
 div.watermark-apps-portlet h1, div.watermark-apps-portlet h2 {
-    margin-top: 0px;
-    margin-bottom: 6px;
-    color: #000000;
+    color: #000;
     font-weight: bold;
     font-size: 30px;
     line-height: 34px;
-    clear: none;
-    }
-div.watermark-apps-portlet span img {
-    float: none;
     margin: 0;
-    font-weight: bold;
-    clear: none;
-    }
-.watermark-apps-portlet li {
+    }
+.watermark-apps-portlet ul.facetmenu {
+    margin-top: 6px;
+    margin-left: -0.5em;
+    white-space: nowrap;
+    }
+.watermark-apps-portlet ul.facetmenu li {
     display: inline;
     list-style-type: none;
     }
-.watermark-apps-portlet li a, .watermark-apps-portlet li span {
+.watermark-apps-portlet ul.facetmenu li a,
+.watermark-apps-portlet ul.facetmenu li span {
     padding: 0.3em 0.5em;
     margin-right: 0.4em;
     }
-.watermark-apps-portlet li:first-child a,
-.watermark-apps-portlet li:first-child span {
-    /* The text of the first tab should align with the heading directly
-       above it */
-    margin-left: -0.5em;
-    }
-.watermark-apps-portlet li a:link, .watermark-apps-portlet li a:visited {
+.watermark-apps-portlet ul.facetmenu li a:link,
+.watermark-apps-portlet ul.facetmenu li a:visited {
     color: #000;
-    background-color: #fff;
     text-decoration: none;
     }
-.watermark-apps-portlet li.active a, .watermark-apps-portlet li.active span {
+.watermark-apps-portlet ul.facetmenu li a:hover {
+    color: #000;
+    background-color: #f3f3f3;
+    }
+.watermark-apps-portlet ul.facetmenu li.active a,
+.watermark-apps-portlet ul.facetmenu li.active span {
     font-weight: bold;
     color: #fff;
     background-color: #747474;
     }
-.watermark-apps-portlet li a:hover {
-    color: #000;
-    background-color: #f3f3f3;
-    }
-.watermark-apps-portlet li.disabled-tab {
+.watermark-apps-portlet ul.facetmenu li.disabled-tab {
     color: #747474;
     }
-.flowed-block {
-    display: table-cell;
-    display: inline-table;
-    display: inline-block;
-    text-align: left;
-    vertical-align: top;
-    }
-.facetmenu {
-    /* Facet menu, a.k.a. application tabs */
-    width: 100%;
-    white-space: nowrap;
-    }
 .context-publication {
     margin-bottom: 1em;
     }

=== modified file 'lib/lp/app/templates/base-layout.pt'
--- lib/lp/app/templates/base-layout.pt	2012-03-06 11:22:16 +0000
+++ lib/lp/app/templates/base-layout.pt	2012-03-14 12:30:28 +0000
@@ -80,10 +80,10 @@
       </div><!--id="locationbar"-->
 
       <div id="watermark" class="watermark-apps-portlet">
-        <div class="flowed-block">
+        <div>
           <span tal:replace="structure view/watermark:logo"></span>
         </div>
-        <div class="flowed-block wide">
+        <div class="wide">
           <h2 tal:replace="structure view/watermark:heading">
             Celso Providelo
           </h2>

=== modified file 'lib/lp/services/mailman/monkeypatches/lp-mhonarc-common.mrc'
--- lib/lp/services/mailman/monkeypatches/lp-mhonarc-common.mrc	2012-01-03 07:15:56 +0000
+++ lib/lp/services/mailman/monkeypatches/lp-mhonarc-common.mrc	2012-03-14 12:30:28 +0000
@@ -128,7 +128,7 @@
   </div>
   <h1>$ML-NAME$ team mailing list archive</h1>
   <div id="watermark" class="watermark-apps-portlet">
-    <div class="flowed-block wide">
+    <div class="wide">
 </DefineVar>
 
 <DefineVar>