website Projects and Home Pages: Pin Projects Filter to the Top of the Projects List

Overview

We need to improve the usability of the filters, search and project display so that it is easy for people to navigate the project list.

Details

Make the projects filter stay at the top of the content section of the page and scroll independently to allow the user to scroll through all filter options and projects at the same time. It's not changing position, it's just remaining on the page while the project's scroll

See how the REI website implements their page when scrolling through the merchandise on the website. The projects filter and list should look and behave similar to it.

The difference between REI and ours is that we have a search bar, that will stay pinned at the top.

Action Items

[ ] Update the styling for the filter so that the filter is anchored to the top of the parent section element
[ ] Update the styling for the section element containing the filter and projects list so that the two components scroll independently
- [ ] are pinned to each other when the viewport changes for viewport widths above 767px
- [ ] are centered to the page when the viewport changes for viewport widths above 767px

Resources/Instructions

May 02 '23 07:05 Adastros

I am interested to work on this issue under Quine. So please assign me this task to me.

May 03 '23 18:05 Hritik1503

Hi @Hritik1503, this issue isn't ready for a dev to work on right now.

If you haven't been onboarded for Hack for LA yet, please visit the getting started page to find out how to join the organization and contribute.

May 04 '23 04:05 Adastros

Hi @agosmou, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

May 08 '23 05:05 github-actions[bot]

Available may8-may16

Latest ETA may16

May 08 '23 05:05 agosmou

Still working through this!

Trying to finish this today 5/17/23

May 16 '23 06:05 agosmou

Im having an extremely painful experience with docker right now - my only bottleneck on this issue, which is making this take far longer than it should...

Trying to fix docker issue so I can efficiently make this website fix.

hfla_site  |        Destination: /srv/jekyll/_site
hfla_site  |  Incremental build: enabled
hfla_site  |       Generating...
hfla_site  |                     done in 158.508 seconds.
hfla_site  |                     Auto-regeneration may not work on some Windows versions.
hfla_site  |                     Please see: https://github.com/Microsoft/BashOnWindows/issues/216
hfla_site  |                     If it does not work, please upgrade Bash on Windows or run Jekyll with --no-watch.
hfla_site  |  Auto-regeneration: enabled for '.'
hfla_site  | LiveReload address: http://0.0.0.0:35729
hfla_site  |     Server address: http://0.0.0.0:4000/
hfla_site  |   Server running... press ctrl-c to stop.
hfla_site  |       Regenerating: 1 file(s) changed at 2023-05-18 04:39:13
hfla_site  |                     _sass/elements/_dropdown_filters.scss
hfla_site  |                     ...done in 43.173967415 seconds.
hfla_site  |

UPDATE: Found a work around. Almost done with the issue - will update ETA.

May 18 '23 03:05 agosmou

Available: Openly available 5/18 through 5/21

ETA: 5/18 (pending merge team approval)

May 18 '23 19:05 agosmou

I have rewritten this issue and reopened it. @hackforla/website-merge please review and add ready to prioritize if its good.

Feb 20 '24 23:02 ExperimentsInHonesty

Hi @Anahisv23, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:- i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?) ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)

Mar 13 '24 00:03 github-actions[bot]

i. Availability: 11am - 5pm
ii. ETA: Wednesday March 27

Mar 13 '24 00:03 Anahisv23

@Anahisv23 Please move this to the in progress column

Mar 15 '24 08:03 ExperimentsInHonesty

Hey @ExperimentsInHonesty the issue has been moved to the in progress section on the project board.

Mar 16 '24 00:03 Anahisv23

I had a question regarding issue #4593. I’m trying to understand what the issue is asking. So in the details section of the issue when it says that I need to make the projects filter stay at the top of the content section. If I’m understanding correctly do I need to move the “Applied Filters” div with the class "filter-tag-container" on current-guides.html on line 23 that pops up when a user selects a project filter to the section containing the projects right under the search bar (above the projects list) to make the behavior similar to the REI website? Since in the REI website applied filters are positioned above the product list.

Mar 20 '24 21:03 Anahisv23

Hi @Anahisv23! Great job catching the detail that the filter chip position on the example REI link is different from our projects page. I read the issue as focused on adding the fixed behavior the filter sidebar and search bar. @Adastros can you clarify if the selected filter chips should be moved in addition to fixing the filters sidebar and search bar?

Mar 21 '24 00:03 LRenDO

@LRenDO @Anahisv23 I don't believe we want to change the position of the "Applied Filters" chips to match the REI site, but to confirm, I put the question on the agenda for the PM/dev lead meeting of 3/25 and I'll report back. Thank you both for work on this issue!

Mar 21 '24 23:03 roslynwythe

@Anahisv23 Don't change the location of anything (filters, selected filter items, or search bar). Just figure out how to:

keep the filters section on left pinned to the top, and still scrollable in case the list is longer than a user's screen. Don't pin the selected filters separately from the filters section.
keep the search bar pinned to the top.

I hope that answers your question. If not, please add this issue back to the questions column, with the ready for dev lead label and additional questions.

Mar 26 '24 23:03 ExperimentsInHonesty

@Anahisv23

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 (optional): "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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 26, 2024 at 12:06 AM PST.}

Mar 29 '24 07:03 github-actions[bot]

Progress: Currently on vacation so haven’t made much progress on this but will work on this issue next week. Blockers: None Availability: April 8 - April 12 ETA: April 8 - April 17

Mar 31 '24 18:03 Anahisv23

@Anahisv23

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 (optional): "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 Questions/In Review column of the Project Board 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. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 9, 2024 at 12:06 AM PST.}

Apr 12 '24 07:04 github-actions[bot]

Progress: I'm still working on this. I've managed to update the styling for the filter so that the filter is anchored to the top of the parent section element and added independent scroll to the filter. Still working on pinning the search bar and independent scroll for project lists. Blockers: None Availability: 11am - 5pm ETA: April 24

Apr 13 '24 00:04 Anahisv23

Progress: Still working on this issue. I've managed to allow independent scroll for projects list and filters. Still need to pin filter and search bar to top of the section element. Blockers: Dabbling with css positioning has been a bit tricky, but I'm learning a lot! Availability: 11am - 5pm ETA: April 24

Apr 22 '24 22:04 Anahisv23