pet-rescue icon indicating copy to clipboard operation
pet-rescue copied to clipboard

Move pet image in the staff pets show pages

Open mononoken opened this issue 7 months ago • 7 comments

Description

tl;dr: We want to remove the right side image from the staff pets show page and add a thumbnail in its place to the header of the page.

We have received negative feedback from developers in regards to the image found on the staff pets show page. Currently, this page has multiple tabs for staff to navigate through for a pet. There is an image of the pet to the right.

Many of these tabs could be reusing partials from other pages. However, those partials in other locations do not have this image, and so we end up having to redesign a partial to be used for multiple pages but with different width constrictions. The image does not serve any particular benefit either other than helping signal to staff which pet they are looking at currently.

We want to remove the image, add a thumbnail, and we also need to adjust some of the html/css here. With the image removed, we will want the content of the page to take up the space that the image used to occupy. That way, we can share partials from other pages and they will have the same space constraints.

We also may need to adjust the html to allow for the thumbnail to exist as shown in the screenshot.

And finally, make sure the layout still works well for mobile.

Image

https://www.figma.com/design/0jVgYASUJy0KiX3BVc3dFM/Tasks?node-id=1094-70&t=WZjsRcM8EoT4DZdu-1 Note: Ignore the content in the box; this PR is only concerned about the thumbnail Image

Acceptance Criteria

  • [ ] Remove the image to the right side
  • [ ] Add thumbnail image to the header space of the page layout per figma design
  • [ ] Page content extends full page width in lieu of removed image

mononoken avatar Jul 03 '24 04:07 mononoken