Yalb mega footer 2

[joetower]

YALB-1510: Mega Menu: Present Level One links as Headings - BE

YALB-1487: Mega Footer Branding: FE

Description of work

• Refines responsive styling for the mega footer
• Adds new 3:1 crop type, image styles, and responsive image style
• Replaces the previous responsive image style in /yalesites_profile/modules/custom/ys_core/src/Plugin/Block/YaleSitesFooterBlock.php to use image_horizontal_logos
• Note: I have a question out to Franz regarding the placement of the social links (either where you see them currently in this PR or moved to the very bottom of the footer under the copyright line)

Functional testing steps:

• Navigate to https://pr-419-yalesites-platform.pantheonsite.io/welcome
• Scroll to the bottom, verify you see the mega footer
• Verify there are only 2 logos
• Verify the social links appear directly under the link columns instead of having extra space between one another. I changed the site-footer__columns from grid with named areas to flex so that each element can stack. The other option would be to move the social links to the very bottom of the page? Maybe under the copyright?
• Test the responsiveness

yalb-mega-footer-2-responsiveness.mp4

• Login and edit the site footer form https://pr-419-yalesites-platform.pantheonsite.io/admin/yalesites/footer
• Upload different image sizes and note how we're enforcing image ratios to bring clarity to logo choices
• Intentionally try to add images that don't look good to test these choices.
• The two logos will render as scaled and cropped 1:1 ratio images
• Note that you can not add more than 2 logos in the 1:1 footer logo logos grid
• The single school logo will render as a scaled and cropped 3:1 ratio images

[github-actions]

Created multidev environment pr-419 for yalesites-platform.

[dblanken-yale]

@joetower It's looking good. When testing the responsiveness in Safari, I noticed that the text is bleeding into the horizontal logo.

Works fine in chromium browsers and Firefox.

[dblanken-yale]

I also noticed that there's no spacing between the footer variation legend and the radio boxes. Not sure if that's ok, but looks strange. This is in Safari again.

[dblanken-yale]

While CKeditor lets you space out portions of the content, it collapses it all into one paragraph on view. That might be by design? It's not a true place for lots of paragraphs right? But thought I'd point it out in case it was an issue.

Below, my quote in CKEditor is on it's own line.

[dblanken-yale]

Great work! I made some notes above as I went on things that looked off. It's looking awesome though.

[codechefmarc]

I looked into this too and same issues that @dblanken-yale noted, but also seeing them in Chrome:

As for the text all being smushed together - that is because this is using the "Restricted HTML" format that doesn't allow <p> tags. So, we can switch to using "Basic HTML" but that adds things like tables and alignment and all sorts of other things. We may want to add another text format? Or allow <p> tags in restricted? We have "Heading HTML" as well, but I know we shouldn't enable paragraphs in that one. @nJim - what are your thoughts on text formats?

[joetower]

@dblanken-yale @codechefmarc It looks like what you were seeing was around 574px wide. I added back in some top-margin for the p element.

Could you please take another look? Here's a screenshot of Chrome and Safari at 574px

Also, Dave, I added extra margin here: (This appeared to only be a Safari issues, but I suppose other browsers will get a bit more margin 😄 )

[dblanken-yale]

Yep that looks great! All works as I expected it to. Great work!

[codechefmarc]

@dblanken-yale - Added paragraph tags into the footer. I'm going to check in with @joetower to see if this and the component library are ready to merge.

[dblanken-yale]

This looks great!