feat: improved the UX on the feeds page and scroll behaviour #1506
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for design-insights ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for oss-insights ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
|
Thank you for having your first PR; since this is a transition behavior can you add a video of the before and after? an image would not describe the PR. |
a0m0rajab
approved these changes
Aug 6, 2023
Yea, I wanted to record one but my PC doesn't have an inbuilt screen recorder😔 |
Yea I get your point |
|
For the recording you can Google, screen recorder and you will find few online recorders
I used this couple of time, https://www.screencapture.com/
And there chrome extension for that, if you like an open source alternative you can check:OBS, or OBS streamlabs
As for the sidebar items, I think a review from the team would be great to have another opinion.
Sent from mobile device
…________________________________
From: dev-phantom ***@***.***>
Sent: Sunday, August 6, 2023 11:36:06 PM
To: open-sauced/insights ***@***.***>
Cc: Abdurrahman Rajab ***@***.***>; Comment ***@***.***>
Subject: Re: [open-sauced/insights] feat: improved the UX on the feeds page and scroll behaviour (PR #1506)
LGTM 🍕 The only feedback that I have is that we need to minimize the items on the left and right side of the screen, but that is out of the scope of this. Just wrote it here for visibility purpose.
[image]<https://user-images.githubusercontent.com/18273833/258662598-35d168e0-8482-48ce-8a90-4869b14829bb.png>
Yea I get your point
We could have a specific height and make the repository items scrollable by adding overflow-y-auto to it or reduce the sticky top position
—
Reply to this email directly, view it on GitHub<#1506 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AELNMKMTJ4FNGVXKRMAXI4TXT753NANCNFSM6AAAAAA3GCBCVQ>.
You are receiving this because you commented.Message ID: ***@***.***>
|
It has been merged sir 🤔 |
|
Thanks @dev-phantom, this is good to go after the merge conflicts are resolved |
open-sauced bot
pushed a commit
that referenced
this pull request
Aug 8, 2023
## [1.59.0](v1.58.0...v1.59.0) (2023-08-08) ### 🧑💻 Code Refactoring * replace supabase/ui in design system typography components ([#1438](#1438)) ([38cfb30](38cfb30)) ### 🍕 Features * add a user notifications page ([#1478](#1478)) ([022dc69](022dc69)) * add conditional routing to single highlight dialog close action ([#1473](#1473)) ([1341cba](1341cba)) * add github link to profile ([#1459](#1459)) ([d42bc6d](d42bc6d)) * add support for highlight.new ([#1487](#1487)) ([3daa5c0](3daa5c0)) * improved the UX on the feeds page and scroll behaviour ([#1506](#1506)) ([31c1593](31c1593)) * onboarding auto fetch timezone ([#1488](#1488)) ([ae5cdd7](ae5cdd7)) ### 🐛 Bug Fixes * Feed page responsiveness ([#1490](#1490)) ([67662b2](67662b2)) * feeds page typography and styles improvements ([#1467](#1467)) ([a3b289e](a3b289e)) * on page reload Insights page redirecting to Dashboard ([#1517](#1517)) ([397c36e](397c36e)) * update environment variable for Sentry ([#1521](#1521)) ([56ac14b](56ac14b)) * update release workflow to use GitHub app for semantic versioning ([#1484](#1484)) ([3f1ce84](3f1ce84)) * update user interest logo error for machine learning ([#1474](#1474)) ([a286eda](a286eda)) * uses session to update user info for notifications check ([#1486](#1486)) ([60d787e](60d787e))
19 tasks
19 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Issue: Currently, there is an issue where the highlight filters and user card scroll along with the content when scrolling through the feed. This behaviour is not user-friendly and can lead to confusion and a bad user experience.
Changes Proposed:
In this pull request, i addressed the scrolling behaviour to enhance the overall user experience and ensure a smoother and more intuitive interaction with the feed. The following changes have been implemented:
Fixed Position for Navigation Menu: The navigation menu is now set to have a fixed position as the user scrolls through the feed. This means that the navigation menu will remain visible at the top, offering users quick access to navigation options.
Sticky Position for Filters and User Card: The filters and user card sections are now set to have a sticky position as the user scrolls through the feed. This means that these elements will remain visible at their designated positions, offering users quick access to important information and controls without any disruption caused by scrolling.
Smooth Transition: To maintain a visually pleasing transition, i have incorporated a smooth scrolling effect when transitioning between different sections of the feed. This ensures that the user's focus remains on the content while seamlessly interacting with the filters and user card.
What type of PR is this? (check all applicable)
Related Tickets & Documents
Fixes #1353 and Fixes #1451
Mobile & Desktop Screenshots/Recordings
Added tests?
Added to documentation?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?