Skip to content

Change design of /staff/pets view to match /staff/manage_fosters #759

@mononoken

Description

@mononoken

Pending

#547

Description

We have ended up with two different designs for pages that index collections with a filter. We would like to unify them in one design by changing the design of /staff/pets to match the others.

Some notable differences:

  1. manage_fosters design puts the content in a bootstrap container class which is limiting how wide it will expand. pets expands to full viewport width no matter how large screen width gets.
  2. manage_fosters design places the filter content in a white rounded rectangle
  3. manage_fosters desktop design places the buttons below the inputs while pets spreads them away from inputs.
  4. manage_fosters design has inputs equal width and they expand to container width. pets they have fixed widths for form inputs, and they wrap.

The tables themselves are also different, but in these cases that is intentional, and I think they can remain unchanged for now.

image

One thing that is nice that we want to keep is:

  1. "Search" button and "clear filters" for mobile views in pets design expand full width.
image

Let's go ahead and apply that button styling to manage_fosters index and adopter_applications_review index.

If there are any differences that are unclear to you, please feel free to ask for clarification here or on slack.

Acceptance Criteria

  • Refactor app/views/organizations/staff/pets/index.html.erb to match the app/views/organizations/staff/manage_fosters/index.html.erb layout
  • Apply mobile button sizing of search button and clear filter to:
    • app/views/organizations/staff/manage_fosters/index.html.erb
    • app/views/organizations/staff/adoption_application_reviews/index.html.erb

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions