zubhub
zubhub copied to clipboard
unstructuredstudio
Improve Notification and Signup Panel's Responsiveness
Description
Notification and signup panels behave abnormally below a certain screen size. They should either be in their original place, or they can be full-screen, just like how we show notification panel to logged in mobile users. Waiting for suggestions to improve these, thanks.
To Reproduce:
- Visit https://zubhub.unstructured.studio/
- Make sure you are not logged in
- Click on the notification or the avatar icons on the top right
- Make your screen width below 600
Hey @brrkrmn this is how it looks on an iPhone 14 plus, width 428px. I don't think it should show a full screen
@mehreeee leaning more into the second one. First one looks like it's too big for that screen size.
@mehreeee leaning more into the second one. First one looks like it's too big for that screen size.
Thank you @DonPresh. @brrkrmn you can use the second size for it. The sizes should be the same on both modals to maintain consistency.
@mehreeee This is for mobile yeah? How about designing a different solution? Let me whip up something real quick. We can make further iterations to the design.
https://github.com/unstructuredstudio/zubhub/assets/100778015/a5d6ea43-80a5-47ff-b174-b9d24de771c7
@mehreeee and @brrkrmn what do you think? A lil different from what we have (P.S, the texts are filler texts) but makes that place a little less cluttered.
Screen.Recording.2023-11-07.at.12.35.18.mov @mehreeee and @brrkrmn what do you think? A lil different from what we have (P.S, the texts are filler texts) but makes that place a little less cluttered.
Looks great. But they look more like links that will open in new tabs and will take a lot longer to implement. I'm assuming we want to keep users on the same page.
The signup panel can just be centered on smaller screens I think @brrkrmn
Hi @brrkrmn the scrollbar issue has been fixed, good job. Like @NdibeRaymond suggested here https://github.com/unstructuredstudio/zubhub/pull/989#issuecomment-1793727487, we could also fix the same issue on the web. Like making the modal not cover the top nav bar here, but fix it directly below the notification bell.
Nice Iterations @mehreeee @DonPresh I agree with @aqsaaqeel suggestion I feel it would be better if the notification and signup panels are centered aligned reason been that : Center aligned modals adapts well to different screen sizes and orientations, and also draws the user's attention to the modal's content, making it the primary focal point.
See screenshot of what I designed below
Nice Iterations @mehreeee @DonPresh I agree with @aqsaaqeel suggestion I feel it would be better if the notification and signup panels are centered aligned reason been that : Center aligned modals adapts well to different screen sizes and orientations, and also draws the user's attention to the modal's content, making it the primary focal point.
See screenshot of what I designed below
Nice design @Dumzy006. If it’s going to be centralized it might as well be a full screen because it’s kind of covering the other ‘share your work’ CTA button.
Since you are logged out, the 'share your work' button still serves the same purpose as to that of the 'notification' and 'sign up' when clicked @meh
Nice Iterations @mehreeee @DonPresh I agree with @aqsaaqeel suggestion I feel it would be better if the notification and signup panels are centered aligned reason been that : Center aligned modals adapts well to different screen sizes and orientations, and also draws the user's attention to the modal's content, making it the primary focal point. See screenshot of what I designed below
Nice design @Dumzy006. If it’s going to be centralized it might as well be a full screen because it’s kind of covering the other ‘share your work’ CTA button.
Since you are logged out, the 'share your work' button still serves the same purpose as to that of the 'notification' and 'sign up' when clicked .... Any one works @mehreeee
Since you are logged out, the 'share your work' button still serves the same purpose as to that of the 'notification' and 'sign up' when clicked @meh
Nice Iterations @mehreeee @DonPresh I agree with @aqsaaqeel suggestion I feel it would be better if the notification and signup panels are centered aligned reason been that : Center aligned modals adapts well to different screen sizes and orientations, and also draws the user's attention to the modal's content, making it the primary focal point. See screenshot of what I designed below
Nice design @Dumzy006. If it’s going to be centralized it might as well be a full screen because it’s kind of covering the other ‘share your work’ CTA button.
Since you are logged out, the 'share your work' button still serves the same purpose as to that of the 'notification' and 'sign up' when clicked @mehreeee
Yeah I agree. But The main CTA is the share your work. It shouldn’t be covered so users can chose any of the options to sign in. Just my opinion tho 👍
@mehreeee, @DonPresh, @Dumzy006, @aqsaaqeel thank you guys for your great suggestions, I think centering the modal in the page looks really good, about it covering the 'share your work' button, both of the buttons redirect the user to the same page so I am not sure if it creates a problem
Hi @brrkrmn the scrollbar issue has been fixed, good job. Like @NdibeRaymond suggested here #989 (comment), we could also fix the same issue on the web. Like making the modal not cover the top nav bar here, but fix it directly below the notification bell.
@mehreeee thank you for reminding this, you're right this should also be fixed. We can also add the close buttons as you suggested as part of this issue since it looks like a small fix
@srish @tuxology @brrkrmn I would like to work on this issue. Can you please assign this issue to me? Thanks :)
