search

antievictionmappingproject / covid-19-map-react

COVID-19 Emergency Tenant Protections Map (refactored to use React!)
13 stars 9 forks source link

UI Change - Adjust info window box size for key and pop-up #5

Closed brett-halperin closed 3 years ago

brett-halperin commented 3 years ago

Screen Shot 2021-01-20 at 11 01 13 AM

Hi everyone I realize the refactor is top priority but want to add this design issue for once feasible to fix - can we expand the height of the key (the info window box on left in screenshot with the title, scale, etc.), so that it is longer to display the rent strike icons defined without the users having to scroll?

I received feedback from users that they come to the map and do not understand what the icons mean at first glance without realizing that they need to scroll to find this info, or zoom out to see it all.

As a somewhat opposite related issue if easy to fix - can we also adjust the data pop-up info window box (on right in screenshot), so that it fits the size of the text box instead of taking up the entire length? This one is less important, but would be nice if does not require too much work.

Happy to help with this in any way I can - thanks all!

Brett

c5inco commented 3 years ago

I can take this one! Here are some adjustments:

c5inco commented 3 years ago

Issue now though is that the zoom controls are covered when the info window content is long. How do you want to handle that @brett-halperin?

brett-halperin commented 3 years ago

Issue now though is that the zoom controls are covered when the info window content is long. How do you want to handle that @brett-halperin?

Thanks for doing this! Is it possible to just make the max height so that it never goes over the zoom controls? So the user would scroll the info window box rather than have it cover it? If not, I think it is OK to cover it because in theory the user could X it off...

brett-halperin commented 3 years ago

I can take this one! Here are some adjustments:

  • Reduced size of legend key rectangles to 40px, tightened the legend overall
  • Made submission and resource links into simpler, shorter lists instead of a table
  • Cleaned up scrollbars

  • Info panel tweak as requested

    • Fit to content when possible image
    • Height is maxed out when content is longer than calc(100% - 154px - 24px) image

  • Height of map key

    • When < 800px, height: calc(100% - 32px) image
    • When > 800px, height: auto and max-height is calc value above image

Thanks for doing this too! I was hoping that it could stay mostly the same visually but just be more zoomed out - attached is a pic of how I am hoping the key to look, so pretty much the same but just longer so that it at least shows the housing justice icons. Tightening the key looks good, but I think it needs more white space/breathing room between the different shades and definitions of what each color means. I'd also still like to leave the two grid layout for the links to separate them more as well. But if that is not possible, then can we at least add more white space between them similar to the colors on the key?

Also as a separate issue, I've noticed that the black has always looked wonky (pic attached) - any way to fix this?

Thank you!!!

Screen Shot 2021-01-31 at 2 48 26 PM Screen Shot 2021-02-01 at 3 19 28 PM
c5inco commented 3 years ago

Oops forgot to respond on this - the changes were merged but I have a couple tweaks to make based on Brett's feedback above. I will file that in an another PR. Reopening this issue for now!

FYI @djbusstop

c5inco commented 3 years ago

I was hoping that it could stay mostly the same visually but just be more zoomed out

Gotcha - yes, I think that layout works well for larger screens - though we should probably revisit the size and density of all the UI since right now it doesn't feel as zoomed out. As your screenshot on screens like 1440x900.

longer so that it at least shows the housing justice icons. Tightening the key looks good, but I think it needs more white space/breathing room between the different shades and definitions of what each color means.

Fixed! The max-height of the panel allows it to at least show the keys above the fold. Agreed on spacing - added some space there.

I'd also still like to leave the two grid layout for the links to separate them more as well.

Gotcha - I revered the layout back. Let me know if that works.

I've noticed that the black has always looked wonky

This seems to be more of an optical illusion since the rectangles are close to each other, and the black rectangle doesn't have the same 1px border at 70% opacity. I think adding the spacing suggestion above helps with it

All changes above reflected below:

image

brett-halperin commented 3 years ago

I was hoping that it could stay mostly the same visually but just be more zoomed out

Gotcha - yes, I think that layout works well for larger screens - though we should probably revisit the size and density of all the UI since right now it doesn't feel as zoomed out. As your screenshot on screens like 1440x900.

longer so that it at least shows the housing justice icons. Tightening the key looks good, but I think it needs more white space/breathing room between the different shades and definitions of what each color means.

Fixed! The max-height of the panel allows it to at least show the keys above the fold. Agreed on spacing - added some space there.

I'd also still like to leave the two grid layout for the links to separate them more as well.

Gotcha - I revered the layout back. Let me know if that works.

I've noticed that the black has always looked wonky

This seems to be more of an optical illusion since the rectangles are close to each other, and the black rectangle doesn't have the same 1px border at 70% opacity. I think adding the spacing suggestion above helps with it

All changes above reflected below:

image

Hey Chris thanks so much for doing this! Sorry for all the back and forth, but I meant more white space in between the text ("many tenant protections, some tenant protections, etc.") but not in between the colors themselves (I realize now that I wrote that in a confusing way - sincere apologies for that!). So I guess what I was really asking is could the color boxes (white, grey, dark grey, black) be longer/taller than what you had originally tightened (yet perhaps slightly tighter than what I had originally done), so that there is ample white space in between the text while the colors remain stacked? Partly why they were so big before was for this reason, but if there is a happy medium where the text separation is still easily readable and "breathable" but the colors are stacked (like most map scales) that would be ideal! Again sorry for complicating this!

Bummer about the optical illusion - thanks for clarifying. What if we put the same border that is on the white color around each box? Might that fix it? If not, NBD though. Also, I am not sure that I am understanding what you are saying about the UI size and density, but if it is a more of a long-term issue, maybe a separate issue if this more or less resolves it for now?

c5inco commented 3 years ago

PTAL at the staging link here: https://deploy-preview-27--covid-19-map-react.netlify.app/

I believe it addresses your feedback below:

what I was really asking is could the color boxes be longer/taller than what you had originally tightened (yet perhaps slightly tighter than what I had originally done), so that there is ample white space in between the text while the colors remain stacked?

Gotcha - no problem at all!

What if we put the same border that is on the white color around each box?

The original color was #bdbdbd which was causing optical issues when the boxes were stacked flush to each other. I changed that border to black which I think makes it look less wonky and perhaps more legible.

c5inco commented 3 years ago

Also, I am not sure that I am understanding what you are saying about the UI size and density, but if it is a more of a long-term issue, maybe a separate issue if this more or less resolves it for now?

Yes, I think we should create a separate issue for this. The issue I see is that depending on the size of your screen, the controls (besides the map) can seem relatively larger in 1440x900 versus 1920x1080 or larger. So if we wanted to make changes, we should first look at the most common screen size (not sure we have analytics on this) and see if the UI layout and sizing is ideal, then go from there.

brett-halperin commented 3 years ago

PTAL at the staging link here: https://deploy-preview-27--covid-19-map-react.netlify.app/

I believe it addresses your feedback below:

what I was really asking is could the color boxes be longer/taller than what you had originally tightened (yet perhaps slightly tighter than what I had originally done), so that there is ample white space in between the text while the colors remain stacked?

Gotcha - no problem at all!

What if we put the same border that is on the white color around each box?

The original color was #bdbdbd which was causing optical issues when the boxes were stacked flush to each other. I changed that border to black which I think makes it look less wonky and perhaps more legible.

This looks amazing thanks! Can we still extend the length of the key though so that users can also see/preview the submit data and resources headers, so that it signifies the need to scroll? Separately, it looks like the word "MAP KEY" somehow got pushed closer to the arrow. Any way to add some white space there so it is less crammed? Other than that looks good to go! Also I think someone else may be working on this, but we are hoping for the default view to be more centered on the middle of the world rather than the US (like the current version) so that it is not American-centric.

brett-halperin commented 3 years ago

Also, I am not sure that I am understanding what you are saying about the UI size and density, but if it is a more of a long-term issue, maybe a separate issue if this more or less resolves it for now?

Yes, I think we should create a separate issue for this. The issue I see is that depending on the size of your screen, the controls (besides the map) can seem relatively larger in 1440x900 versus 1920x1080 or larger. So if we wanted to make changes, we should first look at the most common screen size (not sure we have analytics on this) and see if the UI layout and sizing is ideal, then go from there.

Also, I am not sure that I am understanding what you are saying about the UI size and density, but if it is a more of a long-term issue, maybe a separate issue if this more or less resolves it for now?

Yes, I think we should create a separate issue for this. The issue I see is that depending on the size of your screen, the controls (besides the map) can seem relatively larger in 1440x900 versus 1920x1080 or larger. So if we wanted to make changes, we should first look at the most common screen size (not sure we have analytics on this) and see if the UI layout and sizing is ideal, then go from there.

Just opened new issue for this at link below! Maybe we can see if have analytics on this at our next meeting, and continue the conversation there.

https://github.com/antievictionmappingproject/covid-19-map-react/issues/28

c5inco commented 3 years ago

Staging link with below changes: https://deploy-preview-27--covid-19-map-react.netlify.app/