Skip to content

Make the probe viewer usable on phones and short screens - #82

Open
h-mayorquin wants to merge 2 commits into
SpikeInterface:mainfrom
h-mayorquin:mobile-layout
Open

h-mayorquin wants to merge 2 commits into
SpikeInterface:mainfrom
h-mayorquin:mobile-layout

Conversation

@h-mayorquin

Copy link
Copy Markdown
Collaborator

When I opened the viewer on my phone I realized that the probe page was not usable. The page is locked to the height of the screen and on a narrow screen the probe list pushes the viewer below the bottom edge where it can't be reached. The same lock cuts off the bottom toolbar on laptop windows shorter than about 680px. This PR lets the page scroll when the screen is narrower than 960px or shorter than 680px and caps the probe list at 40% of the screen height. Once the page scrolls a finger drag on the probe would scroll the page, so I also set touch-action: none on the canvas to keep the drag as a pan. The mouse wheel over the probe still zooms, and on a large desktop window nothing changes. I also let the export and share buttons wrap under the title on narrow screens. I tested it on a Pixel 9 with a preview deployed from my fork:
https://h-mayorquin.github.io/probeinterface_library/

The second commit renames the classes and components of the probe page. Names like app-sidebar, app-main and viewer-canvas describe where things sit instead of what they are, and that made the layout hard to talk about while working on this. So Sidebar is now ProbeSelectionMenu, ProbeCanvas is ProbeDrawing, ProbeOverview is ProbeMinimap, and the sidebar-* and viewer-* classes follow the same scheme. I kept it as a separate commit so the functional change can be reviewed on its own. I compared screenshots of three probes at three window sizes before and after the rename and saw no visual change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant