Launchpad itself

Merge lp:~beuno/launchpad/finally-fix-forms into lp:launchpad/db-devel

  1. finally-fix-forms
  2. Merge into db-devel
Proposed by Martin Albisetti
Status: Merged
Approved by: Curtis Hovey
Approved revision: no longer in the source branch.
Merged at revision: not available
Proposed branch: lp:~beuno/launchpad/finally-fix-forms
Merge into: lp:launchpad/db-devel
Diff against target: None lines
To merge this branch: bzr merge lp:~beuno/launchpad/finally-fix-forms
Reviewer Review Type Date Requested Status
Curtis Hovey (community) code Approve
Review via email: mp+9427@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Martin Albisetti (beuno) wrote :

This branch changes form layouts so the labels are always on top of the fields and everything is left-aligned.

To see it in action, go to any page with a form, like say: https://launchpad.dev/firefox/+edit

Revision history for this message
Curtis Hovey (sinzui) wrote :

Hi Martin.

Thanks for address the radio button positioning that we discussed in IRC. I think you have solved the general issue of positioning control labels.

I think there is a discrepancy between the presentation of the labels and the presentation of similar layouts in UI 3.0. I see that the term/label is always bold in the project and user designs, with the subordinate information in normal. I expect the labels in the forms to be bold for the same reason. This can be done via CSS, or by switching back to a <th>.

If you do not want the labels bold, can you explain why they are different from when the information is show in the page?

review: Needs Fixing
Revision history for this message
Curtis Hovey (sinzui) wrote :

Thanks for taking my bold suggestion under consideration

review: Approve (code)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'lib/canonical/launchpad/icing/style.css'
2--- lib/canonical/launchpad/icing/style.css 2009-07-16 04:17:24 +0000
3+++ lib/canonical/launchpad/icing/style.css 2009-07-28 22:44:12 +0000
4@@ -407,9 +407,9 @@
5 margin-right: 0.5em;
6 }
7 button{padding:0;}
8-input.urlTextType {width: 100%;}
9+input.urlTextType {width: 40em;}
10 .fieldRequired, .fieldOptional {color: #999;}
11-.formHelp {margin-top: 0.2em; margin-bottom: 0.5em; color: #777;}
12+.formHelp {margin: 0.2em 0 0.5em 0.2em; color: #777;}
13 /* Hack to add breathing room to bug status forms: */
14 table.listing div.field>table {margin-top: 0.5em;}
15 table.listing div.field>label, table.listing div.field>div>label,
16
17=== modified file 'lib/canonical/launchpad/pagetests/standalone/xx-form-layout.txt'
18--- lib/canonical/launchpad/pagetests/standalone/xx-form-layout.txt 2009-06-12 16:36:02 +0000
19+++ lib/canonical/launchpad/pagetests/standalone/xx-form-layout.txt 2009-07-29 14:18:29 +0000
20@@ -21,10 +21,8 @@
21 >>> print content
22 <...
23 <tr>
24- <th>
25- <label for="field.name">Name:</label><br />
26- </th>
27- <td>
28+ <td colspan="2">
29+ <label for="field.name">Name:</label>
30 <div>
31 <input ... name="field.name" ... />
32 </div>
33@@ -38,11 +36,9 @@
34 >>> print content
35 <...
36 <tr>
37- <th>
38- <label for="field.contactemail">Contact Email Address:</label><br />
39+ <td colspan="2">
40+ <label for="field.contactemail">Contact Email Address:</label>
41 <span class="fieldRequired">(Optional)</span>
42- </th>
43- <td>
44 <div>
45 <input ... id="field.contactemail" ... />
46 </div>
47@@ -99,8 +95,7 @@
48 >>> print content
49 <...
50 <tr>
51- <th></th>
52- <td width="100%">
53+ <td colspan="2">
54 ...
55 <input ... name="field.official_rosetta" type="checkbox" ... />
56 <label for="field.official_rosetta">Translations...</label>
57
58=== modified file 'lib/canonical/launchpad/templates/launchpad-form.pt'
59--- lib/canonical/launchpad/templates/launchpad-form.pt 2009-07-17 17:59:07 +0000
60+++ lib/canonical/launchpad/templates/launchpad-form.pt 2009-07-28 19:12:57 +0000
61@@ -45,7 +45,7 @@
62 metal:define-slot="extra_top"
63 tal:replace="nothing">
64 <div>Extra top</div>
65- <div><input type="text" style="width:100%" /></div>
66+ <div><input type="text"/></div>
67 </div>
68
69 <metal:widgets metal:define-slot="widgets">
70@@ -61,7 +61,7 @@
71 metal:define-slot="extra_bottom"
72 tal:replace="nothing">
73 <div>Extra bottom</div>
74- <div class="field"><input type="text" style="width:100%" /></div>
75+ <div class="field"><input type="text" /></div>
76 </div>
77
78 </div>
79@@ -99,13 +99,13 @@
80 tal:condition="python: view.isSingleLineLayout(field_name)"
81 tal:attributes="class error_class"
82 >
83- <th tal:condition="display_label|widget/display_label|python:True">
84+ <td colspan="2">
85+ <tal:block tal:condition="display_label|widget/display_label|python:True">
86 <label tal:attributes="for widget/name"
87- tal:content="string:${widget/label}:">Label</label><br />
88+ tal:content="string:${widget/label}:">Label</label>
89 <span tal:condition="show_optional"
90 class="fieldRequired">(Optional)</span>
91- </th>
92- <td>
93+ </tal:block>
94 <div>
95 <input tal:replace="structure widget" />
96 </div>
97@@ -129,7 +129,6 @@
98 tal:content="string:${widget/label}:">Label:</label>
99 <span tal:condition="show_optional"
100 class="fieldRequired">(Optional)</span>
101-
102 </tal:showlabel>
103 <div
104 tal:condition="error"
105@@ -137,7 +136,7 @@
106 class="message"
107 >Error message</div>
108 <div tal:content="structure widget">
109- <input type="text" style="width: 100%" />
110+ <input type="text" />
111 </div>
112 <p class="formHelp"
113 tal:condition="widget/hint"
114@@ -147,8 +146,7 @@
115 </tr>
116 </tal:block>
117 <tr tal:condition="python: view.isCheckBoxLayout(field_name)">
118- <th></th>
119- <td tal:attributes="class error_class" width="100%">
120+ <td tal:attributes="class error_class" colspan="2">
121 <input type="checkbox" tal:replace="structure widget" />
122 <label tal:attributes="for widget/name"
123 tal:content="widget/label">Label</label>
124
125=== modified file 'lib/canonical/widgets/templates/date.pt'
126--- lib/canonical/widgets/templates/date.pt 2009-07-17 17:59:07 +0000
127+++ lib/canonical/widgets/templates/date.pt 2009-07-28 22:44:12 +0000
128@@ -5,7 +5,7 @@
129 omit-tag="">
130 <input size="10" type="text" class="yui2-calendar"
131 tal:attributes="name view/name; id view/name;
132- value view/formvalue;
133+ value view/formvalue;
134 disabled view/disabled_flag" />
135 <tal:daterange condition="view/daterange">
136 <span style="display:none;"
137
138=== modified file 'lib/canonical/widgets/templates/datetime.pt'
139--- lib/canonical/widgets/templates/datetime.pt 2009-07-17 17:59:07 +0000
140+++ lib/canonical/widgets/templates/datetime.pt 2009-07-28 22:44:12 +0000
141@@ -5,7 +5,7 @@
142 omit-tag="">
143 <input size="19" type="text" class="yui2-calendar withtime"
144 tal:attributes="name view/name; id view/name;
145- value view/formvalue;
146+ value view/formvalue;
147 disabled view/disabled_flag" />
148 <tal:display_zone condition="view/display_zone">
149 <span> in time zone: <tal:tz replace="view/time_zone_name" />
150
151=== modified file 'lib/canonical/widgets/templates/passwordchange.pt'
152--- lib/canonical/widgets/templates/passwordchange.pt 2009-07-17 17:59:07 +0000
153+++ lib/canonical/widgets/templates/passwordchange.pt 2009-07-28 22:44:12 +0000
154@@ -2,13 +2,11 @@
155 Note that we don't use view/_getFormValue to fill in the value
156 for security reasons
157 </tal:comment>
158-<table>
159+<table style="margin-top:1em;">
160 <tr>
161- <th>
162+ <td colspan="2">
163 <label tal:content="string: ${view/label}:"
164- tal:attributes="for view/name;">Password:</label>
165- </th>
166- <td>
167+ tal:attributes="for view/name;">Password:</label><br />
168 <input type="password" value="" tal:attributes="
169 name view/name;
170 id view/name;
171@@ -20,12 +18,10 @@
172 </td>
173 </tr>
174 <tr>
175- <th>
176+ <td colspan="2">
177 <label tal:attributes="for string:${view/name}_dupe;">
178 Retype the password:
179- </label>
180- </th>
181- <td>
182+ </label><br />
183 <input type="password" value="" tal:attributes="
184 name string:${view/name}_dupe;
185 id string:${view/name}_dupe;

Subscribers

People subscribed via source and target branches

to status/vote changes: