adjust / refactor channel detail header

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/4781

Description (What does it do?)

This PR refactors ChannelPageSkeleton.tsx into two separate files; DefaultChannelSkeleton.tsx and UnitChannelSkeleton.tsx. The reason for this is that the layout of the Banner sections of the Unit channels is different enough that it was starting to become difficult to make changes to the Unit specific layout without affecting the other types of channels. This defines a clear separation so that Unit channels that have more extensive branding / styling can be customized without worrying about affecting the other types of channel pages. The use of BannerPage was replaced with simply using the newer Banner component. Slots were added to Banner to allow customization in the way the Unit channel pages need. Lastly the original problem noted in the issue above was addressed, which was just that the non-Unit channel page banners looked off from the design.

Screenshots (if appropriate):

How can this be tested?

• Spin up mit-open on this branch
• Ensure your departments, topics and units are populated
  • docker compose exec web ./manage.py update_offered_by
  • docker compose exec web ./manage.py update_topics
  • docker compose exec web ./manage.py update_departments_schools
• Visit the home page at http://localhost:8062/
• Click the icon to open the nav menu, then click "By Topic"
• Select any of the topics and verify that the text in the banner does not shift and lines up with the listing page
• Click the icon to open the menu again and click "By Provider"
• Click any of the units on the listing page
• Verify that the layout of the unit channel pages has not changed
• Repeat this process on mobile from the home page step

[shanbady]

Code changes look good. I did notice 2 things. Seems like the "manage widgets" link in the settings/gear tooltip isnt working. I checked on rc and it seems its also broken there.

The other thing i noticed in mobile view for certain pages (ones with longer breadcrumbs), the breadcrumb appears to break apart .

[shanbady]

Code changes look good. I did notice 2 things. Seems like the "manage widgets" link in the settings/gear tooltip isnt working. I checked on rc and it seems its also broken there.

The other thing i noticed in mobile view for certain pages (ones with longer breadcrumbs), the breadcrumb appears to break apart .

looks like there is a separate ticket for removing the widget settings button https://github.com/mitodl/hq/issues/4730

[gumaerc]

@shanbady @ChristopherChudzicki Thanks for your reviews, this is ready for another look now.

[shanbady]

👍