Mobile Responsiveness check on donate page

Sihemgourou commented 3 years ago

Overview

We need to check the mobile version of the donate page on the website so that we correct any bug that is appearing on mobile.

Action Items

Design:

[x] Check the mobile responsiveness of donate page (https://www.hackforla.org/donate/) (use your mobile to do it ;) )
[x] If there is any bug/any inconsistency or problem, however small or large, edit this issue and list the bug with screenshots You have more than one bug? duplicate this issue and create one issue per bug.
[x] List all the changes to implement to correct the bug (eg: resizing..) in the development action items below :arrow_down:. (don't hesitate to create 1 checkbox for each changes)
[x] Provide links to the figma file (if there is one), and a URL link to the page where the bug is observed.
[x] Put the issue(s) in the new issue review column to check the feasibility with the devs.

Development:

Resources/Instructions

Infos for developers: Ensure that the correction doesn't break any other pages that is connected to the one your changing. For that, check the sitemap

Sihemgourou commented 3 years ago

Donate page is still not live

github-actions[bot] commented 3 years ago

@ashleylin1

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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

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 Tuesday, September 28, 2021 at 12:02 AM PST.}

github-actions[bot] commented 3 years ago

@ashleylin1

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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

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 Tuesday, October 5, 2021 at 12:02 AM PST.}

kristine-eudey commented 3 years ago

@ashleylin1 can you please provide an update on this issue?

Progress:
Blockers:
Availability:
ETA:

ashleylin1 commented 3 years ago

Progress:

There is an accessibility issue in that the text inside the green circles is too small to read on mobile.

According to our Design System on typography, the smallest accessible text for mobile is 16px:

The graphic either needs to be redesigned to format the text properly or the text can be simply increased in font to 16px.

Option 1: Increase font to 16px and resize the circles accordingly:

Option 2: If the percentages of spending is known, a pie chart could be used to show the actual percentage of spending that is used to increase transparency about donations:

Option 3: Use a pyramid chart:

All three options are found in the "Donate Page (WIP)" on the Figma in the purple border Link: https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=11166%3A91022

All other aspects of the Donate Page seem to function as intended and are not in need of any other changes.

Blockers: I moved this to the New Issue Approval section of the Project Board. Is this the same as the new issue review column stated above? Availability: weekends ETA:

kristine-eudey commented 3 years ago

Thank you @ashleylin1! I moved this to questions/in review so we can flag it to share your findings with the larger team at today's meeting.

kristine-eudey commented 3 years ago

Final version for development is here: Donate Page (Mobile) - Figma Changes from current live version are annotated with notes.

abuna1985 commented 3 years ago

Created #2392 for dev implementation of the donate (mobile) design.

hackforla / website