Improve side panel behavior in mobile interface

[jamesmisson]

As discussed in #1337, this makes sure that the left and right panels can't be open at the same time in mobile view: if one is open while the other one is opened, it is automatically closed.

[jamesmisson]

Thanks, @sturkel89!

Here's an example of one of the MediaElement extension jobs that demonstrates the problem: https://universalviewer-git-fork-jamesmisson-autoclos-887f9c-mnemoscene.vercel.app/#?xywh=-2376%2C-1%2C7320%2C3543&iiifManifestId=https%3A%2F%2Fdigital.library.villanova.edu%2FItem%2Fvudl%3A283833%2FManifest

This looks to me like a z-order consistency problem -- we either always want the attribution box in the front, or we always want it behind the panels, but it's strange that it's in different positions in different contexts.

I'm honestly not sure which is preferable -- neither seems either ideal or catastrophic. But it would make more sense if it was the same everywhere!

What do you think, @jamesmisson? And is this worth trying to fix here, or should we get this merged and tackle the attribution z-order as a separate PR?

Thanks @demiankatz , I've just fixed this. The attribution panel had an arbitrarily high z-index I assume to get it over the media content, but the new left/right panel z-indexes were lower. I've put it at 19 just below the panels' 20. I figure we should keep the attribution below the panels, as it's got some transparency on it it'll potentially look messy if over text in the left panel.

[sturkel89]

Thanks, @jamesmisson ! This looks a lot better; the Attribution box is consistently below the panels in terms of layers.

My only remaining issue is one I pointed out in my first example with the orange arrows (above). The Attribution box on is located lower toward the bottom of the screen in mobile view, so its part of the box is visible when the autoclose panels are open.

The Attribution box is lower toward the bottom of the screen for scanned items and PDFs than it is for audio and video items. When the autoclose panels are open for audio and video items, those panels completely cover the Attribution box.

Is it possible to force the Attribution box to always appear in the same spot on the screen, ideally a bit higher up?

Here are four screenshots to demonstrate:

[jamesmisson]

Thanks @sturkel89 , I've made it so that the attribution margins adapt to the mobile view and are in line with the bottom of the panel when viewing images or media, so it's not visible when the panel is open now.

[sturkel89]

Thanks, @jamesmisson ! I see that the bottom of the attribution panel is higher now. I tested each of these examples and see that the sliding panels completely cover the attribution panel, so that solves my issue. The attribution panels are all in approximately the same location; the height of some may be shorter if the license is displayed as a line of text instead of a larger graphic.

[LlGC-jop]

Added suggestion for comment update

[demiankatz]

Thanks again, @LlGC-jop and @jamesmisson. I believe this is ready to merge now, unless anyone else wants to do any last-minute testing.

[LanieOkorodudu]

Thanks again, @LlGC-jop and @jamesmisson. I believe this is ready to merge now, unless anyone else wants to do any last-minute testing.

@demiankatz I just test this using Browserstack to test it in mobile view and looks good on my end.