Create donation gif component 4439

[bphan002]

Fixes #4439

What changes did you make and why did you make them ?

• I made the donate gif/text into a reusable component
• I did a small refactor of the html so that the header was outside of the original component and made it a sibling of the component
• I transferred all the related scss from the _donate.scss into the _donate-component.scss

Implantation Before

Desktop

Mobile

Implementation After

Desktop

Mobile

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b bphan002-create-donation-gif-component-4439 gh-pages
git pull https://github.com/bphan002/hackforLAforkwebsite.git create-donation-gif-component-4439

[roslynwythe]

Availability: 5/11 2 - 4pm
ETA: EOD 5/12

[Thinking-Panda]

Availability: 10AM-3PM
ETA: 5/12/23

[roslynwythe]

Hi @bphan002 I apologize for the delay in reviewing. I need to update my ETA:

Availability: 5/15 11 -2pm, 5/16 2 -5 pm
ETA: EOD 5/16

[roslynwythe]

Hi @bphan002 Thank you for great work on this PR. The PR is well formed and the refactored HTML/CSS looks great so far., however I need to ask for a change. I apologize that this was not mentioned explicitly but the intention is that the component include the sentence "Hack for LA takes donations through Code for America". This was depicted in both the "component elements" screenshot and the "Final appearance" screenshots (under Resources). You could grab the html from this page: https://www.hackforla.org/about/ (3rd card from the bottom).

[Thinking-Panda]

Hi @bphan002 ,
As <h3> and .donate-title is moved outside the component, styling in line 78 and line 110 in _donate-components.scss could be moved to _donate.scss

Also, the text inside the red circle is not included in the new version.

[bphan002]

@Thinking-Panda Thank you for catching that. I'm not sure if you are able to chime in on this question I left for Roslyn.
The html from https://www.hackforla.org/about/ (3rd card from the bottom) was done using flex, while the current one I was working on uses grid.

Is it okay if I just make the whole component flex then?

[Thinking-Panda]

@Thinking-Panda Thank you for catching that. I'm not sure if you are able to chime in on this question I left for Roslyn. The html from https://www.hackforla.org/about/ (3rd card from the bottom) was done using flex, while the current one I was working on uses grid.

Is it okay if I just make the whole component flex then?

Changing it to flex will move the text "100% of donation..." on top of the donation gif in the mobile viewport

And as per last action item in the issue, that text has to be underneath the donation gif.

[Thinking-Panda]

ETA- 5/19/23

[Thinking-Panda]

@bphan002 , a couple of things that I noticed.

1. The <h3> in donate-card.html should be "Make a Donation"
2. _donate.scss could have a clean up of lines 11-14

[Thinking-Panda]

Thank you @bphan002 for resolving the merge conflict.

Review ETA: EOD 5/22/23

[Thinking-Panda]

Extending my ETA to 5/23

[Thinking-Panda]

@bphan002 , changes to _projects/access-the-data.md are not mentioned in this issue. Rest look good.

[bphan002]

@bphan002 , changes to _projects/access-the-data.md are not mentioned in this issue. Rest look good.

Thank you so much for your patience. I have corrected this.

[Thinking-Panda]

Well done @bphan002 . Thank you for your work!

[roslynwythe]

Hi @bphan002 great work so far on this issue. Please adjust the styles to match the "final appearance" screenshots a bit more closely.

For desktop screen sizes, please align the sentence "Hack for LA takes donations.." with the top of the form box, and allow more whitespace between each line of text, and italicise the sentence "100% proceeds go to ..". Also the size of that italicized text should be reduced. Make sure there is enough spacing so the text doesn't get too close around 780 px.

In mobile, again please add some spacing between the lines of text, and the text "*100% of proceeds" should be left-aligned.

[bphan002]

Hi @bphan002 great work so far on this issue. Please adjust the styles to match the "final appearance" screenshots a bit more closely.

For desktop screen sizes, please align the sentence "Hack for LA takes donations.." with the top of the form box, and allow more whitespace between each line of text, and italicise the sentence "100% proceeds go to ..". Also the size of that italicized text should be reduced. Make sure there is enough spacing so the text doesn't get too close around 780 px.

In mobile, again please add some spacing between the lines of text, and the text "*100% of proceeds" should be left-aligned.

Hi @roslynwythe I tried the text-align:left , but it had no effect so I put a - margin. Hope that is okay.

[roslynwythe]

Hi @bphan002 thank you for making the requested changes. They look really good. Please update the "Implementation After" screenshot to reflect the latest appearance of the PR.

[bphan002]

Hi @bphan002 thank you for making the requested changes. They look really good. Please update the "Implementation After" screenshot to reflect the latest appearance of the PR.

Hi Roslyn,

I just updated the "Implementation After" desktop and mobile screenshots. Thanks

[Thinking-Panda]

@bphan002 , Thank you for your patience! The italics for "100% of ..." is applied only when viewport is min-width: 768px and smaller viewports have a regular font. Applying the italics style to all viewports would achieve our goal.

[bphan002]

@bphan002 , Thank you for your patience! The italics for "100% of ..." is applied only when viewport is min-width: 768px and smaller viewports have a regular font. Applying the italics style to all viewports would achieve our goal.

All set

[Thinking-Panda]

ETA: 5/31/23

[Thinking-Panda]

Excellent work. Thak you @bphan002 ! Approved.

[roslynwythe]

Thank you so much @bphan002 for making those changes. Please update the "Implementation After" desktop view.

[bphan002]

Thank you so much @bphan002 for making those changes. Please update the "Implementation After" desktop view.

Apologies for missing this and thank you again for your patience. I just updated the desktop view.

[roslynwythe]

Thank you @bphan002 for great work on this issue. The code changes are correct and clean, and work perfectly in the browser, the PR is well-formed and you decribed your work, and you were responsive to requests for changes.