TACC / Core-CMS

The Core CMS codebase used by TACC Portals.
https://cep.tacc.utexas.edu
2 stars 1 forks source link

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

Closed wesleyboar closed 1 week ago

wesleyboar commented 1 week ago

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](https://docs.django-cms.org/en/release-3.11.x/reference/navigation.html#properties-of-navigation-nodes-in-templates) 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

Changes

To breadcrumbs template:

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 after

https://github.com/TACC/Core-CMS/assets/62723358/35ec039b-6fdf-4871-9509-f5a3b2bcbbf1

https://github.com/TACC/Core-CMS/assets/62723358/fe661319-1102-462e-9d9f-ac11e7ad8f6a