SOEOPSFY24-22

[imonroe]

READY FOR REVIEW

Summary

• When you have a List paragraph with an Event list, and it's set in Card Grid view mode, and you limit the output to fewer than three (or if the query returns fewer than three) items, the items are squished to the left of the paragraph, with a hole for empty space.
• I'm proposing something like this CSS-only fix, but I'm not sure it's optimal.

Review By (Date)

• When does this need to be reviewed by?

Criticality

• 2

Urgency

• normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Rebuild Cache
3. Create 3 events, dated in the future.
4. Create a page with a 2-column layout. In the first column, add a List paragraph. Set it to be an Event List, and choose card view. For the limit, set it to 3.
5. observe the page, and note the card grid shows up correctly.
6. In the paragraph, change the limit to 2.
7. Observe the page, and note that only two items are shown, and they look right.
8. In the paragraph, change the limit to 1. Note only one item shows up, and it looks right.

Site Configuration Sync

• Is there a config:export in this PR that changes the config sync directory? NO.

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

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

• JIRA ticket(s)
• Other PRs
• Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
• Anyone who should be notified? (@mention them here)

Resources

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

[imonroe]

Here is what it looks like with a limit set to one:

Here's what it looks like with a limit set to two:

Here's what it looks like with a limit set to three:

[imonroe]

@jenbreese Does this seem like a good solution to you? For context, see: https://stanfordits.atlassian.net/browse/SOEOPSFY24-22

[pookmish]

There is a trade off with this approach. If you choose to display more than 3 but only 4 items are available, the 4th item takes up the whole area. I think this is why we've been using grid more to keep them all the same regardless.

You could do some JS/template logic that adds/removes classes based on the number of elements. ie 1-3 use the flex, 4+ use grid. 🤷

[imonroe]

Pinging @pookmish on this, as it sort of fell off my radar. Do we really want to build template logic as suggested above? My instinct is that building complex template logic to deal with numbers of items divisible by four is maybe overkill? The original ticket was an edge case, and having three columns and four items is another edge case. I'll rework it if necessary, but my feeling is that it might be overkill....

[imonroe]

It did need to have a wrap added.

This is with five items.

This is with four items. After six, it wraps again.

[pookmish]

Yeah, so that's the tradeoff with the flex. The 4th items with 4 total, 7th item with 7 total, etc, take up the whole space. Some think it's acceptable some don't like it. I'm personally in the latter because i don't like one event card to be more space consuming than others. But it's really up to the client/UX to make that choice. The actual approach in the PR is acceptable to me.

[imonroe]

Well, @buttonwillowsix made the request originally, so I'll see if she'd like to review before merging.

[buttonwillowsix]

This looks great to me!

[pookmish]

Good with her, good with me. Probably need to rebase/merge the lastest 11.x into this branch though