search

HumanRightsMeasurementInitiative / hrmi-dataportal

https://rightstracker.org
Other
4 stars 8 forks source link

Mobile/responsive issues (v3) #147

Closed tmfrnz closed 4 years ago

tmfrnz commented 4 years ago

A collection of mobile issues

tmfrnz commented 4 years ago

image001 (1)

@annemariebrook this is done on purpose and only visible on touch because for smaller mobile screens there would otherwise not be enough space to also show the grading brackets in the background. We might need to introduce an additional "inbetween" breakpoint (mobile landscape) as well as consider how to resolve space conflicts on smaller devices (mobile portrait).

image002

@annemariebrook could not reproduce, could you provide more details on your browser?

annemariebrook commented 4 years ago

The problem with the right hand side of charts being cut off is on Firefox on my iphone. I've just been looking at it again, and I found that if i "zoom out" (using my fingers on the screen) I can see the whole chart. I also just tried Chrome and it was similar. i.e. the chart didn't initially size correctly to fit my screen, although i could Zoom out to see it all.

Regarding the decision not to label the rights on the charts, thanks for clarifying, and I understand that this is difficult. Overall you've done a great job. It would be good to experiment with different options, as I think it would make the mobile version a lot more user friendly if people can see which bar is for which right. But I'm happy to put this on the list for our new developer to explore.

tmfrnz commented 4 years ago

Thanks for providing the additional info!

Adjusting the charts for different screen widths will not be hard, but would just require some consideration of the different options and constraints, ideally supported by a quick design

annemariebrook commented 4 years ago

@tmfrnz I’ve since had more feedback from the team about the bars on the country charts not being labelled in the mobile version. We think it is quite problematic to not label the bars as it makes the country charts quite useless on mobile. If there is a tradeoff between showing the rights names vs the grading brackets, I think we would choose the former, although obviously we would like to see both. I am just about to email Adina on some other design issues and will mention this as well. Would you find it helpful to get her input?

Overall, the team doesn't agree with my comment above that "I'm happy to put this on the list for our new developer to explore." if that means delaying a better solution. Basically we would like to prioritise this issue as something to address in the near term if that is possible. Thank you!

tmfrnz commented 4 years ago
tmfrnz commented 4 years ago

@annemariebrook by displaying the grade labels differently for small screens, the labels and scores can now be shown on all charts and all screen sizes (and languages), deployed for testing on our dev site: https://rightstracker-dev.web.app

image

tmfrnz commented 4 years ago

@annemariebrook I could not reproduce the "zoom" issue btw, could you confirm if it is still an issue?

annemariebrook commented 4 years ago

@tmfrnz

  1. Your solution to the bar and grade labelling looks great! Well done! I'm very happy for you to push this to the live site any time.
  2. I just checked on both firefox and safari and the 'zoom' issue also seems to have been resolved. Thank you!
tmfrnz commented 4 years ago

done, deployed to production =)

annemariebrook commented 4 years ago

fabulous. thanks @tmfrnz !