fix: CMD-162 disable 2nd-level CMS breadcrumbs

[wesleyboar]

Overview

Disable 2nd-level breadcrumbs (because they always redirects to 3rd-level).

Details

TL;DR: Server-side menu node properties to programmatically disable links (remove href) are blank, so we use JavaScript to force-disable 2nd-level breadcrumbs. The styles merely tweak disabled breadcrumb appearance.

---

In Django CMS, a page added such that it appears in the navigation. On that page, the page will appear in the breadcrumbs as text, not a link, because it is the current page. Server-side code performs that. A parent page can be added such that it appears in the navigation as a dropdown link. The link only opens the menu of child pages; it does not navigate user to a page. Server-side code performs that. If one visits a child page, the parent page will appear in the breadcrumbs as a link. Clicking that link will take user to the parent page. Server-side code performs that. Because the page is not intended to be navigated to — and only was able to be navigated to via link after breadcrumbs were added — CMS admin has always left such pages blank or (more commonly) made them redirect to the most relevant child page. Server-side code allows that. To avoid user clicking such a parent page in the breadcrumbs, we would set the href to blank, but attempts to do this server-side fail because useful menu props are blank. So we use JavaScript to force-remove the href value. We add styles to tweak the appearance of a disabled breadcrumb link.

Related

• CMD-162
• integrates feat(tup-cms): breadcrumbs js snippet to js module tup-ui#200
• mimics feat: DES-2806 cms breadcrumbs DesignSafe-CI/portal#1268

Changes

To breadcrumbs template:

• added style tag
• added script tag

Testing

1. Open https://localhost:8000/.
2. Create/Visit a child page of a child page or a top-level page.
   ^{E.g. Home > Fruit > Tropical > Bananas.}
3. Verify
   • has "> Fruit >"
   • "Fruit" is not clickable
   • "Fruit" does not have link color
   • "Fruit" is opaque
   • "Fruit" is different color than current page in breadcrumbs

UI

before	after

before.mov

after.mov