Citizen Engagement (desktop): Update padding/margins and SDG image size

[JessicaLucindaCheng]

Overview

We want to update the size of the Sustainable Development Goal (SDG) image and adjust the padding and margins on the Citizen Engagement page for the desktop view so that

• the website reflects the updated design
• and is more accessible.

Details

Below is a screenshot of the updated Citizen Engagement page desktop design but please view and inspect the design in Figma to see specific details.

Expand this to see an updated Citizen Engagement page design

Action Items

Developer

• Read the Citizen Engagement wiki page for a list of code files
• For desktop views,
  • Update the SDG image size
  • Check and update the padding and margins
• Once your pull request has been merged,
  • Please update the Page screenshot (current version) section in the Citizen Engagement wiki page with an updated desktop and mobile screenshot from the website, and update the date.
    • Use the GoFullPage Chrome extension to screenshot the whole webpage at once.

Product Manager

• Once the pull request associated with this issue is merged, go to issue Rename citizen-engagement-cards.html #3756 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (Rename citizen-engagement-cards.html #3756) into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.

Resources/Instructions

• Citizen Engagement webpage: https://www.hackforla.org/citizen-engagement
• The updated Figma design is in the red frame labeled Newest Version
• Citizen Engagement wiki page
• GoFullPage Chrome extension
• For reference, a link to the related design issue: Redesign Citizen's Engagement's SDG sizes and related padding #3117
• Issue Rename citizen-engagement-cards.html #3756 is dependent on this issue being completed

[github-actions]

Hi @SZwerling, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

[SZwerling]

I will start on this tomorrow, 12/12/22. I plan to be done before the weekend.

[SZwerling]

Hello. I have a blocker.
#3738 Update the SDG image size and Check and update the padding and margins.
Looking at the Figma design I cannot ascertain the padding and margins. I do see pixel distance between elements.
Also, update padding and margin just for the SDG image? Or for which elements?
Any help would be appreciated. Thank you.

[JessicaLucindaCheng]

@SZwerling

Greetings. I hope your day is going well.
I'm working on #3738 resizing the SDG and adding margin/padding.
I have a few questions. Like, how do I determine the margin and padding from a Figma file?
Also, this issue asks to "check and update padding and margins". For every element? Or part of the page in particular?
Is it alright that I'm asking you these questions via a direct message?
Thanks,
Seth

Hi Seth,
I got your message on Slack. Since we (Hack for LA) are on break until January 3rd, I'm not checking messages as often.

how do I determine the margin and padding from a Figma file?

To determine the distance between elements in Figma, you need to

• Sign in to Figma
• Go to the design you want to view and zoom in so you can see the element(s) of the design better
• Make sure your cursor is set to the move button (the one that looks like an arrow) and click on the element you want to examine (the element you selected will have a blue outline around it)
• To see its position/relation to other elements, you can hover your cursor over other elements.
• For more info about the element you selected, you can select the Inspect tab on the right and scroll down in the tab to see more info

Click here to see a gif example of how I examine an element

For every element? Or part of the page in particular?

Since I didn't design the page, I'm not sure exactly what margins and paddings were changed. However, I don't think the margins and padding within the webpage's header section, within the top navigation, and within the footer were changed.
How I would approach it would be the following: After adjusting the SDG image size, I would start with inspecting the padding and margin around the SDG image on the webpage and comparing it to the Figma design. Then expand checking from there. So, if I were doing it, I would check starting with the SDG image, the elements in the SDG mini-card, the project card, then possibly the lower half of the webpage if needed.

Is it alright that I'm asking you these questions via a direct message?

I'm okay with it but you may work on other issues where the issue writer has left the team or are no longer active at Hack for LA. Thus, I would recommend doing the following instead if you have a blocker:

• In a comment in your issue, write what your blocker is and/or what questions you may have.

• Get a link to your comment by clicking on the 3 dots on the top right of your comment and selecting "Copy link"

  If you need it, you can click here to see a gif of how to copy a link to a GitHub comment

  

• In a message, paste the link to your comment in #hfla-site Slack channel. This will allow more people on the Website Team to see it versus just a direct message and they may be able to give you an answer.
• Also, when we have meetings, you can bring up your blocker during the meeting so that it can get addressed.

[SZwerling]

Progress: At the beginning.
Blockers: In the figma file there is no differentiation between padding and margin. If distances between elements/components have changed in the figma file, how do I determine to change padding and/or margin?
Availability: I will have time after Christmas this Sunday.
ETA: Not sure.

[ExperimentsInHonesty]

@SZwerling if you still need an answer to this

In the figma file there is no differentiation between padding and margin. If distances between elements/components

Please reach out to the development leads. If you already have your answer, please post the answer on in a comment on this issue.

[SZwerling]

Inspecting the Figma design for the Citizen Engagement Page, specifically the .sustainable-dev-goal cards, I see that the spacing is not consistent, but the size of the sdg-image is consistent.
My solution was to change the .sdg-image image height to 145px and the .sustainable-dev-goal padding to 20px for media query bp-tablet-up.
Checking to see if this is acceptable before I make a pull request.
Screenshot of my solution included.

[ExperimentsInHonesty]

@SZwerling I don't see the PR associated with this since you were assigned, but I see you closed this issue after making the comment 2 days ago. Can you let me know what's happening? If there is a PR, make sure its linked here.

[SZwerling]

@ExperimentsInHonesty I did not mean to close the issue. That was an accident.
I am waiting to hear back if my solution is acceptable before making a pull request.

[JessicaLucindaCheng]

@SZwerling

Inspecting the Figma design for the Citizen Engagement Page, specifically the .sustainable-dev-goal cards, I see that the spacing is not consistent, but the size of the sdg-image is consistent. My solution was to change the .sdg-image image height to 145px and the .sustainable-dev-goal padding to 20px for media query bp-tablet-up. Checking to see if this is acceptable before I make a pull request. Screenshot of my solution included.

I'm sorry about the confusion with the spacing. However, thank you for catching that our design wasn't uniform in terms of spacing. I spoke with @ExperimentsInHonesty about this and she said the following:

• The spacing should be 20px. (See the red annotations in the diagrams below.)
  • The bottom spacing should be 20px to whichever is longer: the image (like in diagram A) or the text block (like in diagram B).
• The top of the image should align with the top of the text block (see diagram A's purple annotation).

Diagram A

Diagram B

[ExperimentsInHonesty]

This is going to go into the new issue approval column for the design lead to make an issue to update the figma