Breadcrumbs for add-ons with lengthy names look awkward

VERIFIED FIXED in 5.12.3

Status

P4
trivial
VERIFIED FIXED
9 years ago
3 years ago

People

(Reporter: krupa.mozbugs, Assigned: chenba)

Tracking

Details

(Whiteboard: [z], URL)

Attachments

(3 attachments, 1 obsolete attachment)

(Reporter)

Description

9 years ago
Created attachment 447238 [details]
screenshot

steps to reproduce:
Notice the breadcrumb for the add-on-https://preview.addons.mozilla.org/en-US/firefox/addon/9412/

observed behavior:
Breadcrumbs for add-ons with lengthy names look awkward.See screenshot.This would look worse once we add breadcrumbs to EULA and versionHistory pages
We should truncate long add-on names with an ellipsis in breadcrumbs. A little trail of breadcrumbs within breadcrumbs, if you will.

Let's say 40 characters.
Whiteboard: [z][ddn] → [z]
Target Milestone: 5.11 → 5.11.1
Priority: -- → P4
Edmund, want to check this out?  Looks like jinja has a truncate function:

http://jinja.pocoo.org/2/documentation/templates
Assignee: nobody → ewong
Target Milestone: 5.11.1 → 5.11.2
Status: NEW → ASSIGNED
Created attachment 450657 [details] [diff] [review]
Shortened addon description in the addon breadcrumb up to the 40th character and then used ellipses
Attachment #450657 - Flags: review?(clouserw)
Comment on attachment 450657 [details] [diff] [review]
Shortened addon description in the addon breadcrumb up to the 40th character and then used ellipses


> {% block content %}
>-{{ breadcrumbs([(addon.type.get_url_path(), amo.ADDON_TYPES[addon.type_id]), (None, addon.name)]) }}
>+{% set addonname = "%s" % addon.name %}

jinja has the |str filter for this.

>+{% set addonname = addonname | truncate(40, True, '...') %}

You only need to pass in the length; the other arguments can be left with their defaults.

>+{{ breadcrumbs([(addon.type.get_url_path(), amo.ADDON_TYPES[addon.type_id]), (None, addonname )]) }}

It's slightly cleaner to use a {% with %} so your new variable is only in a small scope.

{% with name=addon.name|str|truncate(40) %}
  {{ breadcrumbs(...) }}
{% endwith %}
Attachment #450657 - Flags: review?(clouserw)
Attachment #450657 - Flags: review-
Created attachment 450797 [details] [diff] [review]
Shortened addon description in the addon breadcrumb up to the 40th character and then used ellipses (v2)
Attachment #450657 - Attachment is obsolete: true
Attachment #450797 - Flags: review?(clouserw)
Attachment #450797 - Flags: review?(clouserw) → review+
Thanks!  I made a couple slight adjustments to bring it up to to date with the code.  http://github.com/jbalogh/zamboni/commit/9686298a9dd5e17a2c919e96c40be515624fadb6
Status: ASSIGNED → RESOLVED
Last Resolved: 9 years ago
Resolution: --- → FIXED
So, it occurs to me after the fact :-/ that this will only work on single add-on pages and not any of the sub pages, etc.  Instead of the single fix in the patch above, we should edit apps/amo/helpers.py:breadcrumbs() to add a default truncate=40 kwarg and have it affect all portions of the breadcrumbs.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Target Milestone: 5.11.2 → 5.11.3
Status: REOPENED → ASSIGNED
Target Milestone: 5.11.3 → ---
stealing from ewong!
Assignee: ewong → chenba
Severity: normal → trivial
Target Milestone: --- → 5.12.3
looks good, please land
(Assignee)

Comment 11

8 years ago
Now in jbalogh/master: https://github.com/jbalogh/zamboni/commit/00efa1df3e279fa6a99a8e59827881fbd226bf1b
Status: ASSIGNED → RESOLVED
Last Resolved: 9 years ago8 years ago
Resolution: --- → FIXED
(Reporter)

Comment 13

8 years ago
Created attachment 489917 [details]
post-fix screenshot
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.