search

Covid-Self-report-Tool / cov-self-report-frontend

Frontend repository for COVID-19 self-reporting tool in React
https://www.covidselfreport.org
MIT License
10 stars 1 forks source link

Ticker cards: add collapse/expand option #46

Open abettermap opened 4 years ago

abettermap commented 4 years ago

Description

The ticker cards are useful but take up a lot of space on small screens, so adding a collapse/expand toggle could improve things for mobile users.

Suggestions

  1. Move the “i” button to top left.
  2. In top-right corner, add an X or a down-facing arrow.
  3. ...which becomes an upward facing arrow when the card is collapsed.

This could get weird since the adjacent card on mobile would still be full size, so might need to think it through a bit.

Related items

Jira CSR-147

Resolution

The cards are display: grid I believe, so adjusting the child/row height properties via useState would be a good place to start.