Skip to content

Commit

Permalink
revise the geopanel
Browse files Browse the repository at this point in the history
  • Loading branch information
@CloudLun
CloudLun committed Nov 30, 2023
1 parent d04c814 commit 89f96fc
Show file tree
Hide file tree
Showing 13 changed files with 7,767 additions and 6,291 deletions.
8 changes: 4 additions & 4 deletions components/Geopanel/Geopanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const Geopanel = ({ selectedDistrictFeatures, setSelectedDistrictFeatures, selec
return (
<>
{panelShown["geopanelShown"] && (
<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-[20%] 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>
Expand All @@ -102,7 +102,7 @@ const Geopanel = ({ selectedDistrictFeatures, setSelectedDistrictFeatures, selec
</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'>
<div className='flex-1 p-[18px] 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-center gap-[5px] ">
Expand Down Expand Up @@ -174,7 +174,7 @@ const Geopanel = ({ selectedDistrictFeatures, setSelectedDistrictFeatures, selec
</div>
<div className='my-[16px]'>
<div className='mb-[5px] text-[10px] text-grey_1'>Counties</div>
<div className='grid grid-cols-2 gap-[12px]'>
<div className='grid grid-cols-1 gap-[12px]'>
{
selectedDistrictOverlappedData &&
selectedDistrictOverlappedData.counties.map((c, i) =>
Expand All @@ -184,7 +184,7 @@ const Geopanel = ({ selectedDistrictFeatures, setSelectedDistrictFeatures, selec
</div>
<div>
<div className='mb-[5px] text-[10px] text-grey_1'>Zip Codes</div>
<div className='grid grid-cols-3 gap-[12px]'>
<div className='grid grid-cols-2 gap-[12px]'>
{
selectedDistrictOverlappedData &&
selectedDistrictOverlappedData.zip_codes.map((z, i) =>
Expand Down
18 changes: 9 additions & 9 deletions components/Map/Legend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,16 @@ const Legend = () => {
/>
</div>
{panelShown && (
<div className='absolute left-[37%] md:left-[34%] lg:left-[32%] xl:left-[30%] top-[20px] p-[15px] w-[24%] md:w-[26%] lg:w-[30%] text-rtc_navy bg-white rounded-[8px] drop-shadow-xl z-20'>
<div className='absolute left-[37%] md:left-[34%] lg:left-[32%] xl:left-[30%] top-[20px] p-[15px] text-rtc_navy bg-white rounded-[8px] drop-shadow-xl z-20'>
<div className='flex justify-between'>
<h2 className='mb-[8px] font-bold text-title leading-[22.5px]'>
<h2 className='w-[220px] mb-[8px] font-bold text-[13px] lg:text-title leading-[22.5px]'>
{legislations === "Statewide RTC" ? "Statewide Right to Counsel " : legislations === "Defend RTC" ? "Defend Right to Counsel " : "Winter Eviction Moratorium "}
{districts.charAt(0).toUpperCase() + districts.slice(1)} District Support Map
</h2>
<XMarkIcon className='ml-[12px] w-[22px] h-[22px] text-grey_2 cursor-pointer' onClick={() => panelClickHandler(false)} />
<XMarkIcon className='w-[22px] h-[22px] text-grey_2 cursor-pointer' onClick={() => panelClickHandler(false)} />
</div>
<div className='flex gap-[30px]'>
<div className='flex flex-col gap-[5px]'>
<div className={`grid grid-cols-[1fr_1fr] ${membershipShown ? "lg:grid-cols-[1fr_1fr_1fr] grid-rows-2 lg:grid-rows-1" : "grid-rows-1"} gap-[10px] mt-[10px]`}>
<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-demo'></div>
<div className='text-label'>Support, Democrat</div>
Expand All @@ -56,7 +56,7 @@ const Legend = () => {
<div className='text-label'>Support, Republican</div>
</div>
</div>
<div className='flex flex-col gap-[5px]'>
<div className='lg:row-start-1 flex flex-col gap-[5px]'>
<div className='flex items-center gap-[10px]'>
<Image
src="/icons/pattern_demo.svg"
Expand All @@ -77,14 +77,14 @@ const Legend = () => {
</div>
</div>
{membershipShown && (
<div className='flex flex-col gap-[5px]'>
<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, Right to Counsel Coalition </div>
<div className='text-label'>Member, RTC 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, Right to Counsel Coalition </div>
<div className='text-label'>Endorser, RTC Coalition </div>
</div>
</div>
)}
Expand Down
3 changes: 1 addition & 2 deletions components/Map/Map.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,12 +220,11 @@ const Map = () => {
setSelectedDistrictFeatures(e.features[0])
setSelectedDistrictOverlappedData((districts === "senate" ? senateOverlapped : assemblyOverlapped).filter(d => +d.district === +e.features[0]?.properties.District)[0])
mapClickHandler(m, e, legislations)
setPanelShown({ ...panelShown, geopanelShown: true })
})

m.on('click', "members", (e: MapMouseEvent & EventData) => {
setSelectedMemberFeatures(e.features[0])
setPanelShown({ ...panelShown, geopanelShown: false, memberpanelShown: true })
setPanelShown({ geopanelShown: false, memberpanelShown: true })
m.flyTo({
center: [e.features[0].properties.lon, e.features[0].properties.lat],
zoom: 9.5
Expand Down
12 changes: 6 additions & 6 deletions components/Map/MapLayers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,19 @@ const MapLayers = ({ districtsClickHandler }: Props) => {
/>
</div>
{panelShown && (
<div className='absolute left-[37%] md:left-[34%] lg:left-[32%] xl:left-[30%] bottom-[20px] p-[25px] min-w-[290px] text-rtc_navy bg-white rounded-[18.23px] drop-shadow-xl z-20'>
<div className='absolute left-[37%] md:left-[34%] lg:left-[32%] xl:left-[30%] bottom-[20px] p-[25px] min-w-[250px] lg:w-[18%] text-rtc_navy bg-white rounded-[18.23px] drop-shadow-xl z-20'>
<div className='flex items-center justify-between gap-[29px] pb-[12px] border-b-[1px] border-grey_1'>
<h2 className='font-bold text-title'>Map Layers</h2>
<h2 className='font-bold text-[13px] lg:text-title'>Map Layers</h2>
<XMarkIcon className='w-[22px] h-[22px] text-grey_2 cursor-pointer' onClick={() => panelClickHandler(false)} />
</div>
<div className='flex flex-col gap-[9px] pt-[12px] pb-[17px] w-full border-b-[1px] border-grey_1'>
<h2 className='font-bold text-title'>Geographic Boundaries</h2>
<h2 className='font-bold text-[13px] lg:text-title'>Districts Boundaries</h2>
<div className='flex w-full cursor-pointer'>
<div className={`flex justify-center items-center p-[8px] w-[50%] font-semibold text-label ${districts === "senate" ? "text-white bg-rtc_purple border-[2px] border-rtc_purple" : "text-grey_1 bg-white border-[3px] border-grey_1 "} rounded-l-[8px]`}
onClick={() => districtsClickHandler("senate")}>Senate Districts
onClick={() => districtsClickHandler("senate")}>Senate
</div>
<div className={`flex justify-center items-center p-[8px] w-[50%] font-semibold text-label ${districts === "assembly" ? "text-white bg-rtc_purple border-[2px] border-rtc_purple" : "text-grey_1 bg-white border-[3px] border-grey_1 "} rounded-r-[8px]`}
onClick={() => districtsClickHandler("assembly")}>Assembly Districts
onClick={() => districtsClickHandler("assembly")}>Assembly
</div>
</div>
</div>
Expand All @@ -73,7 +73,7 @@ const MapLayers = ({ districtsClickHandler }: Props) => {
<div className='flex flex-col gap-[15px]'>
<div className='flex justify-between items-start'>
{/* <h3 className='font-semibold text-label'>Member Organizations</h3> */}
<h2 className='font-bold text-title'>RTC Coalition <br /> Membership</h2>
<h2 className='font-bold text-[13px] lg:text-title'>RTC Coalition <br /> Membership</h2>
<Toggler show={membershipShown} clickHandler={membershipClickHandler} />
</div>
{/* <div className='flex justify-between items-center'>
Expand Down
14 changes: 7 additions & 7 deletions components/SidePanel/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@ const About = ({ expand, legislationsClickHandler }: Props) => {


return (
<div className={`flex flex-col px-[25px] pt-[12px] lg:pt-[10.5px] pb-[20px] text-rtc_navy ${expand["About"] ? "h-[calc(100vh-112px-240px)] xl:h-[calc(100vh-112px-200px)] bg-white overflow-y-scroll" : "h-[45px] bg-background_blue overflow-y-hidden"} border-y-[1px] border-grey_1 `}>
<div className="flex justify-between items-center">
<div className={`flex flex-col px-[25px] pt-[12px] lg:pt-[10.5px] pb-[20px] text-rtc_navy ${expand["About"] ? "h-[calc(100vh-112px-230px)] xl:h-[calc(100vh-112px-180px)] bg-white overflow-y-hidden" : "h-[40px] bg-background_blue overflow-y-hidden"} border-y-[1px] border-grey_1 `}>
<div className={`flex justify-between items-center`}>
<h2 className="font-semibold text-[13px] lg:text-title ">ABOUT</h2>
{
expand["About"] ? <ChevronUpIcon className="w-[20px] h-[20px] cursor-pointer" onClick={() => legislationsClickHandler("About")} /> : <ChevronDownIcon className="w-[20px] h-[20px] cursor-pointer" onClick={() => legislationsClickHandler("About")} />
}
</div>
<div className="flex justify-between items-start gap-[36px] my-[16px]">
<h2 className={`pb-[3px] font-semibold text-title border-b-2 leading-[1.5] ${selectedContent === "intro" ? "text-rtc_navy border-rtc_navy" : "text-grey_1 border-white "} cursor-pointer`} onClick={() => contentClickHandler("intro")}>the HCMC! Campaign Legislation Map</h2>
<h2 className={`font-semibold text-title border-b-2 ${selectedContent === "credits" ? "text-rtc_navy border-rtc_navy" : "text-grey_1 border-white "} cursor-pointer`} onClick={() => contentClickHandler("credits")}>Credits</h2>
<div className="flex justify-between items-start my-[16px]">
<h2 className={`pb-[3px] mr-12 font-semibold text-[13px] lg:text-title border-b-2 leading-[1.5] ${selectedContent === "intro" ? "text-rtc_navy border-rtc_navy" : "text-grey_1 border-white "} cursor-pointer`} onClick={() => contentClickHandler("intro")}>the HCMC! Campaign Legislation Map</h2>
<h2 className={`font-semibold text-[13px] lg:text-title border-b-2 ${selectedContent === "credits" ? "text-rtc_navy border-rtc_navy" : "text-grey_1 border-white "} cursor-pointer`} onClick={() => contentClickHandler("credits")}>Credits</h2>
</div>
{
selectedContent === "intro" && (
<div className='flex-1 flex flex-col justify-between'>
<div className="text-body">
<div className='flex-1 flex flex-col justify-between overflow-y-scroll'>
<div className="text-[12px] lg:text-body">
<p>
Housing Courts Must Change! (HCMC) is a New York statewide campaign launched by the Right to Counsel NYC Coalition in 2020 to transform the courts from an “eviction machine” to a place that holds landlords accountable, upholds tenants’ rights, and enables tenants to remain in their homes.
</p>
Expand Down
12 changes: 7 additions & 5 deletions components/SidePanel/LegislationColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,20 @@ type Props = {
const LegislationColumns = ({ legislation, name, number, content, expand, legislationsClickHandler }: Props) => {

return (
<div className={`px-[25px] pt-[12px] lg:pt-[10.5px] pb-[20px] text-rtc_navy ${expand ? "bg-white h-[calc(100vh-112px-280px)] xl:h-[calc(100vh-112px-240px)] overflow-y-scroll" : "h-[45px] bg-background_blue overflow-y-hidden"} border-b-[1px] border-grey_1 cursor-pointer`} onClick={legislationsClickHandler}>
<div className={`flex flex-col px-[25px] pt-[12px] lg:pt-[10.5px] pb-[20px] text-rtc_navy ${expand ? " h-[calc(100vh-112px-230px)] xl:h-[calc(100vh-112px-180px)] bg-white overflow-y-hidden" : "h-[40px] bg-background_blue overflow-y-hidden"} border-b-[1px] border-grey_1 cursor-pointer`} onClick={legislationsClickHandler}>
<div className={`flex justify-between items-center ${expand ? "mb-0" : "mb-5"}`}>
<h2 className="font-semibold text-[13px] lg:text-title uppercase">{name}</h2>
{
expand ? <ChevronUpIcon className="w-[20px] h-[20px] cursor-pointer" /> : <ChevronDownIcon className="w-[20px] h-[20px] cursor-pointer" />
}
</div>
<div className='mb-[20px] font-regular text-label'>{number}</div>
<VotesVisualization legislation={legislation} />
<div>
<h2 className='mb-[14px] font-semibold text-title'>{name} ({number})</h2>
<p className='font-regular text-body overflow-y-scroll'>{content}</p>
<div className='flex-1 overflow-y-scroll'>
<VotesVisualization legislation={legislation} />
<div>
<h2 className='mb-[14px] font-semibold text-[13px] lg:text-title'>{name} ({number})</h2>
<p className='font-regular text-[12px] lg:text-body overflow-y-scroll'>{content}</p>
</div>
</div>
</div>
)
Expand Down
Loading

0 comments on commit 89f96fc

Please sign in to comment.