Closed JessicaLucindaCheng closed 1 year ago
Availability for writing issue: 6 hours ETA to finish writing issue: Mon, Dec 1, 2022
Issue Writing Update:
Issue Writing Update:
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 :)
I will start on this tomorrow, 12/12/22. I plan to be done before the weekend.
Hello. I have a blocker.
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.
@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
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:
Get a link to your comment by clicking on the 3 dots on the top right of your comment and selecting "Copy link"
@SZwerling
Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.
If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.
You are receiving this comment because your last comment was before Monday, December 19, 2022 at 11:16 PM PST.
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.
@SZwerling
Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.
If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.
You are receiving this comment because your last comment was before Monday, January 2, 2023 at 11:15 PM PST.
@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.
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.
@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.
@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.
@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:
Diagram A
Diagram B
This is going to go into the new issue approval column for the design lead to make an issue to update the figma
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
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
![Citizen Engagement Desktop Final](https://user-images.githubusercontent.com/31293603/204995332-ca266358-6fa3-4558-a0b2-42d25ee74892.png)Action Items
Developer
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.Product Manager
Dependency
section are closed. If they are all closed, move that issue (#3756) into theNew Issue Approval
column, remove theDependency
label on it, and add aready for dev lead
label to it.Resources/Instructions