Signalen / frontend

Frontend for Signalen, an application that helps cities manage and prioritize nuisance reports.
https://signalen.org
Mozilla Public License 2.0
10 stars 4 forks source link

Page "Mijn filters" does not appear properly on smartphone Samsung S10e #123

Closed someren closed 3 years ago

someren commented 3 years ago

Describe the bug The page "Mijn filters" does not appear properly when using Signalen on a smartphone. It appears in the middel of the screen and is only visible after zooming out. Resulting in unreadable small text and buttons. Users hope they click the right "Toon resultaat" button to apply their filter.

To Reproduce Steps to reproduce the behavior:

  1. Log in in Signalen on a smartphone
  2. Click on 'Mijn filters.'
  3. Wait, it appears nothing happened
  4. Try to move the screen to the left and right, Signalen seems frozen
  5. Zoom out using two fingers. The page "Mijn filters" appears somewhere in the middle of the screen.
  6. Zooming in is not possible
  7. Click on "Toon resultaat"
  8. The filter appears on the right side and the signals below. The colours of the screen are not correct.

Expected behavior After clicking on "Mijn filters" you go to the page with filters and are able to choose one. You should be able to properly read each filter and the button "Toon resultaat" should be large enough to click on.

Screenshots Video:

https://user-images.githubusercontent.com/66589775/111135754-52b60980-857d-11eb-9af5-29cfc601569a.mp4

Smartphone (please complete the following information):

boris-arkenaar commented 3 years ago

This happens because the table is too wide and doesn't adapt to smaller screen sizes. We would need to make a mobile-friendly (responsive) version of the incident list/table. @aditudorache @MauritsR @herjen any thoughts?

MauritsR commented 3 years ago

Because our back-office users use the application on desktop, no additional steps were taken during development to guarantee responsiveness. Unfortunately this results in the behavior seen here.

@boris-arkenaar You're correct, the table needs to be responsive to fix the issue. I talked it through with @herjen and he suggests to give the table a horizontal scroll, while keeping the id column fixed.

boris-arkenaar commented 3 years ago

That would be a nice result @MauritsR but complicated to implement. I'd like to go for a quick fix, for now, to have a workable version for our mobile users as soon as possible. The solution will be to make the table horizontally scrollable indeed. The ID column will not be fixed though.