Mobile Design: Staff Pets index table should render in cards below width xl: 1200px,

[kasugaijin]

Currently on baja/staff/pets we render a table of pets. This is good for desktop, but not good for mobile. Instead, when the screen width is less than 1100 px 1200px (bootstrap class xl), we should render each pet in a card, similar to how we do at baja/adoptable_pets. We want to keep pagination for mobile.

Create a new partial (using partials/pet_card is easiest), that includes

• the first image of the pet, if available, or the placeholder image,
• the pet name,
• sex,
• breed,
• and radio buttons for pause applications, and publish.

Acceptance criteria

• pets are rendered in cards if width is less than 1200px, otherwise rendered in the table

[sarvaiyanidhi]

Hi @kasugaijin I can work on this issue.. Can you please assign it? Thanks

[kasugaijin]

Sure thing!
I think for this we want to render both the table and the cards html at the same time but hide/show the correct markup for the screen width. Let me know if you have questions.

[sarvaiyanidhi]

Sounds good.. Will implement accordingly to render card for screen width below 1100 px and otherwise table.

[kasugaijin]

Quick update @sarvaiyanidhi @jmilljr24 rightly pointed out that we should just use the bootstrap grid sizing here, so could you please set the transition between cards and table to bootstrap class xl which is 1,200 px