Projects and homepages 4593

[Anahisv23]

Fixes #4593

What changes did you make?

Additions to CSS files

• Added the form#search-bar css, line 13 in _search-bar.scss file. Added position sticky to keep search bar pinned
• Added the .projects-and-filters css, line 40 in _dropdown_filters.scss. Added overflow-y to allow independent scrolling of projects

Modifications to existing CSS files

• Modified the .filter-toolbar css, line 32 in _dropdown_filters.scss. Added overflow-y to allow independent scrolling of filters list
• Modified the .filtersDiv css, line 46 in _dropdown_filters.scss. Added position sticky to keep filters section pinned

Note:

• Modifying the _dropdown_filters.scss and _search-bar.scss files applies css changes to both the projects page and home pages user interface.

Why did you make the changes (we will use this info to test)?

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

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 Anahisv23-projects-and-homepages-4593 gh-pages
git pull https://github.com/Anahisv23/website.git projects-and-homepages-4593

---

Note that CONTRIBUTING.md cannot previewed locally; rather it should be previewed at this URL:

https://github.com/Anahisv23/website/blob/projects-and-homepages-4593/CONTRIBUTING.md  

[Thinking-Panda]

Availability: weekdays
Review ETA: 5/1/24 EOD

[Thinking-Panda]

@Anahisv23 Thank you for working on this issue. Merge branch is setup correctly. Code changes show expected output. Website works well on my local machine. Well done. Approved!

[irais-valenzuela]

Review ETA: 5/7/24
Availability: 5/7/24

[irais-valenzuela]

Hey @Anahisv23, great work on the issue! Your branches are correct, there is a linked issue, and the correct css styling has been added to achieve the goals of the issue. Overall, very awesome job!

[jphamtv]

Hi @Anahisv23,

Great progress on this issue. The filter section and projects scroll independently, and the search bar remains pinned to the top of the projects list.

However, during testing, I noticed some behavior that needs to be addressed:

1. The content height appears to have been reduced, limiting the viewable area. The content height should fill the viewable area. The filter/project section should scroll to the top of the page and become sticky when it reaches the top, just below the navigation bar, to increase the screen real estate for viewing projects.
2. The project list should scroll with the rest of the page, similar to the REI example provided in the issue, where the list shares the same vertical scroll as the page. This will also avoid competing vertical scrolls on horizontally shorter browser windows.
3. The filter section should not shrink horizontally or have horizontal scroll.
4. On screen width 768px and below, when opening filters, there is a gap between filters and action buttons, allowing the projects list to be visible and scrollable underneath.

Please make the necessary adjustments to address these issues. Test the changes on both the Projects page and the Home page.

[Anahisv23]

Hey @jphamtv thanks for the feedback! I'll look into making these adjustments this week. My availability for this week is from 11am - 5pm.

[Anahisv23]

Update: I worked on addressing some of the feedback you @jphamtv mentioned but I had a very busy week with interviews so I'm looking of getting this done next week!

[Anahisv23]

Hi @jphamtv, I went ahead and made changes to my approach to address the concerns you had. Let me know what you think!

What my new changes address

1. Content section pins just below navigation
2. Removed scrolling from .project-and-filters so projects lists scrolls with whole page
3. Fixed width on .filter-toolbar and added overflow-x to remove horizontal scroll
4. Fixed gap in between filters and action buttons by adding max height property to .filter-toolbar.show-filters on mobile media query

[Thinking-Panda]

Thank you @Anahisv23 for making the requested changes. Following are the behavior that I noticed.

1. In mobile viewport, the size of the filter-toolbar has changed.

   Before Change:
   
   After Change:
   

2. In mobile viewport, the filter and the search bar are pinned to the top and causing an overlap.

4. In desktop viewport, the project list scrolls when the pointer is still in the filter-toolbar.

@jphamtv Please share your thoughts on these observations.

[jphamtv]

Hi @Anahisv23,

Great work on the updates, the following are working well:

• The project section is perfectly implemented for the desktop.
• The filter and project sections scroll to the top of the page, increasing the viewable area.
• The filter section doesn't have horizontal scroll.
• No competing scrolls, resulting in much better functionality.

In addition to the feedback from @Thinking-Panda, please address the following:

• Revert the filter section's horizontal shrinking on desktop view to match the current website's behavior, where only the project cards shrink instead of the filter section.
• Ensure the filter's content height fills the viewable area on desktop view (maybe replace 750px with 100vh and see if that works?).
• On screen width 768px and below, when opening filters, eliminate the gap between the filter and action buttons to prevent projects from being visible underneath.

Thanks for your efforts on this. Reach out if you have any questions.

[Anahisv23]

Hi @Thinking-Panda and @jphamtv thanks for the feedback and visual feedback on this issue. I'll look into this tomorrow or next week. I'm currently interviewing for a company so I have been a bit swamped with work.

[Anahisv23]

Hi @Thinking-Panda and @jphamtv. I wanted to provide an update on the issue and what I've managed to do.

Have completed

• Fixed the pinning problem with filter toolbar and search bar when viewport is below 678 on mobile
• Eliminated gap between filter and action buttons when viewport is below 678 on mobile
• Fixed filter horizontal shrinking so it looks like hack for la website when viewport is above 678 on desktop
• Ensured the filter's content height fills the viewable area when viewport is above 678 on desktop

Still need to work on

• Fixing mobile filter toolbar size
• Fixing the problem where the project list scrolls when the pointer is still in the filter-toolbar section

[Anahisv23]

Hi @Thinking-Panda and @jphamtv. Hope y'all are well! I've managed to incorporate changes based on the feedback y'all provided. Thanks for the feedback btw the website looks so much nicer haha. Below I'll include details of what I did to address the feedback given. Let me know if you have any more feedback or questions.

Based on @Thinking-Panda feedback
On mobile the filter toolbar and search bar no longer pin

• On the media query for mobile and tablet I changed .filter-toolbar position to position relative to prevent it from taking sticky positioning styles for desktop .filter-toolbar css styling
• I added a media query to form#search-bar and changed position to position static to prevent it from taking sticky positioning styles for desktop form#search-bar css styling

On mobile I fixed sizing of filter toolbar size

• On media query for mobile and tablet I adjusted .filter-toolbar width, top, bottom, left, and right properties to prevent it from inheriting the filter-toolbar desktop styling

On desktop I prevented scrolling through projects list when we reach the end of the filters tool bar scroll section when the pointer is still on filter-toolbar

• By adding an event listener on current-projects.js

Based on @Jpham feedback
On desktop I ensure the filter's content height fills the viewable area

• By editing height to be 95% of the viewport so its fills the full viewable area

On desktop I fixed filter horizontal shrinking so it looks like hack for la website where only projects shrink

• By adding flex-shrink 0 to prevent filter toolbar section from shrinking horizontally

On mobile I eliminated the gap between filter and action buttons

• By removing the max height property so that the max height property doesn’t act like a constraint to the height specified

[jphamtv]

Hi @Anahisv23, you've made excellent progress on this! You're almost there. You handled all the previous items, but a couple more issues came up with the Filters section.

1. On shorter screens, when the filter area is not in the sticky position up top, it should be scrollable within the viewable area. In the image below, the Status category is not reachable. The scrolling works fine when the filters are sticky and pinned to the top, but it should also be scrollable in the viewable area on screens with shorter vertical height.

2. The scroll functionality doesn't work consistently in the Languages/Technologies/Tools section when you click "View more". It works intermittently, or not at all.



Let me know if you have any questions.

[Thinking-Panda]

@Anahisv23 Thank you for persistently working on this issue. A couple of things that I observed are:

1. Based on @jphamtv observations, I notice that the scroll in the Languages/Technologies/Tools section freezes when the window is resized
2. On viewports <768px, I believe that the search bar has to be pinned to the top as per the issue.
3. I still observe that the "projects-inner" div scrolls when the pointer is still in the filter-toolbar section.

[Anahisv23]

Hey @jphamtv and @Thinking-Panda thanks for the feedback!

@jphamtv I've managed to fix the first issue you mentioned. Regarding the second issue do you mind doing a screen recording of the Languages/Technologies/Tools scrolling bug. I'm not seeing the scrolling bug on my end at all in mobile or desktop and I want to get an understanding on what it looks like on your end.

@Thinking-Panda I believe the issue states that the search bar should be pinned when the viewport widths are above 767px in which case it is pinned. Regarding the third bullet point do you mind doing a screen recording of the project list scrolling that occurs when the pointer is on the filters-toolbar section. I want to get an understanding on what it looks like on your end.

Thank you!

[Thinking-Panda]

@Anahisv23 , my understanding is that the the filter and project are pinned to each other and centered for viewports above 767px (Like, there is no gap/space in between the filter and the projects). And for mobile viewport, you follow the REI website as a reference and pin the search bar. @jphamtv- Please share your perspective on this.

Here is a recording of the scrolling.

[Anahisv23]

Hi @Thinking-Panda thanks for sharing the recording about the scrolling. I'll try to see what I can do about that. I'm curious if @jphamtv if you are experiencing the scrolling issue on your end as well? Regarding the search bar pinning on mobile, I can definitely fix that. Regarding the gap between the filter and projects could you provide a screenshot of the gap you are talking about. I want to make sure I'm understanding. Thank you!

[jphamtv]

@jphamtv I've managed to fix the first issue you mentioned. Regarding the second issue do you mind doing a screen recording of the Languages/Technologies/Tools scrolling bug. I'm not seeing the scrolling bug on my end at all in mobile or desktop and I want to get an understanding on what it looks like on your end.

@Anahisv23 - Here's a video of what I'm experiencing on my end. The same issue is on mobile.

Screen.Recording.2024-06-13.at.16.27.21.mov

@Anahisv23 , my understanding is that the the filter and project are pinned to each other and centered for viewports above 767px (Like, there is no gap/space in between the filter and the projects). And for mobile viewport, you follow the REI website as a reference and pin the search bar. @jphamtv - Please share your perspective on this.

@Anahisv23 , @Thinking-Panda - The issue specifically mentions viewport widths above 767px but not below, which leads me to believe that mobile viewports may be out of scope. However, it would be best to clarify this with those involved in ER #4530 who identified the problem.

[Anahisv23]

Hello :) Thanks for the feedback and for the screen recordings! Here’s an update

@Jpham feedback

• To fix the status filter not being scrollable on shorter vertical screens

  • I added padding to the top and bottom of filtersDiv on desktop
  • Adjusted the filtersDiv css rules on mobile since it was inheriting the css rules for desktop

• Still need to look into the languages/technologies/tools scrolling inconsistencies

  • Any suggestions/resources on how to approach this issue? I’m thinking I have to modify .dropdown.show-all on line 126 on dropdownfilters.scss file.

@Thinking-Panda feedback

• Will reach out to those involved in the ER ER: Filters on project page #4530 whether we need to pin the search bar on viewport width below 767px. Thanks for bringing this up!
• Removed gap in between projects and filter toolbar
• Regarding the scrolling of projects inner while mouse is on filter-toolbar. I’m blocked on how to fix this issue. Do you have any suggestions/resources on how to approach this?