Modal integration

[obulat]

Summary

Show the media details in a modal view to ease the browsing navigation by jumping between content more quickly.

Description

The single results should open in a modal when navigated client-side, and on a separate page if rendered by the server. The designs for this were ready during the Audio release, but they would need to be updated to match the new designs.

The media details in a modal view was part of the audio integration and branding stage of the project to facilitate jumping between content without leaving the results page, but the integration has been delayed due to rational reasons. The current page (known as single result page) was designed for users landing from Openverse links.

This modal will need to be implemented so that the URL has the information about the currently open result and it should be possible to use the browser Back and Forward buttons correctly. 

Best guess at list of implementation plans:

• Updated design plans

• Frontend implementation plan

Prerequisites

• Nuxt 3 migration #411 We need the updated Vue router because it is better at handling the back/forward navigation and updating (replacing) part of a URL.

Documents

• Project Proposal
• Implementation Plan

Issues

Prior Art

• Single result page modal behavior #640
• Nested modal handling #635

[openverse-bot]

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design"

Thus the following users have been cc'd because of the following labels:

• WordPress/gutenberg-design: 🖼️ aspect: design
• WordPress/openverse: 🖼️ aspect: design

To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file.

Learn more.