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

Proposed by William Grant on 2012-02-22
Status: Merged
Approved by: Michael Hudson-Doyle on 2012-02-22
Approved revision: 472
Merged at revision: 470
Proposed branch: lp:~wgrant/loggerhead/pretty-view
Merge into: lp:loggerhead
Diff against target: 163 lines (+36/-35) 5 files modified
To merge this branch: bzr merge lp:~wgrant/loggerhead/pretty-view
Reviewer Review Type Date Requested Status
Loggerhead Reviewers 2012-02-22 Pending
Review via email: mp+94103@code.launchpad.net

Commit Message

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

Description of the Change

    - 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>.

To post a comment you must log in.
Robert Collins (lifeless) wrote :

+1

Preview Diff

1=== modified file 'NEWS'
2--- NEWS 2012-02-09 03:25:36 +0000
3+++ NEWS 2012-02-22 08:57:20 +0000
4@@ -59,6 +59,9 @@
5 non-existent file or revision.
6 (William Grant, #728209, #929275)
7
8+ - Fix diff and view page styling to be more compact and more easily
9+ copyable. (William Grant, #743295)
10+
11
12 1.18.1 [24Mar2011]
13 ------------------
14
15=== modified file 'loggerhead/static/css/diff.css'
16--- loggerhead/static/css/diff.css 2011-02-18 05:41:17 +0000
17+++ loggerhead/static/css/diff.css 2012-02-22 08:57:20 +0000
18@@ -68,17 +68,11 @@
19 color: #000;
20 font-size: 85%;
21 font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
22- line-height: 180%;
23- }
24-.blank {
25- float: left;
26- padding: 0 1%;
27 }
28 .unified .code {
29 width: 89%;
30 }
31-.sbs .code,
32-.blank {
33+.sbs .code {
34 width: 43%;
35 overflow: hidden;
36 }
37
38=== modified file 'loggerhead/static/css/view.css'
39--- loggerhead/static/css/view.css 2011-04-22 17:22:26 +0000
40+++ loggerhead/static/css/view.css 2012-02-22 08:57:20 +0000
41@@ -1,47 +1,40 @@
42 /*table*/
43 #logentries,
44-.viewRev,
45 .viewLine {
46 border: 1px solid #d2d2d2;
47-}
48+ }
49 .viewRev {
50 border-right: none;
51 white-space: nowrap;
52 width: 1px;
53 padding: .3em .6em;
54-}
55+ }
56 .viewComm,
57 .viewCont {
58 border: none;
59 }
60 .viewLine {
61 border-style: none solid none none;
62- width: 20px;
63- padding-left: .6em;
64- padding-right: .2em;
65 }
66 .viewLine.first {
67 border-style: solid solid none none;
68-}
69-.viewCont {
70- padding-left: .4em;
71- }
72-.viewLine,
73-.viewCont {
74- font-size: 116%;
75+ }
76+.viewCont {
77+ padding: 0.2em 0.5em;
78+ }
79+.viewLine {
80+ padding: 0.2em 0.2em;
81+ }
82+.viewLine pre,
83+.viewCont pre {
84 font-family: 'UbuntuBeta Mono', 'Ubuntu Mono', monospace;
85- line-height: 108%;
86- whitespace: pre;
87- }
88-.viewCont pre {
89+ font-size: 100%;
90+ line-height: 110%;
91 margin: 0;
92 }
93-.viewLine {
94- text-align: center;
95- }
96-.viewLine {
97- font-size: 93%;
98+.viewLine pre {
99+ text-align: right;
100 }
101 .viewAuthors {
102 color: #999999;
103-}
104+ }
105
106=== modified file 'loggerhead/static/javascript/diff.js'
107--- loggerhead/static/javascript/diff.js 2009-03-31 21:11:38 +0000
108+++ loggerhead/static/javascript/diff.js 2012-02-22 08:57:20 +0000
109@@ -54,14 +54,14 @@
110 if (added.length > removed.length) {
111 for (var j = common; j < added.length; j++) {
112 a = added[j];
113- a.insertBefore(a.create('<div class="blank">&nbsp;</div>'), a.query('.lineNumber.second'));
114+ a.insertBefore(a.create('<div class="code blank">&nbsp;</div>'), a.query('.lineNumber.second'));
115 }
116 }
117 else if (added.length < removed.length) {
118 for (var j = common; j < removed.length; j++) {
119 r = removed[j];
120 r.insertBefore(r.query('.code.delete'), r.query('.lineNumber.second'));
121- r.insertBefore(r.create('<div class="blank">&nbsp;</div>'), r.query('.clear'));
122+ r.insertBefore(r.create('<div class="code blank">&nbsp;</div>'), r.query('.clear'));
123 }
124 }
125 added.length = 0;
126
127=== modified file 'loggerhead/templates/view.pt'
128--- loggerhead/templates/view.pt 2012-02-02 07:42:24 +0000
129+++ loggerhead/templates/view.pt 2012-02-22 08:57:20 +0000
130@@ -71,7 +71,7 @@
131
132 <div class="view">
133 <table id="logentries">
134- <tal:rep tal:repeat="line contents">
135+ <tal:rep tal:condition="annotated" tal:repeat="line contents">
136 <tr>
137 <td tal:condition="python:path('repeat/line/number') in annotated"
138 tal:define="anno python:annotated.get(path('repeat/line/number'), None)"
139@@ -86,12 +86,23 @@
140 <span tal:content="python:anno.message"></span>
141 </td>
142 <td tal:attributes="class python:path('repeat/line/number') in annotated and 'viewLine first' or 'viewLine'">
143- <a tal:attributes="id string:L${repeat/line/number}; href string:#L${repeat/line/number}"
144- tal:content="repeat/line/number">1</a>
145+ <pre><a tal:attributes="id string:L${repeat/line/number}; href string:#L${repeat/line/number}"
146+ tal:content="repeat/line/number">1</a></pre>
147 </td>
148 <td class="viewCont"><pre tal:content="structure line"></pre></td>
149 </tr>
150 </tal:rep>
151+ <tr tal:condition="not: annotated">
152+ <td class="viewLine">
153+ <pre><tal:blah repeat="line python:range(1, len(contents) + 1)"><a
154+ tal:attributes="id string:L${line}; href string:#L${line}"
155+ tal:content="line">1</a>
156+ </tal:blah></pre>
157+ </td>
158+ <td class="viewCont">
159+ <pre tal:content="structure python:''.join(contents)"></pre>
160+ </td>
161+ </tr>
162 </table>
163 </div>
164

Subscribers

People subscribed via source and target branches