Fix 938 mobile sidebars by LlGC-jop · Pull Request #1337 · UniversalViewer/universalviewer

LlGC-jop · 2025-03-11T13:06:34Z

Changes the layout of the left, center, and right panels to be controlled more via CSS + Media queries than the previous JS.

On larger screens they use a grid layout.

On mobile the center panel is full sized, with the left and right panels hidden off screen via transforms.

JS animations have been removed in favour of CSS transitions, with the timing of the transitions being controlled via CSS custom properties, the main one being set/overridden on the root html element where appropriate via JS, based on UV config.

Also includes work by @jamesmisson on new footer buttons to control the side panels and closing the left panel when a thumbnail is clicked on mobile.

…info

UV -> my dev

Mobile trigger moreinfo

…ity is possible

…parent

…/universalviewer into fix-938-mobile-sidebars

…the gallery

…ormal panel open and full open

… leftpanel with isMetric

…o autoclose-mobile-thumbnails

…smisson/universalviewer into autoclose-mobile-thumbnails

demiankatz

See below for a few suggestions and TODOs.

In addition to those, I agree that we need to add logic to close any open panels when a new panel is opened at the small size, to prevent confusing overlaps. Is this something @jamesmisson would like to try, or would you like me to look into it?

demiankatz · 2025-03-11T17:45:02Z

        "feedback": "Feedback",
        "fullScreen": "Full Screen",
        "moreInfo": "More Information",
+        "toggleLeftPanel": "Toggle Left Panel",


I think this should be using the shorthand versions of everything for proper translation.

Suggested change

"toggleLeftPanel": "Toggle Left Panel",

"toggleLeftPanel": "$toggleLeftPanel",

demiankatz · 2025-03-11T17:45:35Z

        "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"


Same here:

Suggested change

"toggleLeftPanel": "Toggle Left Panel"

"toggleLeftPanel": "$toggleLeftPanel"

demiankatz · 2025-03-11T17:45:57Z

        "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"


...and here:

Suggested change

"toggleLeftPanel": "Toggle Left Panel"

"toggleLeftPanel": "$toggleLeftPanel"

demiankatz · 2025-03-11T17:46:07Z

        "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"


Suggested change

"toggleLeftPanel": "Toggle Left Panel"

"toggleLeftPanel": "$toggleLeftPanel"

demiankatz · 2025-03-11T17:46:32Z

        "open": "$open",
-        "share": "$share"
+        "share": "$share",
+        "toggleLeftPanel": "Toggle Left Panel"


Suggested change

"toggleLeftPanel": "Toggle Left Panel"

"toggleLeftPanel": "$toggleLeftPanel"

demiankatz · 2025-03-11T17:50:37Z


    if (this.isFullyExpanded) {
-      this.$element.width(this.$element.parent().width());
+      //this.$element.width(this.$element.parent().width());


Should this remain commented out, or can/should it be fully removed?

Thanks @demiankatz, I missed this one. I'll remove it.

demiankatz · 2025-03-11T17:51:53Z

  "$feedback": "Adborth",
  "$fullScreen": "Sgrin lawn",
  "$moreInfo": "Mwy o Wybodaeth",
+  "$toggleLeftPanel": "Toggle Left Panel",


Translation needed!

demiankatz · 2025-03-11T17:52:04Z

  "$feedback": "Commentaire",
  "$fullScreen": "Affichage en plein écran",
  "$moreInfo": "Informations",
+  "$toggleLeftPanel": "Toggle Left Panel",


Translation needed!

demiankatz · 2025-03-11T17:52:12Z

  "$feedback": "Feedback",
  "$fullScreen": "Pełny ekran",
  "$moreInfo": "Więcej informacji",
+  "$toggleLeftPanel": "Toggle Left Panel",


Translation needed!

demiankatz · 2025-03-11T17:52:25Z

  "$feedback": "Feedback",
  "$fullScreen": "Helskärm",
  "$moreInfo": "Mer information",
+  "$toggleLeftPanel": "Toggle Left Panel",


Translation needed!

jamesmisson · 2025-03-12T12:34:03Z

Thanks Jonathan this is really great. I have some non-functional UX/UI thoughts we can discuss when it gets to that stage (you're probably aware of these already):

The expansion animation feels very different from the current version - a bit slower, and has an ease-in I think? Should we try to match the previous animation, which felt a bit snappier to me. The animations are not the same on left and right panel in desktop mode (right feels faster).
I am seeing brief flashes of the panel content being re-arranged, and a horizontal scrollbar appearing on the bottom, when the panels are opening/closing in desktop. Is it possible to hide the content before the animation? I think the current version does this.
Selecting the thumbnail in mobile view re-centres the thumbnail in the scroll area while the panel is closing, which I didn't spot when I was working on this. I'll see if I can prevent that.
The margins on the outer and upper sides of the panels in desktop are smaller in this version, and almost invisible with the low contrast between the grey and black. I think to maintain the illusion that the panels are floating above the black canvas we should bring these back to 8px. But we should return to this when we think about the header design in the future (I think, for instance, that the header panel should be 30px, just as tall as its buttons, so the panel widths and margins would need to be rebalanced if we do this). The prototype team may have addressed this already @erinburnand @LlGC-szw @Saira-A

Checked on an actual mobile, and it's vastly improved the UX!

@demiankatz yes I can look into auto-closing the opposite panel when one is opened.

LlGC-jop · 2025-03-12T13:04:53Z

@jamesmisson

Re the points above:

I think I changed the default config (in uv-iiif-config.json) for the left panel expansion to be 400ms rather than the default 250ms in order to see where it was set from and how to use it. I'll take this out so it's all back to 250ms.
Good idea - I'll look into hiding the content sooner
Thanks
I'll have a look at changing the margins back to what they were before.

…close (md+)

jamesmisson · 2025-03-12T18:00:07Z

I've made the autoclosing adjustments in this PR: #1343

The issue of the thumbnail autoscrolling when selected is more in depth, but as it's barely visible now that the left panel content is hidden before the animation I don't think it's a priority.

demiankatz · 2025-03-12T19:55:45Z

Thanks, @jamesmisson! Should @LlGC-jop just merge your branch from #1343 into this one, so we can close #1343?

Also, who is the right person to address my outstanding review comments? Do we have translations in progress? Do you want me to take care of doing the search-and-replace to fix all those configs that need adjusting?

demiankatz · 2025-03-12T19:56:18Z

Also, I see there are conflicts here now -- resolving these should be as simple as merging the dev branch into this branch, running npm run docs and then adding/committing all changes to the docs folder.

jamesmisson · 2025-03-13T09:26:31Z

Hi both, I based #1343 off of this branch so @LlGC-jop should be able to just merge it.

@demiankatz there are translations for 'Open...' and 'Close...' in the comments here, but I'll need to fix the mechanism to adjust the labels according to the panel state before we can use them. I'll look at that today and make a new PR based on this one too.
#1334

autoclose mobile panel if other panel opened

LlGC-jop · 2025-03-13T14:00:47Z

#1343 is merged in now. Lots of conflicts from those docs files - I seem to keep getting them as conflicts. Are they something that can be put in the gitignore?

demiankatz · 2025-03-13T14:07:36Z

#1343 is merged in now. Lots of conflicts from those docs files - I seem to keep getting them as conflicts. Are they something that can be put in the gitignore?

We need to commit them because they are used to publish the documentation to the website. There's probably a way to adjust things to make this less annoying, but it would require some changes to infrastructure (e.g. changing how we publish the website, changing the timing/behavior of GitHub Actions, etc.).

demiankatz · 2025-03-14T19:42:54Z

This has all been merged into #1343, so I'm closing this to reduce confusion.

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.

jamesmisson and others added 30 commits February 27, 2025 17:40

trigger rightpanel with mobile footer moreinfo button

7fd6e9c

Merge remote-tracking branch 'upstream/dev' into UX-mobile-moreinfo

fc03b0d

Merge remote-tracking branch 'johnathan/dev' into mobile-trigger-more…

3131b2b

…info

merge jonathan/dev

148200d

Merge pull request #3 from UniversalViewer/dev

bf08f76

UV -> my dev

Merge pull request #4 from jamesmisson/mobile-trigger-moreinfo

c96037b

Mobile trigger moreinfo

Commit from GitHub Actions (Lint code)

aa94f0e

autoclose left panel on thumbnail or treenode select

c54375d

autoclose in sm only, clean up

e31029a

Add setting for animationDuration and set on loading the settings dialog

3e3c90a

Set css props from config, update css transitions

227bbc7

Commit from GitHub Actions (Lint code)

1e69e2e

Add extra state class to panels so greater control over child visibil…

12f0fd8

…ity is possible

Commit from GitHub Actions (Update Documentation)

3f1ad80

Allow panels to choose whether width and height are auto recalc'd to …

e785186

…parent

Handle a race condition

543c281

Don't let L & R panels have their height set by JS any more

b1286f4

Update transition props and comment out !importants for now

ac6ddbb

Commit from GitHub Actions (Lint code)

b419e8a

tmp add important back to width to fix gallery view issue

a1f6b02

Merge branch 'fix-938-mobile-sidebars' of https://github.com/LlGC-jop…

2e24d1f

…/universalviewer into fix-938-mobile-sidebars

Don't set the width on the element on full expand - let the css do it

23bd3a1

Add a timeout to allow the resize to finish before resize is done on …

9e4cbbc

…the gallery

Move setting of the open-finished class so that it happens for both n…

600ed88

…ormal panel open and full open

Tidy of css and transitions

124daea

contentLeftPanel animation change for testing

cbf4e57

updateMetric on init, add isMetric function, conditional autoclose of…

d1be686

… leftpanel with isMetric

Merge branch 'dev' of https://github.com/LlGC-jop/universalviewer int…

206b3b2

…o autoclose-mobile-thumbnails

Merge branch 'autoclose-mobile-thumbnails' of https://github.com/jame…

90a73a2

…smisson/universalviewer into autoclose-mobile-thumbnails

Merge remote-tracking branch 'upstream/dev' into fix-938-mobile-sidebars

6d2adfd

Hide 'closed' markers in panels on mobile as they're irrelevant

d3355f1

vercel Bot deployed to Preview – universalviewer March 11, 2025 17:04 View deployment

demiankatz requested changes Mar 11, 2025

View reviewed changes

Remove commented out width setting

a1f225d

vercel Bot deployed to Preview – universalviewer March 12, 2025 09:02 View deployment

LlGC-jop linked an issue Mar 12, 2025 that may be closed by this pull request

Responsive mode for small screens prevents access to sidebar content #938

Closed

3 tasks

Restore 8px spacing in the main panel

a6bf022

vercel Bot deployed to Preview – universalviewer March 12, 2025 13:16 View deployment

Remove left panel animation time override

9264bd6

vercel Bot deployed to Preview – universalviewer March 12, 2025 13:21 View deployment

Set linear timing functions

438d899

vercel Bot deployed to Preview – universalviewer March 12, 2025 14:21 View deployment

Update child container display so there's no squishing on content on …

a61d90b

…close (md+)

vercel Bot deployed to Preview – universalviewer March 12, 2025 14:56 View deployment

autoclose mobile panel if other panel opened

e5136d5

jamesmisson mentioned this pull request Mar 12, 2025

Improve side panel behavior in mobile interface #1343

Merged

LlGC-jop and others added 2 commits March 13, 2025 13:04

Merge pull request #7 from jamesmisson/autoclose-mobile-panels

fd1c7b8

autoclose mobile panel if other panel opened

Commit from GitHub Actions (Lint code)

eb5935d

vercel Bot deployed to Preview – universalviewer March 13, 2025 13:07 View deployment

demiankatz closed this Mar 14, 2025

	"toggleLeftPanel": "Toggle Left Panel",
	"toggleLeftPanel": "$toggleLeftPanel",

	"toggleLeftPanel": "Toggle Left Panel"
	"toggleLeftPanel": "$toggleLeftPanel"

Uh oh!

Uh oh!

Conversation

LlGC-jop commented Mar 11, 2025

Uh oh!

demiankatz left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jamesmisson commented Mar 12, 2025

Uh oh!

LlGC-jop commented Mar 12, 2025

Uh oh!

jamesmisson commented Mar 12, 2025

Uh oh!

demiankatz commented Mar 12, 2025

Uh oh!

demiankatz commented Mar 12, 2025

Uh oh!

jamesmisson commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LlGC-jop commented Mar 13, 2025

Uh oh!

demiankatz commented Mar 13, 2025

Uh oh!

demiankatz commented Mar 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jamesmisson commented Mar 13, 2025 •

edited

Loading