search

ConclusionNL / global-mitigation-potential-atlas

The Global Mitigation Potential Atlas - a web based portal to provide global insight in the potential for reducing carbon emissions through governmental policies and application of technologies
2 stars 0 forks source link

Need to scroll when using the map #88

Closed OmNomNomzzz closed 11 months ago

OmNomNomzzz commented 11 months ago

Website functions strange when opened from a browser on 1080p screen, it looks ok on a 1440p screen. The pop-up when you click a country gets moved to bottom of screen and you need to scroll to see part of the pop-up. The heatmap legend/scale also gets cut off for some users.

Users sometimes need to scroll on the page just to see the map or the pop-up. But scrolling zooms in-out of map if the mouse is on the map, but scrolls the webpage when the mouse is not hovering over the map. It making using the map very inconvenient. Can contact Aniq for more details.

lucasjellema commented 11 months ago

what is the minimum screensize that you want to have supported? @OmNomNomzzz (if the browser window is too small, we simply cannot show all the elements we have at present)

OmNomNomzzz commented 11 months ago

1080p is what I want to support.

image

This is what I currently see on my screen. I need to scroll down to see the dynamic bar charts.

lucasjellema commented 11 months ago

note: related to #34

OmNomNomzzz commented 11 months ago

I have found out why this issue arises. If we set the "scale of size text and other items" in windows display setting to value higher than 100%, then we start seeing UI issues. E.g. the default in my laptop is 125%. image This results in the heatmap being cut out and me needing to scroll to just see the map. image image

However, after setting it back to 100% and refreshing the browser. Everything looks ok.

image

image

I do not know if this is something the team can fix. It it is out of your hands, we can leave it.

lucasjellema commented 11 months ago

I have implemented some improvements for using the map on smaller window sizes. Location and size of popups for example. I still need to adjust the size of the heatmap legend (I believe it now scales too small for a small window size)

image I probably have to refine the location of the zoom buttons. And adjust the focus of the zoom when country is clicked - it currently is too high with regards to the togglebox: image

lucasjellema commented 11 months ago

I believe the last changes have resolved this issue. When the window size changes, the size of the worldmap is immediately changed as well. for smaller browser windows, some elements will be smaller (smaller font, smaller width, different location). image

Please let me know in a new ticket if any additional specific changes are required

OmNomNomzzz commented 11 months ago

The current issue is resolved. I will send a new ticket if there are other issues.