Projects filters 3744

[chrismenke45]

Fixes #3744

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

• current-projects.html was changed to include proper elements for the js file to add filter elements to after DOM loaded
• _base.scss was changed to have clip overflow instead of hidden to allow sticky filter sidebar to work THIS COULD POTENTIALLY AFFECT OTHER PAGES OF THE SITE (it changes a css value on the html&body elements), BUT I DON'T THINK IT HAS
• _filter_dropdown.scss was updated to reflect new styling of filters
• current-projects.js was updated to allow filters to be used as shown in Figma

Screenshots of Proposed Changes Of The Website

Visuals before changes are applied

Desktop Layout Before Changed Mobile Layout Before Changed

Visuals after changes are applied

Desktop Layout After Changed

Mobile Layout After Changed

Mobile Layout After Changed (Filter Pop up)

[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 chrismenke45-Projects-Filters-3744 gh-pages
git pull https://github.com/chrismenke45/website.git Projects-Filters-3744

[ExperimentsInHonesty]

I left a note on the issue this is from #3744 (comment)

[chrismenke45]

Filter-Toolbar padding was reduced(by ~35%). I left a decent chunk there because I'm trying to make it at the level it should be with the search bar when it is implemented. If I should move it up further, please let me know :)

[bzzz-coding]

Availability: Tuesday and Thursday evenings
ETA: EOD 4/5/23

[ExperimentsInHonesty]

Looks good.

[bzzz-coding]

@chrismenke45 Great job on adding the filter! The styles look good to me, and the tab focus worked on different screen sizes—thanks for ensuring good accessibility for the UX!

One thing I've noticed is that on medium-sized screens, the filter takes up half of the width (see screenshot for a screen width of 780px), and I wonder if that's the intended design. In my opinion, the filter shouldn't take more than 1/3 of the width, but that's subjective. I can't find a layout design in Figma that was made for medium-sized screens, nor have I found documentation that specifies the column ratio for the filter and cards. What are your thoughts on this?

[chrismenke45]

Hi @bzzz-coding,
I reached out to @sijiapitts (the designer) on slack to see if she could shed some light on this.

[chrismenke45]

Hi @bzzz-coding,
I got a response from sijia:
"But the issue is we only designed for desktop and mobile, not in between sizes. I’m thinking maybe we should use the mobile filter style for tablet size as well"
Do you think that'll work? I can make the changes.

[bzzz-coding]

@chrismenke45 and @sijiapitts thank you for your input! Since we don't have a design made for medium-sized screens, I think whichever design the team thinks works best for this screen size would work.
@chrismenke45 Great job adding the filter! :)

[chrismenke45]

Hi @bzzz-coding
I changed the breakpoint from $screen-tablet(768px) to $screen-desktop(960px). See below for the layout right before the new breakpoint at 960px. I will also be following up with @sijiapitts on slack to confirm this is an appropriate breakpoint. If not, I will add a custom breakpoint (as apposed to using our breakpoint values in scss variables).

[roslynwythe]

Hi @chrismenke45 now in desktop view there is too much space between the filter and cards:

[bzzz-coding]

@chrismenke45 I was wondering if using aspect ratios or adjusting the column span would be a more responsive approach than setting a fixed pixel width. For instance, if the grid has three equal-width columns, the filter could occupy one column, while the two cards could span two columns each.

That being said, you have also put in a lot of effort towards this issue. Since there was no design provided for medium-sized screens, I am unsure whether adjusting layouts for such screens falls within the scope of this current issue. @roslynwythe, what are your thoughts on this?

[chrismenke45]

@bzzz-coding & @roslynwythe,
Thank you for all the help on this issue.
In regards to the extra space between the filter and the cards on a large screen I have three possible solutions:

1. Bitian's solution of setting the filters+project cards container to be 1fr for the filters and 2fr for the cards
2. Add another column of project cards so they take up more space on the screen
3. Add a max-width to the filters+project cards container so they are always next to each other and a wide screen will just have margins on the sides

Let me know what you think

[bzzz-coding]

@chrismenke45 Thank you for proposing different solutions! I'm not an expert on frontend, but I do remember using something like autofit and setting a max value for grid-template-columns to control the maximum width of a column, as you suggested in solution 3. Or, maybe setting something like grid-template-columns: 1fr 2fr; alone would solve the problem?
Ultimately, I believe it's up to you to decide which CSS trick to use in order to change the layouts. Perhaps you can start with the one you're most familiar with and see if it works as intended?

[roslynwythe]

@chrismenke45 @bzzz-coding I am not inclined to request further development on this PR for the sake of the medium size screens. I would prefer that we restore the desktop view to match the Figma design and leave the mid-size screen view as it was. You could create an ER to deal with the mid-sized screens. But I'm not the dev lead, so if either of you feel otherwise, please ask Justin to take a look.

[bzzz-coding]

@chrismenke45 @roslynwythe I'm fine with the previous layout too and would approve the PR if you decide to change it back. Just let me know. Excellent job!

[bzzz-coding]

@chrismenke45 Excellent job on adding the filter section to the page🌟!
Thank you for problem-solving and being flexible about different approaches to resolve an issue. 🙌

[chrismenke45]

@bzzz-coding @roslynwythe
Thank you for all the help with my issue.
@roslynwythe If this last change was not what you had in mind, please let me know and I'd be happy to change it

[roslynwythe]

Great work @chrismenke45 on quite a challenging large issue. You've implemented a powerful live filtering feature, complete with dynamic filter lists that are very usable and look great. The PR is well formed and you responded to all requests thoughtfully and patiently. Thank you!