Apply hint/help classes more widely

[Ryan J Ollos]

I like the styling of the hint and help classes, and have noticed some places that I think it could be appropriately applied.

Example of help class:

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

Here is an example of the kind of changes I had in mind:

• ​bef1f02e: Applied the hint class to text on the Report Edit page.
• ​7b72499e: Separated the label text and hint text, as I think this will allow theme authors to locate the hint independent from the placement of the label, without breaking translations.

Here is the result - the two lines to the right of the labels have a new styling:

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

Here is a screen capture of the current state of things, for comparison:

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

• ​61a40d63: Default padding for span.hint is 0, and padding of 1em for span.hint used on the Admin forms is set in admin.css..
• ​5ae38851: Moved p.help class from admin.css to trac.css, so that it can be used more widely within Trac.

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

I'll wait for feedback on the changes before coming up with a patch to implement these changes throughout Trac, but on first review, here is where changes would need to be made:

• (you may use WikiFormatting here): on the following pages:
  • Milestone Edit
  • Ticket
  • Admin Ticket System and Admin Manage Repositories
• Milestone Edit: Format: MM/DD/YYYY hh:mm:ss a should be wrapped in a span with class hint (like the Admin Milestone Edit page), rather than being wrapped in em, and the CSS rule for #edit em can be removed.

[Peter Suter]

Using the hint styles for this sounds good to me. Visually I also like the label[for=comment] { float: right } in ticket.css.

[Ryan J Ollos]

Narrowing focus for milestone:1.2. Please move ticket to milestone:1.2 if you intend to fix it.

[Ryan J Ollos]

I implemented the comment:8 suggestion: [5f04fe87f/rjollos.git].

[Ryan J Ollos]

I wrapped the text in a label so that clicking on the hint puts focus on the textarea. A span could be used if there are any problems with having multiple labels for each textarea. According to the HTML spec at least it is okay, but maybe there is an accessibility or other concern that I'm not aware of.

[Jun Omae]

Replying to Ryan J Ollos:

I implemented the comment:8 suggestion: [5f04fe87f/rjollos.git].

Looks good to me but two lines is required when [trac] wiki_toolbars is disabled. Before the changes, one line was required.

[Ryan J Ollos]

Thanks, I forgot about that config option. I'll investigate a fix.

[Ryan J Ollos]

[c213a08d6/rjollos.git] changes the label to be a block element. Additional styling improvements in [2df0ce7ce/rjollos.git].

[Ryan J Ollos]

I'm going to iterate on these changes some more. Running the latest (r16177) on t.e.o, which includes #12875, the hint collides with the toolbar:

[Ryan J Ollos]

It seems to be much simpler to move the hint to the lower corner of the textarea, and I think it will behave better with themes like the one on t.e.o and with varying screen widths.

log:rjollos.git:t11112_hint_help.2

[Jun Omae]

Replying to Ryan J Ollos:

It seems to be much simpler to move the hint to the lower corner of the textarea, and I think it will behave better with themes like the one on t.e.o and with varying screen widths.

log:rjollos.git:t11112_hint_help.2

It looks simple and good to me. I didn't think .css('display', 'block') in wikitoolbar.js at rjollos.git@t11112_hint_help is good.

However, I think we should use text-align: right rather than float: right in label.trac-textarea-hint like #help.

[Ryan J Ollos]

Replying to Jun Omae:

However, I think we should use text-align: right rather than float: right in label.trac-textarea-hint like #help.

That's a good idea. It fixes the vertical margin on the report edit page.

[Ryan J Ollos]

Committed to trunk in r16179.