Skip to content

Commit

Permalink
Merge pull request #5 from BetaNYC/revise-the-side-panel-section
Browse files Browse the repository at this point in the history 
completed
  • Loading branch information
@CloudLun
CloudLun authored Dec 13, 2023
2 parents e8bdde9 + dd4b42e commit 9b50f45
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 56 deletions.
20 changes: 8 additions & 12 deletions components/Geopanel/Geopanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Geopanel = () => {
map?.setPaintProperty("zipcodes", "fill-opacity", [
"case",
['all', ['==', ['get', "ZCTA5CE10"], selectedZipcodes]],
1, 0
.7, 0
])


Expand All @@ -74,7 +74,7 @@ const Geopanel = () => {
map?.moveLayer('districts_clicked_outline', "zipcodes")


map?.flyTo({zoom: 8})
map?.flyTo({ zoom: 8 })



Expand Down Expand Up @@ -142,24 +142,20 @@ const Geopanel = () => {
</div>
<XMarkIcon className=' w-[20px] h-[20px] text-white cursor-pointer' onClick={() => defaultMapHandler(legislations)} />
</div>
<div className='flex-1 p-[18px] w-full bg-white overflow-y-scroll'>
<div className='flex-1 p-[18px] pl-[19px] w-full bg-white overflow-y-scroll'>
<div className='text-[10px] text-regular text-grey_1'>HCMC Campaign Support</div>
<div className="flex flex-col gap-[5px] mt-[6px] text-rtc_navy">
<div className="flex items-start gap-[8px] ">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Statewide Right to Counsel") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="flex items-start gap-[5px] ">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Statewide RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Statewide Right to Counsel</div>
</div>
<div className="flex items-start gap-[5px]">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Winter Eviction Moratorium</div>
</div>
<div className="flex items-start gap-[5px]">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Defend Right to Counsel") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Defend RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Defend Right to Counsel</div>
</div>
<div className="flex items-start gap-[5px]">
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Clean Hands") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Clean Hands</div>
<img src={selectedDistrictFeatures?.properties!["HCMC support"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Winter Eviction Moratorium</div>
</div>
</div>
<div className='my-[12px] w-full h-[1px] bg-grey_1'></div>
Expand Down
25 changes: 10 additions & 15 deletions components/Geopanel/Membershippanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
map?.setPaintProperty("zipcodes", "fill-opacity", [
"case",
['all', ['==', ['get', "ZCTA5CE10"], selectedZipcodes]],
1, 0
.7, 0
])
map?.moveLayer("districts", "zipcodes")
}
Expand Down Expand Up @@ -112,7 +112,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
const targetCentroid = [e.features[0].properties.lon, e.features[0].properties.lat]
map?.flyTo({
center: targetCentroid as [number, number],
zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 12 : 8
zoom: targetCentroid[0] > -74.15 && targetCentroid[1] < 41.05 ? 13 : 8
})
})
})
Expand All @@ -129,33 +129,28 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
<div className='flex items-center gap-[6px]'>
<img src={selectedMemberFeatures?.properties["Membership Status"].includes("Member") ? "/icons/checked_member.svg" : "/icons/empty_member.svg"} alt="" className='w-[20px] h-[20px]' />
<div>
<div className='text-[10px] text-[rgba(255,255,255, 0.8)]'>Right to Counsel NYC Coalition</div>
<div className='font-semibold text-label'>Campaign Member</div>
<div className='text-[10px] text-white'>Right to Counsel NYC Coalition</div>
<div className='font-semibold text-label text-white'>Campaign Member</div>
</div>
</div>
</div>
<div className='flex-1 p-[18px] w-full bg-white'>
<div className='flex-1 p-[18px] pl-[19px] w-full bg-white'>
<div className='text-[10px] text-regular text-grey_1'>HCMC Campaign Support</div>
<div className="flex flex-col gap-[5px] mt-[6px] text-rtc_navy">
<div className="flex items-start gap-[8px] ">
<div className="flex items-start gap-[5px] ">
{/* @ts-ignore */}
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Statewide RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Statewide Right to Counsel") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Statewide Right to Counsel</div>
</div>
<div className="flex items-start gap-[5px]">
{/* @ts-ignore */}
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Winter Eviction Moratorium</div>
</div>
<div className="flex items-start gap-[5px]">
{/* @ts-ignore */}
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Defend RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Defend Right to Counsel") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Defend Right to Counsel</div>
</div>
<div className="flex items-start gap-[5px]">
{/* @ts-ignore */}
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Fund Local Law 53") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Power to Organize:<br /> Fund Local Law 53</div>
<img src={selectedMemberFeatures?.properties!["Legislation"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div className="font-bold text-label">Winter Eviction Moratorium</div>
</div>
</div>
<div className='my-[12px] w-full h-[1px] bg-grey_1'></div>
Expand Down
31 changes: 17 additions & 14 deletions components/Map/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const Map = () => {
break
}
defaultMapHandler(legislations)

}

useEffect(() => {
Expand Down Expand Up @@ -316,6 +317,7 @@ const Map = () => {
m.moveLayer("background", "districts")
m.moveLayer("background", "zipcodes")
m.moveLayer('districts_outline', 'districts_hovered')
m.moveLayer('districts_outline', "members")
m.moveLayer("districts", "members")
m.moveLayer('pattern', 'members')
m.moveLayer("districts", "counties_borders")
Expand All @@ -330,6 +332,15 @@ const Map = () => {

mapClickHandler(m, e, legislations)

m.setPaintProperty("members", "circle-color", [
"case",
["all", ["in", "Member", ["get", "Membership Status"]]],
"#812948",
"white"
],)

m.setPaintProperty("members", "circle-stroke-color", "#812948")

})

m.on('click', "members", (e: MapMouseEvent & EventData) => {
Expand Down Expand Up @@ -396,18 +407,14 @@ const Map = () => {
<img src=${properties["HCMC support"].includes("Statewide RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Statewide Right to Counsel</div>
</div>
<div class="flex items-center gap-[5px]">
<img src=${properties["HCMC support"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Winter Eviction Moratorium</div>
</div>
<div class="flex items-center gap-[5px]">
<img src=${properties["HCMC support"].includes("Defend RTC") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Defend Right to Counsel</div>
</div>
<div class="flex items-center gap-[5px]">
<img src=${properties["HCMC support"].includes("Fund Local Law 53") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Power to Organize:<br /> Fund Local Law 53</div>
</div>
<img src=${properties["HCMC support"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Winter Eviction Moratorium</div>
</div>
</div>
<div class="font-regular text-[12px] text-grey_2 underline">
Click the map for further details
Expand Down Expand Up @@ -460,18 +467,14 @@ const Map = () => {
<img src=${properties["Legislation"].includes("Statewide Right to Counsel") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Statewide Right to Counsel</div>
</div>
<div class="flex items-start gap-[5px]">
<img src=${properties["Legislation"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Winter Eviction Moratorium</div>
</div>
<div class="flex items-start gap-[5px]">
<img src=${properties["Legislation"].includes("Defend Right to Counsel") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Defend Right to Counsel</div>
</div>
<div class="flex items-start gap-[5px]">
<img src=${properties["Legislation"].includes("Clean Hands") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Power to Organize:<br /> Fund Local Law 53</div>
</div>
<img src=${properties["Legislation"].includes("Winter Eviction Moratorium") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
<div class="font-bold text-rtc_navy text-[12px]">Winter Eviction Moratorium</div>
</div>
</div>
<div class="font-regular text-[12px] text-grey_2 underline">
Click the map for further details
Expand Down
Loading

0 comments on commit 9b50f45

Please sign in to comment.