publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 10:04:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Minimal refactor to make maps wider (#149)

Browse source 
Not particularly pretty, but it works.
This commit is contained in:
TomNUSDS 2021-06-17 07:31:18 -07:00 • committed by GitHub
parent a67b79a748
commit e7ccd35aa6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 146 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/layout.tsx
View file

@ -11,6 +11,11 @@ interface ILayoutProps {
} }
const Layout = ({children, location}: ILayoutProps) => { const Layout = ({children, location}: ILayoutProps) => {
const isWidthFullPage = location.pathname.endsWith('/cejst');
const conditionalAside = isWidthFullPage ? <></> : <J40Aside/>;
const gridCssClass = isWidthFullPage ? ' desktop:grid-col-12' :
'desktop:grid-col-9';
return ( return (
<URLFlagProvider location={location}> <URLFlagProvider location={location}>
<J40Header/> <J40Header/>
@ -18,12 +23,10 @@ const Layout = ({children, location}: ILayoutProps) => {
className={'j40-grid-container'}> className={'j40-grid-container'}>
<Grid row> <Grid row>
<main id={'main-content'} <main id={'main-content'}
className={'usa-layout-docs desktop:grid-col-9 j40-main-content'}> className={'usa-layout-docs j40-main-content ' + gridCssClass}>
<section className={'usa-prose'}> {children}
{children}
</section>
</main> </main>
<J40Aside/> {conditionalAside}
</Grid> </Grid>
</GridContainer> </GridContainer>
<J40Footer/> <J40Footer/>

1
client/src/components/map.module.scss
View file

@ -1,4 +1,5 @@
.mapContainer { .mapContainer {
height: 676px; height: 676px;
margin-bottom: 29px; margin-bottom: 29px;
max-width: revert;
} }

185
client/src/pages/index.tsx
View file

@ -36,108 +36,109 @@ const IndexPage = ({location}: IndexPageProps) => {
]; ];
return (<Layout location={location}> return (<Layout location={location}>
<h1>About Justice40</h1> <section className={'usa-prose'}>
<p> <h1>About Justice40</h1>
In an effort to address historical environmental injustices, <p>
President Biden created the Justice40 Initiative on January In an effort to address historical environmental injustices,
27, 2021. The Justice40 Initiative directs 40% of the President Biden created the Justice40 Initiative on January
benefits from federal investments in seven key areas to 27, 2021. The Justice40 Initiative directs 40% of the
overburdened and underserved communities. benefits from federal investments in seven key areas to
</p> overburdened and underserved communities.
</p>
<p> <p>
Federal agencies will prioritize benefits using a new Federal agencies will prioritize benefits using a new
climate and economic justice screening tool. This screening climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the tool will be a map that visualizes data to compare the
cumulative impacts of environmental, climate, and economic cumulative impacts of environmental, climate, and economic
factors. It is being developed by the Council on factors. It is being developed by the Council on
Environmental Quality (CEQ) with guidance from environmental Environmental Quality (CEQ) with guidance from environmental
justice leaders and communities affected by environmental justice leaders and communities affected by environmental
injustices. The first version of the screening tool will be injustices. The first version of the screening tool will be
released in July 2021. However, the screening tool and data released in July 2021. However, the screening tool and data
being used will be continuously updated to better reflect being used will be continuously updated to better reflect
the lived experiences of community members. the lived experiences of community members.
</p> </p>
<p> <p>
Read more about the Justice40 Initiative in President Read more about the Justice40 Initiative in President
Biden’s <a Biden’s <a
href={'https://www.whitehouse.gov/briefing-room/' + href={'https://www.whitehouse.gov/briefing-room/' +
'presidential-actions/2021/01/27/' + 'presidential-actions/2021/01/27/' +
'executive-order-on-tackling-the-climate-' + 'executive-order-on-tackling-the-climate-' +
'crisis-at-home-and-abroad/'} 'crisis-at-home-and-abroad/'}
target={'_blank'} target={'_blank'}
rel={'noreferrer'}> rel={'noreferrer'}>
Executive Order on Tackling the Climate Crisis at Home and Executive Order on Tackling the Climate Crisis at Home and
Abroad.</a> Abroad.</a>
</p> </p>
<h2>Areas of Focus</h2> <h2>Areas of Focus</h2>
<div className={'grid-row grid-gap'}> <div className={'grid-row grid-gap'}>
<div className={'j40-two-column-confine'}> <div className={'j40-two-column-confine'}>
<ul className={'usa-icon-list j40-two-column'}> <ul className={'usa-icon-list j40-two-column'}>
{readMoreList.map((item, index) => { {readMoreList.map((item, index) => {
return ( return (
<li <li
key={`readmore_li_${index}`} key={`readmore_li_${index}`}
className={'usa-icon-list__item'}> className={'usa-icon-list__item'}>
<div className={'usa-icon-list__icon'}> <div className={'usa-icon-list__icon'}>
<img <img
className={'j40-two-column-icons-spacing'} className={'j40-two-column-icons-spacing'}
key={`readmore_img_${index}`} key={`readmore_img_${index}`}
src={item[0]} alt={item[1] + ' icon'}/> src={item[0]} alt={item[1] + ' icon'}/>
</div> </div>
<div <div
className={'usa-icon-list__content'}> {item[1]} </div> className={'usa-icon-list__content'}> {item[1]} </div>
</li> </li>
); );
}) })
} }
</ul> </ul>
</div>
</div> </div>
</div>
<h2>A Transparent, Community-First Approach</h2> <h2>A Transparent, Community-First Approach</h2>
<p> <p>
Successful initiatives are guided by direct input from the Successful initiatives are guided by direct input from the
communities they are serving. CEQ commits to transparency, communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool. inclusivity, and iteration in building this screening tool.
</p> </p>
<p> <p>
<i>Transparent:</i> The code and data behind the screening <i>Transparent:</i> The code and data behind the screening
tool are open source, meaning it is available for the public tool are open source, meaning it is available for the public
to review and contribute to. This tool is being developed to review and contribute to. This tool is being developed
publicly so that communities, academic experts, and anyone publicly so that communities, academic experts, and anyone
who’s interested can be involved in the tool-building who’s interested can be involved in the tool-building
process. process.
</p> </p>
<p> <p>
<i>Inclusive:</i> Many areas which lack investments also <i>Inclusive:</i> Many areas which lack investments also
lack environmental data and would be overlooked using lack environmental data and would be overlooked using
available environmental data. CEQ is actively reaching out available environmental data. CEQ is actively reaching out
to groups that have historically been excluded from to groups that have historically been excluded from
decision-making, such as groups in rural and tribal areas, decision-making, such as groups in rural and tribal areas,
to understand their needs and ask for their input. to understand their needs and ask for their input.
</p> </p>
<p>
<i>Iterative:</i> The initial community prioritization list
provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a
final answer. CEQ has received recommendations on data sets
from community interviews, the White House Environmental
Justice Advisory Council, and through public comment, but
establishing a score that is truly representative will be a
long-term, ongoing process. As communities submit feedback
and recommendations, CEQ will continue to improve the tools
being built and the processes for stakeholder and public
engagement.
</p>
<p>
<i>Iterative:</i> The initial community prioritization list
provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a
final answer. CEQ has received recommendations on data sets
from community interviews, the White House Environmental
Justice Advisory Council, and through public comment, but
establishing a score that is truly representative will be a
long-term, ongoing process. As communities submit feedback
and recommendations, CEQ will continue to improve the tools
being built and the processes for stakeholder and public
engagement.
</p>
</section>
</Layout> </Layout>
); );
}; };

86
client/src/pages/timeline.tsx
View file

@ -10,51 +10,53 @@ interface TimelinePageProps {
const TimelinePage = ({location}: TimelinePageProps) => { const TimelinePage = ({location}: TimelinePageProps) => {
return (<Layout location={location}> return (<Layout location={location}>
<h1>Timeline</h1> <section className={'usa-prose'}>
<h2>Throughout the Process</h2> <h1>Timeline</h1>
<div className="grid-col"> <h2>Throughout the Process</h2>
<div className="grid-row grid-gap-lg"> <div className="grid-col">
<div className="grid-col-1"> <div className="grid-row grid-gap-lg">
<img <div className="grid-col-1">
className={'flex-align-self-center width-4'} <img
src={renewIcon} alt={'renew icon'}/> className={'flex-align-self-center width-4'}
</div> src={renewIcon} alt={'renew icon'}/>
<div className={'usa-prose text-asset-container ' + </div>
'grid-col-fill'}> <div className={'usa-prose text-asset-container ' +
<p>Continuously engage with stakeholders and community 'grid-col-fill'}>
members to get feedback on the screening tool, scoring, <p>Continuously engage with stakeholders and community
and overall process.</p> members to get feedback on the screening tool, scoring,
<p>Continuously source data that meets data principles as and overall process.</p>
defined through community input.</p> <p>Continuously source data that meets data principles as
defined through community input.</p>
</div>
</div> </div>
</div> </div>
</div>
<h2>Milestones</h2> <h2>Milestones</h2>
<ol className={'usa-process-list'}> <ol className={'usa-process-list'}>
<li <li
className={'j40-usa-process-list__item--complete ' + className={'j40-usa-process-list__item--complete ' +
'usa-process-list__item padding-bottom-4 '} 'usa-process-list__item padding-bottom-4 '}
aria-label={'milestone 1 done'}> aria-label={'milestone 1 done'}>
<h4 className={'usa-process-list__heading'}>Milestone 1</h4> <h4 className={'usa-process-list__heading'}>Milestone 1</h4>
<p className={'margin-top-05'}> <p className={'margin-top-05'}>
Publish data principles on this site by June 2021.</p> Publish data principles on this site by June 2021.</p>
</li> </li>
<li <li
className={'usa-process-list__item padding-bottom-4'} className={'usa-process-list__item padding-bottom-4'}
aria-label={'milestone 2 next'}> aria-label={'milestone 2 next'}>
<h4 className={'usa-process-list__heading'}>Milestone 2</h4> <h4 className={'usa-process-list__heading'}>Milestone 2</h4>
<p>Make the first version of a screening tool <p>Make the first version of a screening tool
available by July 2021.</p> available by July 2021.</p>
</li> </li>
<li <li
className={'usa-process-list__item padding-bottom-4'} className={'usa-process-list__item padding-bottom-4'}
aria-label={'milestone 3'}> aria-label={'milestone 3'}>
<h4 className={'usa-process-list__heading'}>Milestone 3</h4> <h4 className={'usa-process-list__heading'}>Milestone 3</h4>
<p>Create a public scorecard to ensure accountability of <p>Create a public scorecard to ensure accountability of
investments by February 2022.</p> investments by February 2022.</p>
</li> </li>
</ol> </ol>
</section>
</Layout> </Layout>
); );
}; };