Kludex / awesome-fastapi-projects

List of FastAPI projects! :sunglasses: :rocket:
1.37k stars 118 forks source link

Improve the mobile UI #31

Open vladfedoriuk opened 11 months ago

vladfedoriuk commented 11 months ago

Currently, when the page is opened on a mobile device with a small screen, the following problems occur:

  1. The header is missing (probably some tailwind CSS class is responsible for that and should be removed)
  2. The table does not fit the screen, and the scrollbar shows up.
  3. The title does not fit the screen as well.
  4. The cross to unselect a dependency for the dependencies multi-select input is too small and it is hard to tap on it.
  5. It is hard to read the repository description due to text-overflow behavior
    • It is worth noticing, that the text-overflow behavior was intentionally added and it works well on a desktop. However, for mobile devices, an accordion-like widget for description would possibly be a better option.

So, in order to adapt the app to mobile devices, I suggest:

  1. redesign the header - make it appear on a screen and change the layout of the elements.
  2. redesign the footer - make it more compact
  3. redesign the table row, and make the table fit the screen
  4. decrease the font size of the heading (title)
  5. Adapt the form, make it bigger, improve the multi-select input