"Projects" and "Home Page" Edits | pins project filter to top of project list, un-sticky's the Filters on scroll, & centers components

[agosmou]

Fixes #4593

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

• Pinned the projects filters to the top of the projects list to mimic the REI website
  • UX/UI best practice to facilitate user navigation along the page
• Removed the "sticky" styling for the filters side pane
  • This caused unnecessary scrolling through all project cards to release the filters pane so the user can see the filters at the bottom of the pane
• Centered the components to the center to mimic the REI website
  • having the components centered can be considered good UX/UI since the user can quickly navigate because there is less distance between components
• Refactored where needed

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

Visuals before changes are applied

Visuals after changes are applied

[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 agosmou-test-branch-agomez gh-pages
git pull https://github.com/agosmou/website.git test-branch-agomez

[t-will-gillis]

Availability: 5/18 evening, 5/19
ETA: 5/19

[mademarc]

Review ETA: 5/18/2023
Availability: 7:05 PM

[mademarc]

Hey @agosmou great adding the filter on the div class to keep the code very well read.

[t-will-gillis]

Hey @agosmou great job adjusting the projects filter: removing the sticky styling, pinning to the top of the project list, and centering on the page for the Projects and homepages.

When I view in Docker, I am noticing the following:

• In all views, the 'Applied Filters' notice no longer appears. I am not arguing whether or not the 'Applied Filter' notice is useful or worth keeping, only that removing this notice is beyond the scope of the issue.
• In tablet and desktop views, the red applied filter tags have shifted from the Filters column and now are above the project cards. I believe that keeping the red applied filter tags in the current location is more intuitive for the user.
• In the tablet/ 767 px view, the Filters column width compresses and looks 'smushed' in comparison to the way it looks currently in the same view. I feel that maintaining the width of the Filters column is preferable visually.
  
• Lastly, I am not entirely clear about how the /projects-check page is used currently or whether there is even a link to this page from the current website, however the edits made with the PR also change the layout of this page- both the 'Current Projects' header and the project cards themselves become off-center.
  
  Thanks for your work so far!

[agosmou]

Hey @t-will-gillis - Thank you for your thoroughness. See Below:

---

• In all views, the 'Applied Filters' notice no longer appears. I am not arguing whether or not the 'Applied Filter' notice is useful or worth keeping, only that removing this notice is beyond the scope of the issue.

I feel like this was implied as I had to match REI's page (where their filter's don't have that text) per Bonnie's comment on the Emergent Request

• In tablet and desktop views, the red applied filter tags have shifted from the Filters column and now are above the project cards. I believe that keeping the red applied filter tags in the current location is more intuitive for the user.

I had to match REI/Amazon's page per Bonnie's comment on the Emergent Request

• In the tablet/ 767 px view, the Filters column width compresses and looks 'smushed' in comparison to the way it looks currently in the same view. I feel that maintaining the width of the Filters column is preferable visually.

Agreed! I adjusted this.

• Lastly, I am not entirely clear about how the /projects-check page is used currently or whether there is even a link to this page from the current website, however the edits made with the PR also change the layout of this page- both the 'Current Projects' header and the project cards themselves become off-center.

Nice catch - Those properties are used in a lot of places throughout the whole website. I went ahead and fixed this in the CSS just in case (not sure this page is used).

[t-will-gillis]

Hey @agosmou – Thanks for the clarification/ explanation about the placement of the red applied filter tags. I can see why you did what you did when I look at the REI page. Also, when the filter tags are at the top of the project cards, there is not really a good location for the ‘Applied Filters’ verbiage and since it does not add to clarity, I agree with you that the text can/should be removed.

Thanks also for changing the min width of the Filters column (I am just noticing the responsive design changes from 1 to 2 to 3 columns going from 766 to 767 to 768 on the current site) and for adjusting the /projects-check page. Both look good now.

Great job working through this issue!