Add Relevant Info From nyc.gov/planning Pages to Zoning District Pages

[dhochbaum-dcp]

Add the relevant information from the Zoning Districts Guide on the DCP main site to the Zoning District pages of ZoLa. The information which users used to need to click on "Learn more about blank districts" should be visible below the "Fit map to all blank districts" button.

[jpiacentinidcp]

Notes from email: I love the Quick Reference bar, and think this feature is something we should get in front of Frank to get his thoughts on how to layout the specific options (Do we want to group all R3s in on tab or keep R3-1, R3-2, R3A and R3X separate. Also getting confirmation on which text blurb we show above the link and which below should come from him.

My only design note is wondering if we can add a small white space below the tabs in the Quick Reference bar so that the horizontal scroll bar appears below the actual tabs (or below the thin dark line of the tabs) so it doesn’t cover up the clickable area. I also want to know if we can have the scroll bar appear when someone mouses over the element so users know they can scroll. As of right now a user would have to attempt to scroll to learn that they can.

Lastly, I think it is excellent that the selected description updates when a user selects a new zoning area on the map. I’d love to know if it is difficult to implement functionality so as a user selects a different district in the Quick Reference area, it would re-select that district on the map, so they can quickly identify where these various districts are in the city. If that is a difficult or tedious technical lift, we can hold off for now, or get Frank’s thoughts on how important that would be.

[dhochbaum-dcp]

My only design note is wondering if we can add a small white space below the tabs in the Quick Reference bar so that the horizontal scroll bar appears below the actual tabs (or below the thin dark line of the tabs) so it doesn’t cover up the clickable area.

I've pushed a change that adds a few extra pixels between the bottom of the tabs and the horizontal scroll bar, let me know if that matches what you were thinking.

I also want to know if we can have the scroll bar appear when someone mouses over the element so users know they can scroll. As of right now a user would have to attempt to scroll to learn that they can.

I'm using Chrome, and the scroll bar always shows for me if scrolling is possible (which is set to only be on 'R' zones). If you're experiencing something different, let me know so I can recreate the issue.

Lastly, I think it is excellent that the selected description updates when a user selects a new zoning area on the map. I’d love to know if it is difficult to implement functionality so as a user selects a different district in the Quick Reference area, it would re-select that district on the map, so they can quickly identify where these various districts are in the city. If that is a difficult or tedious technical lift, we can hold off for now, or get Frank’s thoughts on how important that would be.

If I understand correctly, what you're asking for is that when a user is on /l/zoning-district/R2 and they go to the quick reference menu and click on 'R4' that it updates the map selection to R4, as well as the content in the side pane. From a technical perspective, that is just linking to /l/zoning-district/R4, so it's very easy to implement. The problem with doing so is that there is not a 1:1 match between the content on the website and zoning selections on ZoLa. For example, there is a page for R1 on the main site, but ZoLa only has R1-1, R1-2, and R1-2A (/l/zoning-district/R1 returns a 404). If we want to do that, it will require making some larger changes in order to get things to work and be consistent.

[jpiacentinidcp]

Thanks David,

I realize the difference in scroll bar position may be due to OS. I am using Chrome on Mac and I only see the scroll bar appear when I begin scrolling, and it then disappears again after use. Whereas Chrome on PC does show the scroll bar always below. See below image and video for how it appears on my Mac.

MAC OS:

https://github.com/NYCPlanning/labs-zola/assets/97539142/35fc36ec-35a3-462f-846f-27bbbe9a903f

Windows PC:

MAC OS:

Hoping we can adjust the spacing a bit more so the scroll bar is below the button area and have it appear on hover rather than just on scroll. I tried to annotate the image but let me know if that is not clear. It may be the case that this is just how scroll bars appear on Mac and can't be adjusted, in which case we can move on.

---

As for the last point, let's leave the functionality as is for now given the inconsistencies that you highlight re: R1 zones compared to R3 zones which have distinct pages. We can bring this up to Frank and see if he has strong opinions, but I don't want us to have to manage these decisions when they should come from the PO.

[dhochbaum-dcp]

@jpiacentinidcp I've tried recreating the issue you're having on Mac in Chrome/Safari/Firefox/Opera and haven't been able to do so. Is it possible there's a browser extension or something that is causing this behavior on your side?

[jpiacentinidcp]

Hmm that's strange. I don't have any browser extensions installed but might be related to some display feature setting somewhere on my device. Regardless it's not a major issue so I think it's ok to call it complete for now. Thanks for digging into it!

[dhochbaum-dcp]

Backlogged for the time being.