Closed Bug 1203507 Opened 6 years ago Closed 6 years ago

[Spanish] AMO Page title larger than screen width

Categories

(addons.mozilla.org Graveyard :: Public Pages, defect)

Unspecified
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: vcarciu, Assigned: trishul.goel, Mentored)

Details

(Whiteboard: [good first bug])

Prerequisites:
Android device(Nexus 5, Android 5.1), Release firefox installed

Steps to reproduce:
1.Open Mp Stage on your device and observe homepage

Expected results:
Page title fits in the screen

Actual results:
Page title larger than screen width
 
Please see screencast for this bug: http://screencast.com/t/akePSvG0e7p

NOTES:
The title can be seen with horizontal scroll
Whiteboard: [good first bug]
Mentor: scolville
There's a few basic approaches to fix this. Muffinresearch which one would you recommend to someone who would take this on as a good first bug, shrink the text when it overflows? Any examples of us doing that you could think of?
Flags: needinfo?(scolville)
One of the easiest solutions is adding a horizontal ellipsis via CSS. (See demo [1]). But a downside of this can be the meaning of text content can be lost. We have code for this already [2]

2nd option would be to reduce the size of the text for the small viewport (possibly in conjunction with the ellipsis overflow solution). (This is probably the best blend of simplicity and practicality) 

Lastly another solution is to reduce the text-size dynamically, but this requires js (though we have already helper for this [3]). Additionally it can lead to in-consistency because the size of the heading will be different based on the length of the word.


[1] http://jsbin.com/vugunu/edit?html,css,output
[2] https://github.com/mozilla/olympia/blob/d8aef0b88a5fd20d4413a37807e9ae79c7602fa8/static/css/impala/lib.less#L135
[3] https://github.com/mozilla/olympia/blob/d8aef0b88a5fd20d4413a37807e9ae79c7602fa8/static/js/zamboni/truncation.js#L42
Flags: needinfo?(scolville)
Following is the fix with first solution
https://github.com/mozilla/olympia/pull/1151

I had to fix the width to use text-overflow.
Kindly review.
Assignee: nobody → trishul.goel
Status: NEW → ASSIGNED
Flags: needinfo?(scolville)
Thanks for the patch - there's some review comments on the PR.
Flags: needinfo?(trishul.goel)
Flags: needinfo?(scolville)
PR comment updated
Flags: needinfo?(trishul.goel)
Product: addons.mozilla.org → addons.mozilla.org Graveyard
https://github.com/mozilla/addons-server/commit/a61be13bfbefa8cc152e7f42db72f1d7f1b062cb
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.