Single result page modal behavior

[zackkrida]

Description

Single result pages will be styled as modals when navigated to from the search results view, but will be full-width pages when visited server-side, direct from a shared url, for example. You can observe this behavior on Unsplash by searching for an image, viewing the result, and then refreshing the page:

CleanShot.2021-12-03.at.11.28.15-converted.mp4

[fcoveram]

I have been playing with different ideas, and here is the version I like most for both single result views.

Header ideas

For the header, I tried a more prominent search bar, an expanded internal menu, and hiding the search result controls (content switcher + filters) since both are content-related. But I also tried showing the openverse logo (symbol + name) as thinking of users opening an Openverse link without knowing the tool. In that scenario, adding the openverse name would help with adding more context.

That being said, the header used in mockups has a full-width grid of Modal L, as introduced in ticket WordPress/openverse-frontend#522.

[fcoveram]

Regarding Full size M audio component, I tested different widths and background colors.

Audio component versions

A full-width grid with a gray background version looks centered and balanced, but when playing it, the yellow background will look odd since it does not start from the far-left beginning.

A full-width grid with white background version looks clean and it blends greatly with the header. However, by consistency, the image single result page looks floating and empty due to white space on the sides. Plus the yellow background problem when playing the audio.

Finally, a full-width page with white background also looks beautiful by the blending effect, and it works well with showing the yellow background. But it has the consistency problem with the image single result view.

[fcoveram]

I updated the Releases file with the mockups, and the Design Library with a new variant of the header component: Header. Modal.

[zackkrida]

The simplest way to do this off the top of my head:

When navigating to a single result from the search result pages, display the single audio/image view in a modal and update the url without re-routing. When single result links are visited directly, continue the same behavior we have now of showing them as standalone pages.

[obulat]

This issue is blocked by the Nuxt 3 migration.