Merge lp:~wgrant/loggerhead/pretty-view into lp:loggerhead

[William Grant]

Fix diff and view page styling to be more compact and more easily copyable.

    - Fix diff and view page styling to be more compact and more easily
      copyable. (William Grant, #743295)

diffs are just a size change, but I had to add the 'code' class to blank cells to shrink the text size to avoid gaps.

view gets a pretty major rework -- it's now a table with just two cells, to align two big pre columns for the lines and content. This makes the content copyable and makes the spacing more sensible. Some CSS changes were needed here, and those styles are shared with annotate, so annotate also became a bit more compact.

Tested all three views in Firefox, Chromium and IE9. Screenshots of the new and old view views at <http://people.canonical.com/~wgrant/launchpad/lh-view>.

[Robert Collins (lifeless)]

+1

=== modified file 'NEWS'
--- NEWS	2012-02-09 03:25:36 +0000
+++ NEWS	2012-02-22 08:57:20 +0000
@@ -59,6 +59,9 @@
       non-existent file or revision.
       (William Grant, #728209, #929275)
 
+    - Fix diff and view page styling to be more compact and more easily
+      copyable. (William Grant, #743295)
+
 
 1.18.1 [24Mar2011]
 ------------------
 
=== modified file 'loggerhead/static/css/diff.css'
--- loggerhead/static/css/diff.css	2011-02-18 05:41:17 +0000
+++ loggerhead/static/css/diff.css	2012-02-22 08:57:20 +0000
@@ -68,17 +68,11 @@
     color: #000;
     font-size: 85%;
     font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
-    line-height: 180%;
-    }
-.blank {
-    float: left;
-    padding: 0 1%;
     }
 .unified .code {
     width: 89%;
     }
-.sbs .code,
-.blank {
+.sbs .code {
     width: 43%;
     overflow: hidden;
     }
 
=== modified file 'loggerhead/static/css/view.css'
--- loggerhead/static/css/view.css	2011-04-22 17:22:26 +0000
+++ loggerhead/static/css/view.css	2012-02-22 08:57:20 +0000
@@ -1,47 +1,40 @@
 /*table*/
 #logentries,
-.viewRev,
 .viewLine {
     border: 1px solid #d2d2d2;
-}
+    }
 .viewRev {
     border-right: none;
     white-space: nowrap;
     width: 1px;
     padding: .3em .6em;
-}
+    }
 .viewComm,
 .viewCont {
     border: none;
     }
 .viewLine {
     border-style: none solid none none;
-    width: 20px;
-    padding-left: .6em;
-    padding-right: .2em;
     }
 .viewLine.first {
     border-style: solid solid none none;
-}
-.viewCont {
-    padding-left: .4em;
-    }
-.viewLine,
-.viewCont {
-    font-size: 116%;
+    }
+.viewCont {
+    padding: 0.2em 0.5em;
+    }
+.viewLine {
+    padding: 0.2em 0.2em;
+    }
+.viewLine pre,
+.viewCont pre {
     font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
-    line-height: 108%;
-    whitespace: pre;
-    }
-.viewCont pre {
+    font-size: 100%;
+    line-height: 110%;
     margin: 0;
     }
-.viewLine {
-    text-align: center;
-    }
-.viewLine {
-    font-size: 93%;
+.viewLine pre {
+    text-align: right;
     }
 .viewAuthors {
     color: #999999;
-}
+    }
 
=== modified file 'loggerhead/static/javascript/diff.js'
--- loggerhead/static/javascript/diff.js	2009-03-31 21:11:38 +0000
+++ loggerhead/static/javascript/diff.js	2012-02-22 08:57:20 +0000
@@ -54,14 +54,14 @@
     if (added.length > removed.length) {
       for (var j = common; j < added.length; j++) {
         a = added[j];
-        a.insertBefore(a.create('<div class="blank">&nbsp;</div>'), a.query('.lineNumber.second'));
+        a.insertBefore(a.create('<div class="code blank">&nbsp;</div>'), a.query('.lineNumber.second'));
       }
     }
     else if (added.length < removed.length) {
       for (var j = common; j < removed.length; j++) {
         r = removed[j];
         r.insertBefore(r.query('.code.delete'), r.query('.lineNumber.second'));
-        r.insertBefore(r.create('<div class="blank">&nbsp;</div>'), r.query('.clear'));
+        r.insertBefore(r.create('<div class="code blank">&nbsp;</div>'), r.query('.clear'));
       }
     }
     added.length = 0;
 
=== modified file 'loggerhead/templates/view.pt'
--- loggerhead/templates/view.pt	2012-02-02 07:42:24 +0000
+++ loggerhead/templates/view.pt	2012-02-22 08:57:20 +0000
@@ -71,7 +71,7 @@
 
       <div class="view">
         <table id="logentries">
-          <tal:rep tal:repeat="line contents">
+          <tal:rep tal:condition="annotated" tal:repeat="line contents">
             <tr>
               <td tal:condition="python:path('repeat/line/number') in annotated"
                   tal:define="anno python:annotated.get(path('repeat/line/number'), None)"
@@ -86,12 +86,23 @@
                 <span tal:content="python:anno.message"></span>
               </td>
               <td tal:attributes="class python:path('repeat/line/number') in annotated and 'viewLine first' or 'viewLine'">
-                <a tal:attributes="id string:L${repeat/line/number}; href string:#L${repeat/line/number}"
-                   tal:content="repeat/line/number">1</a>
+                <pre><a tal:attributes="id string:L${repeat/line/number}; href string:#L${repeat/line/number}"
+                   tal:content="repeat/line/number">1</a></pre>
               </td>
               <td class="viewCont"><pre tal:content="structure line"></pre></td>
             </tr>
           </tal:rep>
+          <tr tal:condition="not: annotated">
+            <td class="viewLine">
+              <pre><tal:blah repeat="line python:range(1, len(contents) + 1)"><a
+                 tal:attributes="id string:L${line}; href string:#L${line}"
+                 tal:content="line">1</a>
+              </tal:blah></pre>
+            </td>
+            <td class="viewCont">
+              <pre tal:content="structure python:''.join(contents)"></pre>
+            </td>
+            </tr>
         </table>
       </div>