Iphone responsive redesign#293
Open
eitan-que wants to merge 3 commits into
Open
Conversation
On narrow screens the controls sidebar no longer sits beside the results. It slides in as an off-canvas drawer toggled from a header button, the results list takes the full width, and the UNFOLLOW action is pinned to a fixed bottom bar. The header reflows into a compact layout with the search field on its own row. README also documents an iPhone setup path: build the bookmarklet on a Mac and let iCloud sync it to Safari on the phone. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The fixed bottom UNFOLLOW bar on mobile overlapped the toast, so the toast is lifted above it and spans the available width on narrow screens. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The star button scales up on hover, which crowded the adjacent checkbox and made it hard to click. Adds margin so the two controls stay comfortably separated. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Author
|
I did this cus I this thing its crazy, but I always remembered to use it while using my phone at school, so I wanted to use it in my phone. |
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
This pull request significantly improves mobile (especially iPhone) usability by introducing a responsive off-canvas sidebar (drawer) for filters and controls, as well as a fixed unfollow button for mobile screens. The changes provide a more intuitive and accessible experience on smaller devices, including a new iPhone usage guide in the documentation. The sidebar can now be toggled via a hamburger button in the header, and the UI adapts cleanly to mobile layouts.
Mobile usability and responsive sidebar:
Introduced an off-canvas sidebar (drawer) for filters and controls on mobile/narrow screens, including a dimmed backdrop, a header with a close button, and slide-in/out transitions. The sidebar is toggled by a new hamburger button in the header and is accessible from both scanning and unfollowing screens. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14]
Added a fixed, full-width unfollow button at the bottom of the screen for mobile users, while hiding the inline desktop unfollow button. [1] [2] [3]
User experience improvements:
Prevents background scrolling when the sidebar is open and automatically closes the sidebar when the app status changes (e.g., switching between scanning and unfollowing).
Enhanced accessibility with proper ARIA labels and improved button hit areas for touch devices. [1] [2] [3]
Documentation:
README.mdwith a detailed iPhone usage guide, explaining how to use the tool via a bookmarklet synced through iCloud, addressing Safari's lack of a developer console.Styling and layout:
main.scssto support the new sidebar, header, and unfollow button, ensuring a clean and usable layout on all screen sizes. [1] [2]These changes collectively make the tool much more user-friendly and functional on mobile devices, especially iPhones, while maintaining a seamless experience on desktop.