Opened 12 years ago

Closed 8 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 11 years ago.
desktop.jpg (144.2 KB ) - added by Matt 8 years ago.
Screen shot of proposed option.
mobile.jpg (51.8 KB ) - added by Matt 8 years ago.
Screen shot of proposed option in mobile view

Download all attachments as: .zip

Change History (15)

comment:1 by Christopher Allan Webber, 12 years ago

Owner: set to Jef van Schendel
Status: newassigned

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

comment:2 by Jiyda Mint Moussa, 11 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, 11 years ago

comment:3 by Christopher Allan Webber, 11 years ago

Owner: Jef van Schendel removed
Status: assignedreview

comment:4 by Christopher Allan Webber, 11 years ago

Cc: Jiyda Mint Moussa added
Owner: set to Jiyda Mint Moussa
Status: reviewin_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, 9 years ago

Owner: Jiyda Mint Moussa removed
Status: in_progressaccepted

comment:6 by Matt, 8 years ago

Owner: set to Matt
Status: acceptedin_progress

by Matt, 8 years ago

Attachment: desktop.jpg added

Screen shot of proposed option.

by Matt, 8 years ago

Attachment: mobile.jpg added

Screen shot of proposed option in mobile view

comment:7 by Matt, 8 years ago

Owner: Matt removed
Status: in_progressreview

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, 8 years ago

Status: reviewaccepted

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, 8 years ago

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

comment:10 by Ben Sturmfels, 8 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, 8 years ago

Status: acceptedreview

comment:12 by Ben Sturmfels, 8 years ago

Resolution: fixed
Status: reviewclosed

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

Note: See TracTickets for help on using tickets.