Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IYY-283: Site editors can create a ½ - ½ layout | IYY-284: Site editors can create a ⅓ - ⅓ - ⅓ layout #442

Open
wants to merge 19 commits into
base: iyy-sprint-03
Choose a base branch
from

Conversation

joetower
Copy link
Contributor

@joetower joetower commented Nov 25, 2024

IYY-283: Site editors can create a ½ - ½ layout | IYY-284: Site editors can create a ⅓ - ⅓ - ⅓ layout

Description of work

  • Adds new layout component
  • Adds layout option for fifty-fifty
  • Adds layout option for thirty-thirty-thirty
  • Adds layout option for two-thirds-one-thirds

Testing Link(s)

Functional Review Steps

IYY-layouts.webm

Accessibility Review

  • Verify the component meets Accessibility requirements

@joetower joetower self-assigned this Nov 25, 2024
Copy link

netlify bot commented Nov 25, 2024

Deploy Preview for dev-component-library-twig ready!

Name Link
🔨 Latest commit 60f5662
🔍 Latest deploy log https://app.netlify.com/sites/dev-component-library-twig/deploys/67658f6ceb8a9100085ddcc8
😎 Deploy Preview https://deploy-preview-442--dev-component-library-twig.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@joetower joetower changed the title IYY-283: Site editors can create a ½ - ½ layout IYY-283: Site editors can create a ½ - ½ layout | IYY-284: Site editors can create a ⅓ - ⅓ - ⅓ layout Nov 26, 2024
@joetower joetower marked this pull request as ready for review November 26, 2024 22:31
Copy link
Contributor

@dblanken-yale dblanken-yale left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work and looks great to me. I added others to chime in before we bring it in.

Copy link

@miketullo95 miketullo95 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks amazing! do you have the list of approved blocks for each section? I know in the past we had a table to keep track of them

@joetower
Copy link
Contributor Author

joetower commented Dec 3, 2024

@miketullo95 Yes, the approved list of components is as follows:

Fifty-Fifty

  • Text
  • Accordion
  • Media
  • Link Grid (adding in a separate PR - in-progress now)

Thirty-Thirty-Thirty

  • Text
  • Media

@miketullo95
Copy link

Potential easy wins (not related to IYY project, just brainstorming here)

50/50

  • Button
  • Quote
  • In-line message
  • Tiles ?

70/30

  • Views (70)
  • Tiles (70)
  • In-line message (70, maybe 30?)
  • Image Grid (70)
  • Image Gallery (70)
  • Image (30)

@joetower
Copy link
Contributor Author

joetower commented Dec 4, 2024

@miketullo95 Could you capture that request in a ticket?

It would require a decent amount of work and definitely wouldn't be quick 😆 .

@miketullo95
Copy link

@joetower oh, this wasn't specifically a request for this PR/work package, just thinking out-loud and wanted a record of potential stuff that can be taken on in the future 😆. Will definitely make a ticket for it now

@joetower
Copy link
Contributor Author

joetower commented Dec 4, 2024

@miketullo95 Okay, sounds great! Thank you.

@miketullo95
Copy link

miketullo95 commented Dec 5, 2024

@joetower feedback from the university printer:

  • it looks like the divider for the 70/30 is slightly narrower than the others? could all of them be that thinner style?
  • change the opacity of the dividers to put less emphasis on them, try out 70%, then 50%

@joetower
Copy link
Contributor Author

joetower commented Dec 5, 2024

@miketullo95 Apologies for sending you to another PR, but could you please test your changes here: #445

I made newer changes to the layout files in that branch and wanted to keep subsequent updates in the same place.

The divider was a bit thinner in the seventy-thirty layout because the CSS gap property seems to affect the overall calculated width (of the divider since it uses rems). It's odd. I added a bit extra space to the divider in that context and it appears to have helped.

Also, I added 50% opacity to the dividers. 🥳

@miketullo95
Copy link

@joetower amazing as always! and apologies, forgot that those requests were CL based 😆

@codechefmarc codechefmarc changed the base branch from develop to iyy-sprint-03 December 6, 2024 01:33
Copy link
Contributor

@codechefmarc codechefmarc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been working on this PR for the back-end, wiring, and UI parts to this ticket and all of this looks great to me. Approved!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants