Skip to content

Mobile panel toggle buttons #1330

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
Closed
wants to merge 9 commits into from
Closed

Mobile panel toggle buttons #1330

wants to merge 9 commits into from

Conversation

jamesmisson
Copy link
Contributor

NB this PR replaces #1321 so I've closed that one (which was just for the right button but used a confusing variable name for the toggle right panel event).

This one adds both buttons on the mobile footer that toggle the left and right panels open/closed. To do this I've:

  • Added new events for TOGGLE_LEFT_PANEL and TOGGLE_RIGHT_PANEL
  • Added left and right containers for buttons in the footer with styling (as the mobile footer inherits from the footer, this was necessary to get the buttons rendered in the mobile footer positioned in the middle of the footer buttons). @LlGC-jop feel free to play with the styling/layout.
  • Added an SVG icon for the left panel toggle (intended as a placeholder for now)
  • Added button labels for toggle left panel (all locales in English now, will request translations on Slack)
  • Removed all types and components for the original more info dialog box

@vercel Vercel
Copy link

vercel bot commented Mar 7, 2025 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
universalviewer ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 7, 2025 5:21pm

@demiankatz
Copy link
Contributor

@jamesmisson and @LlGC-jop, I think it will be easier for me to test/review/evaluate this when the CSS is updated and the work from #1325 is merged in. Do we want to try to do any incremental merges, or are we better off merging all of this into one epic PR?

demiankatz
demiankatz reviewed Mar 7, 2025
View reviewed changes
src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json
"feedback": "Feedback",
"fullScreen": "Full Screen",
"moreInfo": "More Information",
"toggleLeftPanel": "Toggle Left Panel",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's a bug that this file is missing the shorthand variables for translations. This should probably be $toggleLeftPanel, and the other text should be converted as well (maybe that's a separate PR!).

demiankatz
demiankatz reviewed Mar 7, 2025
View reviewed changes
src/content-handlers/iiif/extensions/uv-default-extension/config/config.json
"open": "$open",
"share": "$share"
"share": "$share",
"toggleLeftPanel": "Toggle Left Panel"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of these other instances should be converted to use $toggleLeftPanel like the uv-av-extension.

demiankatz
demiankatz reviewed Mar 7, 2025
View reviewed changes
src/locales/cy-GB.json
"$feedback": "Adborth",
"$fullScreen": "Sgrin lawn",
"$moreInfo": "Mwy o Wybodaeth",
"$toggleLeftPanel": "Toggle Left Panel",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...and we should be sure not to forget about getting translations for this!

@jamesmisson jamesmisson mentioned this pull request Mar 10, 2025
Open
@demiankatz demiankatz mentioned this pull request Mar 10, 2025
Merged
@LanieOkorodudu
Copy link
Collaborator

@jamesmisson, Thanks for the great work on this so far! The toggle for the left panel to access thumbnails index looks good in mobile view. I did have a small thought, when I tap on an image, I was expecting it to open in the centre panel so that I could zoom in, zoom out and read more easily. Also, when I return to the thumbnail view, it would be great if the image(or page) I had selected remains highlighted, similar to how it works on a desktop.
I realise this is still a draft, but I was wondering @demiankatz, will this functionality also be available on mobile? Just curious if that's how it should work on a mobile view? Thanks again!

@demiankatz
Copy link
Contributor

@LanieOkorodudu, I think when the work here and the work in #1325 are integrated, the mobile experience will make more sense. I believe @LlGC-jop and @jamesmisson will be integrating their work into a new PR later today -- when that is done, the result should be more meaningful to test than these isolated parts.

@demiankatz
Copy link
Contributor

Superseded by #1343.

@demiankatz demiankatz closed this Mar 14, 2025
demiankatz pushed a commit that referenced this pull request Mar 26, 2025
@jamesmisson
Improve side panel behavior in mobile interface (#1343)
1e2c4b5 
This commit makes side panel functionality fully accessible in the mobile view, where critical features were previously unreachable.

It makes responsive behavior more CSS-based and less dependent on Javascript logic.

It incorporates work from #1321, #1325, #1330, #1333 and #1337.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@demiankatz demiankatz demiankatz left review comments

@LlGC-jop LlGC-jop Awaiting requested review from LlGC-jop

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@jamesmisson @demiankatz @LanieOkorodudu @LlGC-jop