SDSS-1273: New responsive style for news cards.

[jenbreese]

READY FOR REVIEW

• Preliminary review. I'd like you to try it out and see what you think.
• I think we can iterate on this.

Summary

• Add a new Card Responsive Style that is specifically for News cards.
• I created a new Responsive Style based on the current one.
• Then updated the styles to smaller sizes.
• Then changed the vertical news card, the one we use on all the grids, to use this responsive style.

Review By (Date)

• 7/11

Criticality

• Medium

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Import all the configs
3. Create several news stories and then clone until you have many many. 50+
4. Create a basic page and add a list of news in a card grid
5. Verify the file sizes are significantly smaller than what is in prod.
6. Verify there isn't a noticeable graininess to the photos.

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• Design is approved by @ user?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

- SDSS-1273

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[jenbreese]

@buttonwillowsix Do you do PR reviews on this site? What do you think of this PR?

[joegl]

This is a good start but we need a separate view mode for the card grid instead of changing the existing card display. This is because the card display is used in areas other than the grid where it needs to be larger than what we want for the card grid. The new card grid display would be used to display only the cards in the grid. I outlined the steps in the ticket to do this. Let me know if you want to review and discuss the steps together.

The News page on Sustainability is a good example. I've provided a screenshot below:

The first red circle is a Spotlight paragraph which uses the News node Card display.
The second red circle are Teaser paragraphs which uses the News node Card display.
The third red circle (and blue circle) is a Lists paragraph using the News list view Card Grid display, which uses the News node Card display.

We only want to reduce the image sizes in the Card Grid display (the red/blue circle) and leave the other paragraphs which use the Card display with the larger images (because they need to be larger). So we want to create a new Card Grid view display and add it to all nodes. Then we'd use the new Card Grid responsive image set in those displays. And then we'd update all the views which have a Card grid display to use the new Card Gard node display which uses the new Card Grid responsive image set.