mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 09:41:26 -08:00
Minimal refactor to make maps wider (#149)
Not particularly pretty, but it works.
This commit is contained in:
TomNUSDS
GitHub
parent
a67b79a748
commit
e7ccd35aa6
4 changed files with 146 additions and 139 deletions
|
|
@ -11,6 +11,11 @@ interface 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 (
|
||||
<URLFlagProvider location={location}>
|
||||
<J40Header/>
|
||||
|
|
@ -18,12 +23,10 @@ const Layout = ({children, location}: ILayoutProps) => {
|
|||
className={'j40-grid-container'}>
|
||||
<Grid row>
|
||||
<main id={'main-content'}
|
||||
className={'usa-layout-docs desktop:grid-col-9 j40-main-content'}>
|
||||
<section className={'usa-prose'}>
|
||||
{children}
|
||||
</section>
|
||||
className={'usa-layout-docs j40-main-content ' + gridCssClass}>
|
||||
{children}
|
||||
</main>
|
||||
<J40Aside/>
|
||||
{conditionalAside}
|
||||
</Grid>
|
||||
</GridContainer>
|
||||
<J40Footer/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.mapContainer {
|
||||
height: 676px;
|
||||
margin-bottom: 29px;
|
||||
max-width: revert;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,108 +36,109 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
];
|
||||
|
||||
return (<Layout location={location}>
|
||||
<h1>About Justice40</h1>
|
||||
<p>
|
||||
In an effort to address historical environmental injustices,
|
||||
President Biden created the Justice40 Initiative on January
|
||||
27, 2021. The Justice40 Initiative directs 40% of the
|
||||
benefits from federal investments in seven key areas to
|
||||
overburdened and underserved communities.
|
||||
</p>
|
||||
<section className={'usa-prose'}>
|
||||
<h1>About Justice40</h1>
|
||||
<p>
|
||||
In an effort to address historical environmental injustices,
|
||||
President Biden created the Justice40 Initiative on January
|
||||
27, 2021. The Justice40 Initiative directs 40% of the
|
||||
benefits from federal investments in seven key areas to
|
||||
overburdened and underserved communities.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Federal agencies will prioritize benefits using a new
|
||||
climate and economic justice screening tool. This screening
|
||||
tool will be a map that visualizes data to compare the
|
||||
cumulative impacts of environmental, climate, and economic
|
||||
factors. It is being developed by the Council on
|
||||
Environmental Quality (CEQ) with guidance from environmental
|
||||
justice leaders and communities affected by environmental
|
||||
injustices. The first version of the screening tool will be
|
||||
released in July 2021. However, the screening tool and data
|
||||
being used will be continuously updated to better reflect
|
||||
the lived experiences of community members.
|
||||
</p>
|
||||
<p>
|
||||
Federal agencies will prioritize benefits using a new
|
||||
climate and economic justice screening tool. This screening
|
||||
tool will be a map that visualizes data to compare the
|
||||
cumulative impacts of environmental, climate, and economic
|
||||
factors. It is being developed by the Council on
|
||||
Environmental Quality (CEQ) with guidance from environmental
|
||||
justice leaders and communities affected by environmental
|
||||
injustices. The first version of the screening tool will be
|
||||
released in July 2021. However, the screening tool and data
|
||||
being used will be continuously updated to better reflect
|
||||
the lived experiences of community members.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Read more about the Justice40 Initiative in President
|
||||
Biden’s <a
|
||||
href={'https://www.whitehouse.gov/briefing-room/' +
|
||||
'presidential-actions/2021/01/27/' +
|
||||
'executive-order-on-tackling-the-climate-' +
|
||||
'crisis-at-home-and-abroad/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}>
|
||||
Executive Order on Tackling the Climate Crisis at Home and
|
||||
Abroad.</a>
|
||||
</p>
|
||||
<p>
|
||||
Read more about the Justice40 Initiative in President
|
||||
Biden’s <a
|
||||
href={'https://www.whitehouse.gov/briefing-room/' +
|
||||
'presidential-actions/2021/01/27/' +
|
||||
'executive-order-on-tackling-the-climate-' +
|
||||
'crisis-at-home-and-abroad/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}>
|
||||
Executive Order on Tackling the Climate Crisis at Home and
|
||||
Abroad.</a>
|
||||
</p>
|
||||
|
||||
<h2>Areas of Focus</h2>
|
||||
<div className={'grid-row grid-gap'}>
|
||||
<div className={'j40-two-column-confine'}>
|
||||
<ul className={'usa-icon-list j40-two-column'}>
|
||||
{readMoreList.map((item, index) => {
|
||||
return (
|
||||
<li
|
||||
key={`readmore_li_${index}`}
|
||||
className={'usa-icon-list__item'}>
|
||||
<div className={'usa-icon-list__icon'}>
|
||||
<img
|
||||
className={'j40-two-column-icons-spacing'}
|
||||
key={`readmore_img_${index}`}
|
||||
src={item[0]} alt={item[1] + ' icon'}/>
|
||||
</div>
|
||||
<div
|
||||
className={'usa-icon-list__content'}> {item[1]} </div>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
<h2>Areas of Focus</h2>
|
||||
<div className={'grid-row grid-gap'}>
|
||||
<div className={'j40-two-column-confine'}>
|
||||
<ul className={'usa-icon-list j40-two-column'}>
|
||||
{readMoreList.map((item, index) => {
|
||||
return (
|
||||
<li
|
||||
key={`readmore_li_${index}`}
|
||||
className={'usa-icon-list__item'}>
|
||||
<div className={'usa-icon-list__icon'}>
|
||||
<img
|
||||
className={'j40-two-column-icons-spacing'}
|
||||
key={`readmore_img_${index}`}
|
||||
src={item[0]} alt={item[1] + ' icon'}/>
|
||||
</div>
|
||||
<div
|
||||
className={'usa-icon-list__content'}> {item[1]} </div>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>A Transparent, Community-First Approach</h2>
|
||||
<h2>A Transparent, Community-First Approach</h2>
|
||||
|
||||
<p>
|
||||
Successful initiatives are guided by direct input from the
|
||||
communities they are serving. CEQ commits to transparency,
|
||||
inclusivity, and iteration in building this screening tool.
|
||||
</p>
|
||||
<p>
|
||||
Successful initiatives are guided by direct input from the
|
||||
communities they are serving. CEQ commits to transparency,
|
||||
inclusivity, and iteration in building this screening tool.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Transparent:</i> The code and data behind the screening
|
||||
tool are open source, meaning it is available for the public
|
||||
to review and contribute to. This tool is being developed
|
||||
publicly so that communities, academic experts, and anyone
|
||||
who’s interested can be involved in the tool-building
|
||||
process.
|
||||
</p>
|
||||
<p>
|
||||
<i>Transparent:</i> The code and data behind the screening
|
||||
tool are open source, meaning it is available for the public
|
||||
to review and contribute to. This tool is being developed
|
||||
publicly so that communities, academic experts, and anyone
|
||||
who’s interested can be involved in the tool-building
|
||||
process.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<i>Inclusive:</i> Many areas which lack investments also
|
||||
lack environmental data and would be overlooked using
|
||||
available environmental data. CEQ is actively reaching out
|
||||
to groups that have historically been excluded from
|
||||
decision-making, such as groups in rural and tribal areas,
|
||||
to understand their needs and ask for their input.
|
||||
</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>Inclusive:</i> Many areas which lack investments also
|
||||
lack environmental data and would be overlooked using
|
||||
available environmental data. CEQ is actively reaching out
|
||||
to groups that have historically been excluded from
|
||||
decision-making, such as groups in rural and tribal areas,
|
||||
to understand their needs and ask for their input.
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,51 +10,53 @@ interface TimelinePageProps {
|
|||
|
||||
const TimelinePage = ({location}: TimelinePageProps) => {
|
||||
return (<Layout location={location}>
|
||||
<h1>Timeline</h1>
|
||||
<h2>Throughout the Process</h2>
|
||||
<div className="grid-col">
|
||||
<div className="grid-row grid-gap-lg">
|
||||
<div className="grid-col-1">
|
||||
<img
|
||||
className={'flex-align-self-center width-4'}
|
||||
src={renewIcon} alt={'renew icon'}/>
|
||||
</div>
|
||||
<div className={'usa-prose text-asset-container ' +
|
||||
'grid-col-fill'}>
|
||||
<p>Continuously engage with stakeholders and community
|
||||
members to get feedback on the screening tool, scoring,
|
||||
and overall process.</p>
|
||||
<p>Continuously source data that meets data principles as
|
||||
defined through community input.</p>
|
||||
<section className={'usa-prose'}>
|
||||
<h1>Timeline</h1>
|
||||
<h2>Throughout the Process</h2>
|
||||
<div className="grid-col">
|
||||
<div className="grid-row grid-gap-lg">
|
||||
<div className="grid-col-1">
|
||||
<img
|
||||
className={'flex-align-self-center width-4'}
|
||||
src={renewIcon} alt={'renew icon'}/>
|
||||
</div>
|
||||
<div className={'usa-prose text-asset-container ' +
|
||||
'grid-col-fill'}>
|
||||
<p>Continuously engage with stakeholders and community
|
||||
members to get feedback on the screening tool, scoring,
|
||||
and overall process.</p>
|
||||
<p>Continuously source data that meets data principles as
|
||||
defined through community input.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Milestones</h2>
|
||||
<ol className={'usa-process-list'}>
|
||||
<li
|
||||
className={'j40-usa-process-list__item--complete ' +
|
||||
'usa-process-list__item padding-bottom-4 '}
|
||||
aria-label={'milestone 1 done'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 1</h4>
|
||||
<p className={'margin-top-05'}>
|
||||
Publish data principles on this site by June 2021.</p>
|
||||
</li>
|
||||
<li
|
||||
className={'usa-process-list__item padding-bottom-4'}
|
||||
aria-label={'milestone 2 next'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 2</h4>
|
||||
<p>Make the first version of a screening tool
|
||||
available by July 2021.</p>
|
||||
</li>
|
||||
<li
|
||||
className={'usa-process-list__item padding-bottom-4'}
|
||||
aria-label={'milestone 3'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 3</h4>
|
||||
<p>Create a public scorecard to ensure accountability of
|
||||
investments by February 2022.</p>
|
||||
</li>
|
||||
</ol>
|
||||
<h2>Milestones</h2>
|
||||
<ol className={'usa-process-list'}>
|
||||
<li
|
||||
className={'j40-usa-process-list__item--complete ' +
|
||||
'usa-process-list__item padding-bottom-4 '}
|
||||
aria-label={'milestone 1 done'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 1</h4>
|
||||
<p className={'margin-top-05'}>
|
||||
Publish data principles on this site by June 2021.</p>
|
||||
</li>
|
||||
<li
|
||||
className={'usa-process-list__item padding-bottom-4'}
|
||||
aria-label={'milestone 2 next'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 2</h4>
|
||||
<p>Make the first version of a screening tool
|
||||
available by July 2021.</p>
|
||||
</li>
|
||||
<li
|
||||
className={'usa-process-list__item padding-bottom-4'}
|
||||
aria-label={'milestone 3'}>
|
||||
<h4 className={'usa-process-list__heading'}>Milestone 3</h4>
|
||||
<p>Create a public scorecard to ensure accountability of
|
||||
investments by February 2022.</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue