Shanbady/topic channel page header fixes

[shanbady]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/4542 and https://github.com/mitodl/hq/issues/4540 and #1045

Description (What does it do?)

This PR fixes 3 sets of issues. Some style changes to the channel page banner make it more inline with the figma (see https://github.com/mitodl/hq/issues/4542 and https://github.com/mitodl/hq/issues/4540) and the addition of a configurable dark overlay to channel page banners (#1045)

Screenshots (if appropriate):

• Desktop screenshots

• Mobile width screenshots

How can this be tested?

1. checkout this branch and make sure units/offerors and topics are loaded

 python manage.py update_offered_by
 python manage.py backpopulate_resource_channels --overwrite --unit
 python manage.py update_platforms
 python manage.py update_topics

3. login and visit the various channel pages like http://od.odl.local:8063/c/unit/see http://od.odl.local:8063/c/unit/xpro http://od.odl.local:8063/c/unit/bootcamps http://od.odl.local:8063/c/department/history and http://od.odl.local:8063/c/topic/physics
4. validate that the pages look like the figma mocks:

desktop:

• https://www.figma.com/proto/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?page-id=107%3A2479&node-id=3774-68962&viewport=21%2C-3032%2C0.89&t=Hy7uaWCxhWB7TXwN-1&scaling=min-zoom&starting-point-node-id=2197%3A31345
• https://www.figma.com/proto/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?page-id=107%3A2479&node-id=2197-31446&viewport=21%2C-3032%2C0.89&t=Hy7uaWCxhWB7TXwN-1&scaling=min-zoom&starting-point-node-id=2197%3A31446

mobile:

• https://www.figma.com/proto/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?page-id=107%3A2479&node-id=4083-96092&viewport=21%2C-3032%2C0.89&t=Hy7uaWCxhWB7TXwN-1&scaling=min-zoom&starting-point-node-id=2197%3A31345
• https://www.figma.com/proto/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?page-id=107%3A2479&node-id=2197-31345&viewport=21%2C-3032%2C0.89&t=Hy7uaWCxhWB7TXwN-1&scaling=min-zoom&starting-point-node-id=2197%3A31345&show-proto-sidebar=1

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
9430286	Triggered	Generic Password	7a06117	docker-compose.yml	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[shanbady]

@Ferdi we have a way of preserving the ordering based off of the field which I can add to this pr.

I can also linkify the breadcrumbs but had some questions

• it wasnt clear from figma if there is a hover state on them
• at the moment the breadcrumb is not a shared component. for example the /units page has its own inline breadcrumb https://mitopen-rc.odl.mit.edu/units/ - if we want to fully standardize this into a shared component it might be worth a separate pr

[shanbady]

@Ferdi regarding the OCW in the nav - this appears to be a data issue. the nav text comes from what is supposed to be the "long title" but for the OCW offeror object it is "ocw".

[jkachel]

Looks better on desktop and the info box is better on mobile. Just a few more spacing things:

• On desktop, the info box has 16px padding where it should be 32px
• On mobile:
  • the space under the infobox is 64px where it should be 16px
  • the space above the infobox should be 48px (16+32 in the figma) where now it is 24px
  • the space above the breadcrumb is 48px where it should be 32px
  • the spacing between the elements in the "left"/content pane should be 16px, except above the logo where it's 32px

[Ferdi]

@shanbady

at the moment the breadcrumb is not a shared component. for example the /units page has its own inline breadcrumb https://mitopen-rc.odl.mit.edu/units/ - if we want to fully standardize this into a shared component it might be worth a separate pr

I'd consider doing a shared component later.

[steven-hatch]

Regarding Breadcrumbs - Yes, these should eventually be in component form. https://www.smashingmagazine.com/2022/04/breadcrumbs-ux-design/

Home / Units / OpenCourseWare

• Home should be a link the the home page ✓
• Units should be a link to the unit compare page ✓
• OCW - This can OCW or OpenCourseWare. The breadcrumb does not need to match the H1 but it should be similar - This should also not be a link, but just solid text or styled in a way that has reduced visual importance. I will add breadcrumb component into design system figma so we have a consistent source of truth because Bilal and I have been added this in without component structure.

Regarding DataPairs for Units Page
Lets do ...

Offerings
Learning Materials

Because they are on separate lines. Thanks!

[shanbady]

pinned the ordering and remove the ":" from the side panel

[pdpinch]

@Ferdi regarding the OCW in the nav - this appears to be a data issue. the nav text comes from what is supposed to be the "long title" but for the OCW offeror object it is "ocw".

@shanbady the unit/offeror data should match what's in this document: https://docs.google.com/document/d/1-Kyull4biR4XhSsPK6ZLHhqEOLyUEdnQjP6Xlvqe2zI/edit#heading=h.1z6344o0szco

According to the doc, the title should be "OpenCourseWare"

I opened a PR #1079 that I think will correct it, but I'm not sure. If it needs work, please take over the branch from me and fix it.

[jkachel]

The spacing on mobile is still just a bit off on mobile. I added some comments - they're based on some futzing with the layout in the CSS inspector so may need a bit of adjustment in situ.

[jkachel]

LGTM 👍