Change Details

**Goals** The aim of this is to replicate the existing features of Multimedia Viewer on Minerva while while adding some minimal usability improvements. The idea is that this will give us a good foundation to build on for future instances of image browsing experiments. [[ https://www.figma.com/design/Pl5dJQk7D6FjIt7GjtXuSX/Image-browsing-scaling?node-id=101-42&m=dev&t=r332Xp7GHdr11wJT-1 | Figma Link ]] {F72409552} {F72410719} {F73034866} **Notes:** - Use background-base-interactive for the background - Image is fully visible and full bleed. Location is equidistant from header and footer elements. - description is underneath the image if there is one. Two lines then truncate. Uses the caption style. Links are primary progressive - Licensing information links to commons - move the next and previous arrows to the bottom alongside the pagination so they don't cover the images - Medium button for pagination - use the normal neutral style for buttons - single tap hides everything except the close affordance. Tapping anywhere again brings back the chrome - Title is two lines then truncate - Author is one line and truncate - MMV is always in dark mode

==== Goals Implement the baseline mobile image viewer per the [[ https://www.figma.com/design/Pl5dJQk7D6FjIt7GHdr11wJT-1 | Figma spec ]]. The viewer is a Vue 3 / Codex overlay that replaces MMV on mobile (Minerva). [[ https://www.figma.com/design/Pl5dJQk7D6FjIt7GjtXuSX/Image-browsing-scaling?node-id=101-42&m=dev&t=r332Xp7GHdr11wJT-1 | Figma Link ]] {F72409552} {F72410719} ==== Acceptance Criteria - [x] **Basic layout** is in place (header with title + close, full-bleed image, caption + details link, bottom nav bar with prev/next + counter). Progressive image loading and prefetch are working. - [x] **Keyboard navigation** — Left/Right arrow keys to navigate images, Escape to close the viewer. - [ ] **Author line** — Display the image author/attribution below the title in the header. One line, truncated with ellipsis. (Note: we need to add a new API call to get this info.) - [ ] **Tap-to-toggle chrome** — Single tap on the image area hides all UI chrome (header, caption, nav bar) except the close button. A second tap anywhere restores the chrome. The close button must remain visible at all times. - [ ] **Medium-sized nav buttons** — The prev/next buttons in the nav bar should use Codex size="medium". - [ ] **Button styling** — Nav and close buttons should use the Codex "normal neutral" weight. Current custom dark-bg overrides (border, hover, active states) should be reviewed against this. **Notes:** * Use background-base-interactive for the background * Image is fully visible and full bleed. Location is equidistant from header and footer elements. * description is underneath the image if there is one. Two lines then truncate. Uses the caption style. Links are primary progressive * Licensing information links to commons * move the next and previous arrows to the bottom alongside the pagination so they don't cover the images * Medium button for pagination * use the normal neutral style for buttons * single tap hides everything except the close affordance. Tapping anywhere again brings back the chrome * Title is two lines then truncate * Author is one line and truncate * MMV is always in dark mode

**Goals** The aim of this is to replicate the existing features of Multimedia Viewer on Minerva while while adding some minimal usability improvements. The idea is that this will give us a good foundation to build on for future instances of image browsing experiments==== Goals Implement the baseline mobile image viewer per the [[ https://www.figma.com/design/Pl5dJQk7D6FjIt7GHdr11wJT-1 | Figma spec ]]. The viewer is a Vue 3 / Codex overlay that replaces MMV on mobile (Minerva). [[ https://www.figma.com/design/Pl5dJQk7D6FjIt7GjtXuSX/Image-browsing-scaling?node-id=101-42&m=dev&t=r332Xp7GHdr11wJT-1 | Figma Link ]] {F72409552} {F72410719} ==== Acceptance Criteria {F73034866}- [x] **Basic layout** is in place (header with title + close, full-bleed image, caption + details link, bottom nav bar with prev/next + counter). Progressive image loading and prefetch are working. - [x] **Keyboard navigation** — Left/Right arrow keys to navigate images, Escape to close the viewer. - [ ] **Author line** — Display the image author/attribution below the title in the header. One line, truncated with ellipsis. (Note: we need to add a new API call to get this info.) - [ ] **Tap-to-toggle chrome** — Single tap on the image area hides all UI chrome (header, caption, nav bar) except the close button. A second tap anywhere restores the chrome. The close button must remain visible at all times. - [ ] **Medium-sized nav buttons** — The prev/next buttons in the nav bar should use Codex size="medium". - [ ] **Button styling** — Nav and close buttons should use the Codex "normal neutral" weight. Current custom dark-bg overrides (border, hover, active states) should be reviewed against this. **Notes:** - Use background-base-interactive for the background -* Use background-base-interactive for the background * Image is fully visible and full bleed. Location is equidistant from header and footer elements. -* description is underneath the image if there is one. Two lines then truncate. Uses the caption style. Links are primary progressive -* Licensing information links to commons -* move the next and previous arrows to the bottom alongside the pagination so they don't cover the images -* Medium button for pagination -* use the normal neutral style for buttons -* single tap hides everything except the close affordance. Tapping anywhere again brings back the chrome -* Title is two lines then truncate -* Author is one line and truncate -* MMV is always in dark mode