hackforla
Add padding to dropdowns to match the style guide
Overview
Add a 8 px horizontal and vertical padding to the dropdowns as suggested in the style guide to improve the readibility of dropdown options and reduce visual clutter.
Action Items
Add Padding to all the dropdowns on the following pages:
- [ ] Create project page 4
- [ ] Filters on My Project Page
Resources/Instructions
@NilakshiS can you please assign this issue to me, i am a beginner to open source and i am sure i can complete this :-)
@AbhiSharmaNIT @5AIPAVAN this issue is for members of HackForLA in the TDM Calculator team. Please join the organisation through appropriate channels to work on issues. https://www.hackforla.org/join
I've started this assignment to add 8px padding to dropdown options for improved readability on these pages:
Projects page and Page 4. I implemented this in client/src/components/UI/UniversalSelect.jsx.
How to find this file:
https://github.com/user-attachments/assets/4eb97d11-a761-4e4d-b62b-1a304085041f
I’ve added the padding in UniversalSelect.jsx, which affects Page 4, the ‘Items per page’ dropdown and 'Select' button on the Projects page.
Page 4 Before:
Page4 After:
'Items per page' dropdown on Projects page Before:
'Items per page' dropdown on Projects page After:
Select button Before:
Select button After:
Please note that the UniversalSelect code is used in four more components(projecttablerow.jsx, rulestrategy.jsx, ruleviewcontainer.jsx, projectspage.jsx),
Here's how you can locate where the UniversalSelect code is being used(Admin.jsx in this example):
https://github.com/user-attachments/assets/3516a267-e355-4211-bf82-c68c77236862
so this change impacts all 4 components. I wanted to confirm if this was intended, as you might have expected it to affect only Page 4 and Projects page. ctrl + <click> to look up references to the component. double click to open the file.
Admin page dropdown Before:
Admin page dropdown After:
Should I also apply this padding to the Visibility, Status, Created On, and other filters on the Projects page? Could you please provide screenshots and indicate with red lines the specific areas where padding is needed?
On the screenshot there is an example of how the red lines show the borders where we need to add padding:
Hi @del9ra. I hope this answers your questions:
- I don’t have access to any of the development environments, so I can’t look up any of the JavaScript XML files you’re referencing. Therefore, I don’t know which components you’re talking about or where in the system they are implemented.
- I noticed in the design system that the dropdown fields themselves should also receive the padding. In the screenshots you’re referencing, only the items in the dropdown have received the padding, but not the field itself.
- @entrotech, I noticed that for the “Items per page” field on the My Projects page, the padding causes the dropdown to go below the bottom page border. Is there a way we can make the dropdown move up instead?
- Which page is the Admin page? I’m not familiar with the Calculation Rule dropdown. Do you have a URL or a series of steps you can give me so that I can navigate there on the Dev site?
- No, this issue should not be applied to the filter containers. This issue should only apply to dropdowns. I understand that it will look inconsistent, but the spacing in the filter overlays is generally pretty close on the TDM Dev site to what was designed in #1885. If at some point we decide to accommodate for the discrepancy in padding between dropdowns and nested checkboxes, we will first need a separate design issue to accommodate for it.
Thanks for your feedback, @thetanmancan !!
According to the following guide, you should be able to install the dev environment to see the code and the admin page, though I'm not entirely sure: https://github.com/hackforla/tdm-calculator/wiki/Contributing-Code.
I think you should ask about it someone who's been on the project longer than I have. I just started a few days ago.
Here's the admin page URL: http://192.168.1.145:3000/admin.
I will add padding to both the fields and the items.
Thanks again.
@del9ra Tristian (thetanmancan) is the design lead, so he will have answers to questions about design, but if you are going to give him a URL to look at, he would be trying to see it from the live development site, not by downloading the code.
