Ticket #8899 (closed defect: fixed)

Opened 8 years ago

Last modified 8 years ago

Huge sidebar if the title of an object doesn't wrap

Reported by: jenn Owned by: jccooper
Priority: medium Milestone: Module Edit Workflow - MyCNX Dashboard
Component: Authoring Environment Version: Dev
Severity: minor Keywords:
Cc: maxwell System Area: Authoring
Primary Skill: Templating
Site URL:
Suppress email to reporter: no

Description

Since names of content objects are user-entered, they're vulnerable to being unwrappable. See /GroupWorkspaces/wg641/good/module.2007-02-14.6734492229

In this case, if we want the sidebar to work nicely, the object title needs to be truncated at a reasonable length. Ideally, we would only do this if it doesn't contain "wrap points" -- truncate the title "supercalifragilisticexpialidocious", but not "super cali fragil istic expi ali docious".

Actually, a smart "truncate if you can't wrap" method would be handy in quite a few places, like some of our more crowded tables.

Attachments

truncate-title-1.png (43.1 KB) - added by maxwell 8 years ago.
If just the navbar is truncated
truncate-title-2.png (29.2 KB) - added by maxwell 8 years ago.
If both the navbar and the "Last modified" portlet are truncated

Change History

Changed 8 years ago by ew2

  • status changed from new to assigned

Changed 8 years ago by jccooper

IE has a text-overflow CSS property, which would be very nice.

Changed 8 years ago by jccooper

  • status changed from assigned to working

Changed 8 years ago by jccooper

  • cc maxwell added
  • status changed from working to awaitinginput

...because we can do just a cut-off truncation in CSS if we put a max-width on the column (or other containing element) and an 'overflow:none' on the list items. This would be a lot more accurate than anything we can do server-side.

IE, of course, could get an ellipse in this case, but in FF it would just be cut off. Max, what do you think about this?

Changed 8 years ago by jccooper

It's in CSS3; http://www.css3.info/preview/text-overflow/ Note there's an Opera vendor property available, too.

Changed 8 years ago by jccooper

Changed 8 years ago by jccooper

Changed 8 years ago by maxwell

Max-width doesn't work in IE, so overflow is probably the best solution, but yeah FF wouldn't get the ellipsis. I will note, however, that if the title is really long like that anyway, in the middle column, where we don't truncate it, it might stretch the middle column and shorten the navbar (see screenshots I'll attach). Also, the "Last Modified" portlet should probably have the same truncating. (And "Recently Viewed" too? Since that module might be published as such.) BTW, we may need to do something similar for #3943.

I will also note that I wrote most of this before looking at the link in the previous comment.

Changed 8 years ago by maxwell

If just the navbar is truncated

Changed 8 years ago by maxwell

If both the navbar and the "Last modified" portlet are truncated

Changed 8 years ago by maxwell

  • status changed from awaitinginput to assigned

It looks like (though I haven't confirmed) the JS ellipsis thing will do what Jenn feared about putting on one line and ellipsizing "super cali fragil istic expi ali docious".

Changed 8 years ago by jccooper

Some of them certainly will, I think. I'll avoid those.

Changed 8 years ago by jccooper

  • status changed from assigned to testing

(In [27897]) When names in the editing sidebar, either module or workspace, are too long clip them instead of allowing the sidebar to expand. If the browser supports it, add an ellipsis to the overflowed word. Notably FF and Chrome don't yet handle this feature, but UI thinks that we can live with this case. In doing this I needed to use the column-one width several times in several places, so I restarted the use of the value in the property sheet, which had previously been dropped in favor of hard-coding. This ought to reduce the fragility of the change a little. Fix #8899

Changed 8 years ago by maxwell

(In [27909]) The really long titles were also causing havoc in the "Last Modified" portlet, so deal it with there, too. Also, copy the techniques into RhaptosContent?'s ploneCustom.css. Refs #8899.

Changed 8 years ago by jenn

  • status changed from testing to closed
  • resolution set to fixed

Confirmed by Phil. "used big word, many small words, and non-ascii words. Checked title during editing, online preview, last modified, left-hand bar." I do want to look at it myself eventually, but in the meantime this ticket can be closed.

Note: See TracTickets for help on using tickets.