Opened 8 years ago

Closed 4 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.

Subtickets

Attachments (3)

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

Download all attachments as: .zip

Change History (15)

comment:1 Changed 8 years ago by Christopher Allan Webber

Owner: set to Jef van Schendel
Status: newassigned

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

comment:2 Changed 7 years ago by Jiyda Mint Moussa

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.

Changed 7 years ago by Jiyda Mint Moussa

comment:3 Changed 7 years ago by Christopher Allan Webber

Owner: Jef van Schendel deleted
Status: assignedreview

comment:4 Changed 7 years ago by Christopher Allan Webber

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 Changed 5 years ago by Loic Dachary

Owner: Jiyda Mint Moussa deleted
Status: in_progressaccepted

comment:6 Changed 4 years ago by Matt

Owner: set to Matt
Status: acceptedin_progress

Changed 4 years ago by Matt

Attachment: desktop.jpg added

Screen shot of proposed option.

Changed 4 years ago by Matt

Attachment: mobile.jpg added

Screen shot of proposed option in mobile view

comment:7 Changed 4 years ago by Matt

Owner: Matt deleted
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 Changed 4 years ago by Boris Bobrov

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 Changed 4 years ago by Ben Sturmfels

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

comment:10 Changed 4 years ago by Ben Sturmfels

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

comment:11 Changed 4 years ago by Ben Sturmfels

Status: acceptedreview

comment:12 Changed 4 years ago by Ben Sturmfels

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.