added donate-card.html file in _includes folder, removed hard coded d…

[Mattre7]

…onate card on the join-us and donate pages

Fixes #2451

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

• I consolidated the donate cards' html on the join us and donate pages into a single html file "donate-card.html" in the _includes folder
• I deleted the hard code on the join us and donate pages and linked the "donate-card.html"
• The reason why is so that the donate-card can be more easily linked in the future if it's neater, but also to have a cleaner, easier to understand code and less redundancies

Additional info

• Initially got some styling errors on one page or the other when I linked the same donate-card.html
• This required some tinkering as the donate-card was coded differently (with different classes) on each page, but was ultimately able to use the same donate-card.html in both circumstances after editing a class of a parent div.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

No changes, however I have attached screenshots of the branch running locally on my computer with the correct styling/application with the new consolidated code in desktop and mobile formats

Desktop Join-Us Page (ran locally on my issue branch - same styling)

Mobile Join-Us Page

Desktop Donate Page

Mobile Donate-Page

=""

[github-actions[bot]]

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 Mattre7-issue-2451-donate-html gh-pages
git pull https://github.com/Mattre7/website.git issue-2451-donate-html

[Zak234]

ETA: Aug. 1 - Aug. 2 Availability: Anytime

[Mattre7]

There seem to be various errors on the Join Us page. For both desktop and tablet, the amount of grey space underneath the text is different. Additionally, the sizing and white space for the subtitle Running Hack for LA costs money seem to be off along with the sizing for How to help us continue to do impactful work. The whitespace seems to only be off for Running Hack for LA costs money on desktop but the sizing for both titles is off for on all screens.

Good catch. This is the live version of the donate page currently and it seemingly looks the same as the above, but the donate card on the join us page looks different. Can you see those same errors on the live hackforla/donate page?

This is the current donate section on the join-us page. It does look better/cleaner, so I will make some changes in the new consolidated donate-card.html to make both applications look like that version.

Will be available later today to hopefully resolve.

[Mattre7]

Updated donate page on Mobile

Updated donate page on Desktop

Current Live Website donate page on mobile

• Fixed the styling on the donate-card that was different/not as polished on the donate page

• donate-card currently has different styling on both the join us and donate pages on the live website

• The next step would be to consolidate the css as well, because now a div on the donate page uses the class "join-us-card-container" in order to fetch the correct styling, which is not ideal

• I commented out much of the css on the _donate.scss page, because now that code is going unused, and that code was also what was causing the donate page to be styled differently than the version on the join us page. Maybe should have just deleted but seemed safer for the time being

[Zak234]

I think that the reason there are styling errors for the donate page is because the original cards for the Join Us and Donate pages were not the same, so I don't think it's a major issue. I would check in at office hours on Thursday just to make sure it is okay.

[Mattre7]

I think that the reason there are styling errors for the donate page is because the original cards for the Join Us and Donate pages were not the same, so I don't think it's a major issue. I would check in at office hours on Thursday just to make sure it is okay.

Yes they were definitely different. In hindsight the changes to donate.scss were not necessary, but a large chunk of that coded is now going unused after changing the class on a parent div in donate.html (so I commented out that unused code). The change/conflict in that donate.html file is what got the cards to present the same way, but a little confusing since I had to use the join-us-card-container class on the donate file. Anyway, good idea, I will be at office hours tomorrow!

[JessicaLucindaCheng]

@Mattre7 Since I am transitioning off of the team, I am no longer reviewing pull requests, so I will be removing myself as a reviewer.

Also, I know GitHub suggests reviewers, which is maybe why you selected me to review your pull request, However, a lot of the suggested reviewers may no longer be active on this team. Thus, if I want reviewers for a pull request, I would do one of the following:

• Wait for a team meeting for pull request reviewers to be assigned
• Post a Slack message with a link to the pull request in the hfla-site channel asking for reviewers

[blulady]

Hey @Mattre7, we haven't heard from you in almost a month. If you are still available to work on this PR give us an update in the next week or two.

[Mattre7]

Hey @Mattre7, we haven't heard from you in almost a month. If you are still available to work on this PR give us an update in the next week or two.

Hi, yes I will update this PR, I'm sure it has fallen behind the main repo by now, but besides that I thought I was actually still just waiting on someone to review the changes. I apologize, I need to be better about reaching out to technical leads myself and get clarity on what I potentially need to change before it gets approved.

[ericvennemeyer]

Availability: Weds 8/31 - Fri 9/2, 1hr ETA: EOD Fri 9/2

[Mattre7]

Just made sure that the issue branch is up to date with recent changes to the main website repo. Happy to see that it looks like @ericvennemeyer might be able to review the pull request. I know I have been absent for a little while, I just started in a new line of work at a new company, but excited to be more present in this community once again, and I am here if anyone needs to contact me regarding this issue and those in the future.

[Mattre7]

Hey @Mattre7 the changes look great on the website as well as all the mobile views. In the interest of keeping the code on the website clean I will ask you to delete the commented out code in the components file. If necessary we'll roll back the changes with Git/GitHub. Thank you so much for all your hard work.

@blulady Ok should be done now, thank you for reviewing! Haven't been as active as I would have liked to be this past month, but settling in to my new job and excited to tackle more issues like this one!