User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:184.108.40.206) Gecko/2009060309 Ubuntu/9.04 (jaunty) Firefox/3.0.11 Build Identifier: When a user browses themes on a AMO, and then resizes a browser(it must not be maximized), theme titles overlaps a downloads number. Screencast of this bug in action can be found at (http://www.mozilla-srbija.org/ext/amo-titles-resize.ogv). Reproducible: Always Steps to Reproduce: 1. Open https://addons.mozilla.org/en-US/firefox/browse/type:2/cat:all?sort=popular 2. Resize a window (it mustn`t be maximized) 3. Take a look at theme titles and download number text Actual Results: Theme title and downloads number lines overlaps. Expected Results: Theme title and downloads number lines should not overlap. This bug was found by :mauke
I`ve added a patch to this CSS.
Attachment #385941 - Flags: review?(fligtar)
Attachment #385941 - Flags: review?(fligtar) → review?(clouserw)
clouserw: As per IRC, second patch doesn`t include the changes made in first one, so if you push first and than second one, problems solved in first one will be problems again.
I`ve added another patch.
Attachment #386801 - Flags: review?(clouserw) → review-
Your patch does prevent overlap, but on small screens (which was the issue here) it just pushes the words out of the container. screenshot attached
Neil, do you have any ideas for this?
Assignee: nobody → neilio
When I add max-height: 100%;(or similiar) to my patch, then we have a problem with the thumbs description which goes in the 4th line. Then, if the next thumb in that row has it`s description with number of downloads in 3 lines, the first thumb from bottom row will stick to the right side of the thumb with 4 lines of description. So the only reasonable solution(to me at least) is to separate thumbs in rows, and then we could add float: left; property to a div that contains a whole row(4 thumbs).
I took a look at this - I can make this better, but because of space limitations it completely changes how the metadata is laid out: http://snaps.beatnikpad.com/themes-fix-20090819-180017.png Also note that the height of the individual theme thumb has to be fixed otherwise content shifts all over the place. Milos' suggestion is probably the best solution on top of what's already here - separate each row into its own div and then set the height of each thumb box to min-height: 220px.
clouserw: What did you want to do with this? We can commit the changes as is and live with the alignment issues for screens under 900px wide and look at updating the PHP for a later bug, or I can work with someone who can make the required PHP changes. I'd not a PHP hacker (at least you don't want me hacking in there) so I need someone else's help to really fix this correctly.
I'll wrap the individual lines in <ul>s, let's see if that works well for us.
Assignee: neilio → fwenzel
Neilio: Please add a patch fixing the CSS issues -- I can add the per-line <ul>s then.
Assignee: fwenzel → neilio
Here's a patch that makes the required changes - it needs the <ul> changes to the HTML to properly work, though -- without that change the layout will shift like crazy.
Attachment #395721 - Flags: review? → review?(fwenzel)
clouserw: I did some testing, and that min-width idea won't fly as it's too invasive -- too many items need to be changed to make it work. Let's go with this for now and once that php change is in this should at least handle narrow widths a bit better.
Comment on attachment 395721 [details] [diff] [review] Patch that makes the required CSS changes Looks good! Committed to r49674, along with making one <ul> per line.
Attachment #395721 - Flags: review?(fwenzel) → review+
Here's a final, post-fix screenshot.
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Verified on https://preview.addons.mozilla.org/en-US/firefox/browse/type:2/cat:all?sort=popular Thanks guys.
Status: RESOLVED → VERIFIED
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.