Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsiveness and usability on small screen decives #497

Open
wants to merge 24 commits into
base: main
Choose a base branch
from
Open

Responsiveness and usability on small screen decives #497

wants to merge 24 commits into from

Conversation

AjayiMike
Copy link
Contributor

@AjayiMike AjayiMike commented Aug 24, 2024 •
edited
Loading

Summary

This pull request (PR) focuses on improving the responsiveness and usability of the app on small screens. The main changes include:

  • Turning the draft component into a modal on screens below 1280px.
  • Adding a trigger button at the top of the post editor component to access the drafts component in a modal.
  • Ensuring that the Post editor component is wide enough regardless of the user's screen size.
  • make analytics page tab content full width
  • Rendered the cast reaction component differently on small screen
  • adjust top followers component colun according to screen width

The post page

Before the changes:
https://www.loom.com/share/e3dd4b3120444f2c9f597360acbf4886?sid=be9667e8-2fb6-45a9-93a1-c422f746e689

After the changes:
https://www.loom.com/share/5eeb0cbb74a14c9280f1d8056b068ee5?sid=c103b153-7031-4fab-b54d-3a19818fa9c7

The Analytics page

Before the changes:
https://www.loom.com/share/6413fcfa16d04c4e83fa23a3565629eb?sid=bfcb3f85-b7ab-40ff-ae1b-e57c280ce752

After the changes:
https://www.loom.com/share/be2b611b4cae4232b419f0c6c63f7d93?sid=c5d12bfc-5d5d-44b0-995b-52e7bf10571a

@AjayiMike
make login page responsive
d03f075
@AjayiMike
make sidebar sticky to the side instead of fixed
4ed8022
@AjayiMike
fix channels page
79ef0ce
@AjayiMike
fix the app layout by wrapping it with container and defining respons…
d5c8188 
…ive grid for the main section and the side bars
@AjayiMike
Merge branch 'main' of github.com:AjayiMike/herocast
2a87a39
@AjayiMike
Merge branch 'main' of github.com:AjayiMike/herocast
3eb577c
@AjayiMike
Merge branch 'main' of github.com:AjayiMike/herocast
44d209d
@AjayiMike
Merge branch 'main' of github.com:AjayiMike/herocast
4043efa
@AjayiMike
Merge branch 'main' of github.com:AjayiMike/herocast
05bd8f9
@AjayiMike
add no-scrollbar class
c34b02a
@AjayiMike
update NewCastEditor and DateTimePicker components to be properly ren…
46cd8f9 
…dered on even the smallet of screens
@AjayiMike
add useIsomorphicLayoutEffect and useMediaQuery hooks
bd5ff59
@AjayiMike
add drafts modal state and actions to useDraftStore
4c93ca8
@AjayiMike
prevent app layout from distortion by setting the horizontal overflow…
7b7cf3a 
… of the main section to auto
@AjayiMike
render drafts in modal, on screens below 1280px
31d077d
@AjayiMike
autmatically close Drafts modal when screen is below 1280px
7deb4f1
@vercel Vercel
Copy link

vercel bot commented Aug 24, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
herocast ✅ Ready (Inspect) Visit Preview Aug 28, 2024 11:10pm

@AjayiMike AjayiMike marked this pull request as ready for review August 28, 2024 23:37
@AjayiMike AjayiMike requested a review from hellno as a code owner August 28, 2024 23:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hellno hellno Awaiting requested review from hellno hellno is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@AjayiMike