Skip to content

Commit

Permalink
Merge pull request #1 from BetaNYC/layout-for-the-panel
Browse files Browse the repository at this point in the history 
completed
  • Loading branch information
@CloudLun
CloudLun authored Dec 6, 2023
2 parents b02296c + a01e718 commit 4f87e1f
Show file tree
Hide file tree
Showing 11 changed files with 87 additions and 60 deletions.
2 changes: 1 addition & 1 deletion app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function Home() {


return (
<div className='relative w-[100vw] max-h-[100vh]'>
<div className='relative w-[100vw] max-h-[100vh] leading-[1.2]'>
<MapProvider >
<SidePanel />
<Map />
Expand Down
16 changes: 8 additions & 8 deletions components/Geopanel/Geopanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@ const Geopanel = () => {
return (
<>
{panelShown["geopanelShown"] && (
<div className='flex flex-col absolute top-0 right-0 w-[20%] lg:w-[15%] h-full z-20 '>
<div className='flex flex-col absolute top-0 right-0 w-[20%] min-w-[200px] lg:w-[15%] h-full z-20 '>
{/* @ts-ignore */}
<div className={`flex items-start justify-between p-[18px] w-full ${selectedDistrictFeatures?.properties.Party_x === "Democratic" ? "bg-demo_1" : "bg-rep_1"} `}>
<div>
<div className='text-white'>
<div className='text-label'>New York State {districts.charAt(0).toUpperCase() + districts.slice(1)}</div>
{/* @ts-ignore */}
<div className='font-bold text-subheadline'>District {selectedDistrictFeatures?.properties!.District}</div>
Expand All @@ -101,15 +101,15 @@ const Geopanel = () => {
<div className="flex flex-col gap-[5px] mt-[6px] text-rtc_navy">
<div className="flex items-center 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 RTC</div>
<div className="font-bold text-label">Statewide Right to Counsel</div>
</div>
<div className="flex items-center 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-center gap-[5px]">
<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 RTC</div>
<div className="font-bold text-label">Defend Right to Counsel</div>
</div>
<div className="flex items-center gap-[5px]">

Expand All @@ -120,25 +120,25 @@ const Geopanel = () => {
<div className='my-[12px] w-full h-[1px] bg-grey_1'></div>
<div className='text-[10px] text-regular text-grey_1'>{districts.charAt(0).toUpperCase() + districts.slice(1)} District General Info</div>
<div className="flex flex-col gap-[16px] mt-[6px] text-rtc_navy">
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/person.svg" alt="" className="w-[16px] h-[16px]" />
<div className={`w-[120px] font-regular text-label ${selectedDistrictFeatures?.properties.Party_x === "Democratic" ? "text-demo_1" : "text-rep_1"}`}><span className='font-bold'>{selectedDistrictFeatures?.properties!.NAME}</span><br /> Democrat</div>
</div>
{
(selectedDistrictFeatures?.properties.Address) !== undefined &&
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/apartment.svg" alt="" className="w-[16px] h-[16px]" />
<div className="w-[120px] font-regular text-label">{selectedDistrictFeatures?.properties.Address}</div>
</div>
}
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/phone.svg" alt="" className="w-[16px] h-[16px]" />
<div className="font-regular text-label">{selectedDistrictFeatures?.properties.Phone}</div>
</div>
{
(selectedDistrictFeatures?.properties.email) !== undefined &&
(
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/email.svg" alt="" className="w-[16px] h-[16px]" />
<div className="font-regular text-label">{selectedDistrictFeatures?.properties.email}</div>
</div>
Expand Down
20 changes: 10 additions & 10 deletions components/Geopanel/Membershippanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
return (
<>
{panelShown["memberpanelShown"] && (
<div className='flex flex-col absolute top-0 right-0 w-[14%] h-full z-20 overflow-y-scroll'>
<div className='flex flex-col absolute top-0 right-0 w-[14%] min-w-[200px] h-full z-20 overflow-y-scroll'>
<div className='px-[18px] py-[12px] w-full bg-rtc_purple'>
<div className={`flex items-start justify-between my-[12px] w-full `}>
<div className='w-[75%] font-semibold text-subheadline'>{selectedMemberFeatures?.properties.Name.toUpperCase()}</div>
Expand All @@ -113,22 +113,22 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
<div className='flex-1 p-[18px] 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-center gap-[5px] ">
<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]" />
<div className="font-bold text-label">Statewide RTC</div>
<div className="font-bold text-label">Statewide Right to Counsel</div>
</div>
<div className="flex items-center gap-[5px]">
<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-center gap-[5px]">
<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]" />
<div className="font-bold text-label">Defend RTC</div>
<div className="font-bold text-label">Defend Right to Counsel</div>
</div>
<div className="flex items-center gap-[5px]">
<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>
Expand All @@ -140,19 +140,19 @@ const Membershippanel = ({ selectedMemberFeatures, setSelectedMemberFeatures }:
<div className="flex flex-col gap-[16px] mt-[6px] text-rtc_navy">
{
(selectedMemberFeatures?.properties.Address) !== undefined &&
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/apartment.svg" alt="" className="w-[16px] h-[16px]" />
<div className="w-[120px] font-regular text-label">{selectedMemberFeatures?.properties.Address}</div>
</div>
}
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/phone.svg" alt="" className="w-[16px] h-[16px]" />
<div className="font-regular text-label">{selectedMemberFeatures?.properties.Phone}</div>
</div>
{
(selectedMemberFeatures?.properties.Website) !== undefined &&
(
<div className="flex items-center gap-[12px]">
<div className="flex items-start gap-[12px]">
<img src="/icons/email.svg" alt="" className="w-[16px] h-[16px]" />
<div className="font-regular text-label">{selectedMemberFeatures?.properties.Website}</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/Map/Legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,11 +80,11 @@ const Legend = () => {
<div className='lg:row-start-1 flex flex-col gap-[5px]'>
<div className='flex items-center gap-[10px]'>
<div className='w-[16px] h-[16px] bg-[#802948] border-[2px] border-[#802948] rounded-full'></div>
<div className='text-label'>Member, RTC Coalition </div>
<div className='text-label'>Member, Right to Counsel Coalition </div>
</div>
<div className='flex items-center gap-[10px]'>
<div className='w-[16px] h-[16px] bg-white border-[2px] border-[#802948] rounded-full'></div>
<div className='text-label'>Endorser, RTC Coalition </div>
<div className='text-label'>Endorser, Right to Counsel Coalition </div>
</div>
</div>
)}
Expand Down
12 changes: 12 additions & 0 deletions components/Map/Map.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,15 @@
}


/* .mapboxgl-popup {
position: relative;
z-index: 1000 !important;
} */

.tooltip {
position: absolute;
color: white;
visibility: hidden;
cursor: pointer;
z-index: 2500 !important;
}
53 changes: 34 additions & 19 deletions components/Map/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import { GeoJSONSource } from 'mapbox-gl';
import assembly from "../../public/assembly.geo.json"
import senate from "../../public/senate.geo.json"



import Legend from "./Legend";
import MapLayers from "./MapLayers";
import Geopanel from "../Geopanel/Geopanel";
Expand All @@ -21,10 +19,12 @@ import "./Map.css"
import pattern_rep from "../../public/icons/pattern_rep.svg"
import pattern_demo from "../../public/icons/pattern_demo.svg"

import * as d3 from "d3"


const Map = () => {
const mapContainer = useRef<HTMLInputElement>(null);
const { map, setMap, districts, setDistricts, panelShown, setPanelShown, legislations, mapClickHandler, defaultMapHandler } = useContext(MapContext) as MapContextType
const { map, setMap, districts, setDistricts, setPanelShown, legislations, mapClickHandler, defaultMapHandler } = useContext(MapContext) as MapContextType
/* @ts-ignore */
const senateFeatures = (senate as GeoJson).features
/* @ts-ignore */
Expand Down Expand Up @@ -238,24 +238,24 @@ const Map = () => {
popup.setMaxWidth("1200px")

const districtTooptipGenerator = (properties: any) => {
return (`<div class="content">
return (`<div class="relative z-30">
<div class="px-[17px] py-[10px] width-full ${properties.Party_x === "Democratic" ? "bg-demo_1" : "bg-rep_1"} rounded-t-[20px]">
<div class="col-start-1 col-end-2 font-bold text-white text-[18px]">${districts.charAt(0).toUpperCase() + districts.slice(1)} District ${properties.District}</div>
<div class="col-start-1 col-end-2 font-bold text-white text-[18px]">${properties.House} District ${properties.District}</div>
</div>
<div class="px-[17px] pt-[8px] pb-[12px] text-navy bg-white rounded-b-[20px]">
<div class="font-regular text-[8px] text-[#7F7F7F]">Housing Courts Must Change! Campaign Support</div>
<div class="flex flex-col gap-[5px] mt-[6px] mb-[8px]">
<div class="flex items-center gap-[5px]">
<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 RTC</div>
<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 RTC</div>
<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]" />
Expand All @@ -269,21 +269,31 @@ const Map = () => {
}
let districtNumber = 0


let tooltip = d3.select("body").append("div").attr("class", "tooltip").style("z-index", 1200)

m.on("mousemove", "districts", (e: MapMouseEvent & EventData) => {
const { properties } = e.features[0]
if (properties.District !== districtNumber) {
popup.remove()
let content = districtTooptipGenerator(properties)
popup.setLngLat([e.lngLat['lng'], e.lngLat["lat"]]).setHTML(content).addTo(m)
// districtNumber = properties.District
}
console.log(properties)
let content = districtTooptipGenerator(properties)
tooltip.html(content).style("visibility", "visible");
tooltip
/* @ts-ignore */
.style("top", e.point.y - (tooltip.node().clientHeight + 5) + "px")
/* @ts-ignore */
.style("left", e.point.x - tooltip.node().clientWidth / 2.0 + "px")
// if (properties.District !== districtNumber) {
// popup.remove()

// popup.setLngLat([e.lngLat['lng'], e.lngLat["lat"]]).setHTML(content).addTo(m)
// // districtNumber = properties.District
// }
})

m.on("mouseleave", "districts", () => popup.remove())
m.on("mouseleave", "districts", () => tooltip.style("visibility", "hidden"))

m.on("mousemove", 'members', (e: MapMouseEvent & EventData) => {
const { properties } = e.features[0]

let content = `<div class="content">
<div class="flex justify-between items-center px-[18px] py-[15px] w-[285px] text-white bg-[#96315F] rounded-t-[20px]">
<div class="w-[150px] font-bold text-[14px]">${properties.Name}</div>
Expand All @@ -297,15 +307,15 @@ const Map = () => {
<div class="flex flex-col gap-[5px] mt-[6px] mb-[8px]">
<div class="flex items-center gap-[5px]">
<img src=${properties["Legislation"].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 RTC</div>
<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["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-center gap-[5px]">
<img src=${properties["Legislation"].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 RTC</div>
<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["Legislation"].includes("Fund Local Law 53") ? "/icons/checked.svg" : "/icons/empty.svg"} alt="" className="w-[16px] h-[16px]" />
Expand All @@ -317,10 +327,15 @@ const Map = () => {
</div>
</div>
</div>`
popup.setLngLat([e.lngLat['lng'], e.lngLat["lat"]]).setHTML(content).addTo(m)
tooltip.html(content).style("visibility", "visible");
tooltip
/* @ts-ignore */
.style("top", e.point.y - (tooltip.node().clientHeight + 5) + "px")
/* @ts-ignore */
.style("left", e.point.x - tooltip.node().clientWidth / 2.0 + "px")
})

m.on("mouseleave", "organizations", () => popup.remove())
m.on("mouseleave", "organizations", () => tooltip.style("visibility", "hidden"))

// while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
// coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
Expand Down
Loading

0 comments on commit 4f87e1f

Please sign in to comment.