Opened 14 years ago

Closed 10 years ago

#592 closed defect (fixed)

Poor overflow handling for thumbnail titles

Reported by: Sergey "Shnatsel" Davidoff Owned by:
Priority: major Milestone:
Component: graphic design/interface Keywords:
Cc: Jiyda Mint Moussa Parent Tickets:

Description

The default theme has poor overflow handling in thumbnail titles, at least in Firefox 18 and Chromium 20. Screenshot: ​http://pix.toile-libre.org/upload/original/1357821869.png

In CSS3 browsers this can be avoided by using "text-overflow: ellipsis", see ​http://dev.w3.org/csswg/css3-ui/#text-overflow

In older browsers, perhaps "text-overflow: ellipsis" can be emulated using a JavaScript snippet. If JS is not available either, the text should be at least cut off properly.

Attachments (3)

592_thumnail_title_overflow.png​ (207.4 KB ) - added by Jiyda Mint Moussa 13 years ago.
desktop.jpg​ (144.2 KB ) - added by Matt 10 years ago.
Screen shot of proposed option.
mobile.jpg​ (51.8 KB ) - added by Matt 10 years ago.
Screen shot of proposed option in mobile view

Download all attachments as: .zip

Change History (15)

comment:1 by Christopher Allan Webber, 14 years ago

Owner: set to Jef van Schendel
Status: new → assigned

Thanks for this ticket! Assigning to schendje so he can give feedback.

comment:2 by Jiyda Mint Moussa, 13 years ago

I fixed this issue in #664 by simply modifying the css. The commit link is

​https://gitorious.org/~jiyda/mediagoblin/jiydas-mediagoblin/commit/a4164ea3029d12b94c81389f265afb791131b3f3

I also attached a screenshot of the results, tested with firefox and chromium.

by Jiyda Mint Moussa, 13 years ago

Attachment: 592_thumnail_title_overflow.png​ added

comment:3 by Christopher Allan Webber, 13 years ago

Owner: Jef van Schendel removed
Status: assigned → review

comment:4 by Christopher Allan Webber, 13 years ago

Cc: Jiyda Mint Moussa added
Owner: set to Jiyda Mint Moussa
Status: review → in_progress

There's a lot of changing of float: left to float: right and etc... I'm a bit confused by that, could you help me figure out what that is? It looks like it flips a lot of things around... the dropdown menu is now on the right, for instance? I'm not sure why that was done... could you help by explaining to me? :)

Thanks! I'm passing this back to you in the meanwhile...

comment:5 by Loic Dachary, 11 years ago

Owner: Jiyda Mint Moussa removed
Status: in_progress → accepted

comment:6 by Matt, 10 years ago

Owner: set to Matt
Status: accepted → in_progress

by Matt, 10 years ago

Attachment: desktop.jpg​ added

Screen shot of proposed option.

by Matt, 10 years ago

Attachment: mobile.jpg​ added

Screen shot of proposed option in mobile view

comment:7 by Matt, 10 years ago

Owner: Matt removed
Status: in_progress → review

This will fix the problem of the text going out of the screen, However if you were to write in one continuous word that will still go out. If the file name was aaaaaaaaaaaaaaaaaaaaaa for example.

The code can be found at ​https://github.com/Dealsy/mediagoblin

comment:8 by Boris Bobrov, 10 years ago

Status: review → accepted

Sorry, but i cannot review that. There is one big commit that contains all mediagoblin files.

Could you please checkout mediagoblin repo, then make a commit with your change only and push it somewhere?

comment:9 by Ben Sturmfels, 10 years ago

Dealsy has fixed this bad commit in ​https://github.com/Dealsy/mediagoblin/tree/thumbnail - ready for review.

comment:10 by Ben Sturmfels, 10 years ago

I've tested this patch, and it improves the thumbnail layout significantly when a title is longer than a single line.

comment:11 by Ben Sturmfels, 10 years ago

Status: accepted → review

comment:12 by Ben Sturmfels, 10 years ago

Resolution: → fixed
Status: review → closed

Dealsy, your change was merged in commit ​8c1728e. Thanks very much for your contribution!

Note: See TracTickets for help on using tickets.