Inputs and Text areas should have the same number of columns on the Report Edit page

[Ryan J Ollos <ryan.j.ollos@…>]

Simple patch in ​114561bf results in the following:

[Christian Boos]

Looks much better indeed, thanks!

[Ryan J Ollos <ryan.j.ollos@…>]

This isn't working as well as I had hoped because apparently a certain number of cols for an input element is not the same width as the same number of cols for a textarea across all browsers.

The patch in ​238ca84a makes the following changes:

• Centers the #content div (like on the ticket page).
• Sets the width of the #content div to be 645px. This value was chosen because it was the width of the textarea in Chromium 25 when the number of cols was set to 78.
• Sets the width of the input and textarea elements to be 100%.
• Removes the cols attribute from the input and textarea elements.

Now it looks quite a bit better I think!:

[Ryan J Ollos <ryan.j.ollos@…>]

If this change looks good, then it might make sense to do similarly (i.e. center and limit width) for the Milestone Edit page.

[Ryan J Ollos <ryan.j.ollos@…>]

There is a problem with my patch. It causes the content of the Available Reports page to also be centered and have a max width of 645px. This can mostly be fixed by changing the selector from #content.report to its child #edit_report, however when that is done the h1 is not centered, and there is no way to uniquely select this h1 without adding a class or id to it or an enclosing element.

I can think of several fairly equivalent ways to fix this issue.

1. Add an edit class to the #content div so that we can select the div on the edit page without selecting the div on the view page.
2. Add a centered class to the #content div, which effectively does the same thing as the edit class, but we also refactor the ticket page to use this class.
3. Wrap the h1 and form#edit_report in a div.

(1) seems like the better solution to me.

[Christian Boos]

(1) is fine with me.

The problem with a centered class is that if people don't like / can't use a centered style, they'll have to create CSS rules for .centered which will be anything but centered…

[Ryan J Ollos <ryan.j.ollos@…>]

In ​3ef54a8d: Add an edit class to the enclosing div on the report edit page and modify the CSS rules for centering the div on the report edit page so that the report view page isn't also centered. Make the report edit div to be the same width (58 em) as the ticket edit div

[Jun Omae]

Looks good! However it has three failures in functional tests. In XHTML, the cols attribute of textarea is not optional.

...
TwillAssertionError:
# Element textarea does not carry attribute cols
# URL: http://127.0.0.1:8410/report?action=new
# Line 77, column 3
...
-------
Ran 127 tests in 592.780s

FAILED (failures=3)
make: *** [functional-test] Error 1

[Ryan J Ollos <ryan.j.ollos@…>]

Replying to jomae:

Looks good! However it has three failures in functional tests.

Thanks, I'll fix those issues and submit a post a new branch with a cleaner commit history.

[Ryan J Ollos <ryan.j.ollos@…>]

Issue from comment:8 fixed and changes rebased against 1.0-stable in ​t11106.2. Functional tests in trac/ticket/tests/functional.py pass now after commenting out all the entries including and after RegressionTestTicket4630a, due to the issue described in #11176.

[Ryan J Ollos]

I no longer feel that these are the right CSS changes to make. It looks like width: 100% for input and textarea isn't effective for making the elements the same width since we need to take into account all of the dimensions of the bounding box.

[Jun Omae]

I no longer feel that these are the right CSS changes to make. It looks like width: 100% for input and textarea isn't effective for making the elements the same width since we need to take into account all of the dimensions of the bounding box.

I think that using box-sizing: border-box would be simple to make the elements the same width. See log:jomae.git:t11106.3.

[Ryan J Ollos]

The element width looks good. Tested:

• Windows 7
  • IE 11
  • Chrome 32
  • Firefox 24 (Waterfox)
  • Opera 18
• Ubuntu 13.04
  • Chromium 31
  • Firefox 26
  • Opera 12.16

I do think we should consider limiting the width though (similar to the ticket form),

trac/htdocs/css/report.css

@@ -82 +82 @@
 #report-descr { margin: 0 2em; font-size: 90% }
 #report-notfound { margin: 2em; font-size: 110% }
 
+#content.report.edit {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 58em;
+}
 #content.report input#title, #content.report textarea.trac-resizable {
  -moz-box-sizing: border-box;
  box-sizing: border-box;

trac/ticket/templates/report_edit.html

@@ -11 +11 @@
   </head>
 
   <body>
-    <div id="content" class="report">
+    <div id="content" class="report edit">
 
       <h1>${_('New Report') if action == 'new' else report.title}</h1>
       <form action="${href.report(report.id)}" method="post" id="edit_report">

[Jun Omae]

I don't think the edit form of report needs the narrow width and center-aligned. The view and edit form of ticket have the narrow width and center-aligned, that is consistent. However, the view of report is left aligned. When come and go between the view and edit form, my eyes would be moved between left side and center of the screen.

[Ryan J Ollos]

Since we don't have agreement on the width and alignment and there have been no other inputs, we could:

• Apply the changes to 1.0-stable that keep the form left aligned but don't change the width: log:rjollos.git:t11106.4
• Apply your other changes on the trunk, which would allow time for more user feedback before a major release (i.e. don't apply log:rjollos.git:1b587eace on the trunk).

[Ryan J Ollos]

I pushed the changes we agreed on, to 1.0-stable in [12796] and merged to trunk in [12797]. Push the other change so that the elements span the width of the page if you would like, but please do it on the trunk so we can get feedback.

[Ryan J Ollos]

It looks like we can simplify the CSS in [12796] a little bit:

trac/htdocs/css/report.css

@@ -82 +82 @@
 #report-descr { margin: 0 2em; font-size: 90% }
 #report-notfound { margin: 2em; font-size: 110% }
 
-#content.report input#title, #content.report textarea.trac-resizable {
+#content.report input#title, #content.report .trac-resizable {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
-}
-#content.report input#title, #content.report div.trac-resizable,
-#content.report textarea.trac-resizable {
  width: 100%;
 }
 #content.report.edit form {

This results in box-sizing: border-box being applied to div.trac-resizable, but it doesn't change the layout at all as far as I can tell.

[Ryan J Ollos]

Replying to rjollos:

It looks like we can simplify the CSS in [12796] a little bit:

This code was refactored in #11678.