mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-31 17:21:17 -07:00
More tweaks from today's meeting (#87)
Just playing with layout. - Inverted header - updated snapshot - adjusted column widths - Update J40Footer.spec.tsx.snap
This commit is contained in:
TomNUSDS
GitHub
parent
426f596c7a
commit
f9ac170c6a
5 changed files with 175 additions and 134 deletions
|
|
@ -16,47 +16,73 @@ const J40Footer = () => {
|
|||
links={[
|
||||
[
|
||||
'Agency Partners',
|
||||
<a href="https://www.epa.gov/" target="_blank" rel="noreferrer"
|
||||
<a
|
||||
href={'https://www.epa.gov/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
key={'epalink'}>Environmental Protection Agency</a>,
|
||||
<a href="https://www.whitehouse.gov/omb" target="_blank"
|
||||
rel="noreferrer" key={'whitehouselink'}>Office of Management
|
||||
<a
|
||||
href={'https://www.whitehouse.gov/omb'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
key={'whitehouselink'}>Office of Management
|
||||
and Budget</a>,
|
||||
<a href="https://www.energy.gov/" target="_blank" rel="noreferrer"
|
||||
<a
|
||||
href={'https://www.energy.gov/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
key={'energylink'}>Department of Energy</a>,
|
||||
<a href="https://www.hud.gov/" target="_blank" rel="noreferrer"
|
||||
<a
|
||||
href={'https://www.hud.gov/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
key={'hudlink'}>Department of Housing and Urban
|
||||
Development</a>,
|
||||
],
|
||||
[
|
||||
'More Information',
|
||||
<a href="https://www.whitehouse.gov/" target="_blank"
|
||||
rel="noreferrer"
|
||||
<a
|
||||
href={'https://www.whitehouse.gov/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
key={'whitehouselink2'}>Whitehouse.gov</a>,
|
||||
<a href="#" key={'accessibilitylink'}>Accessibility Statement</a>,
|
||||
<a href="#" key={'privacylink'}>Privacy, Policies, and Legal
|
||||
Information</a>,
|
||||
],
|
||||
// eslint-disable-next-line react/jsx-key
|
||||
[<br/>,
|
||||
<Logo
|
||||
size="medium"
|
||||
key={'logoimg'}
|
||||
image={
|
||||
<img className={'usa-footer__logo-img'} src={whitehouseIcon}
|
||||
alt="Whitehouse logo"/>
|
||||
}
|
||||
/>,
|
||||
[
|
||||
'Have a question about government services?',
|
||||
<a href="#" key={'privacylink'}>Find a contact at USA.gov</a>,
|
||||
],
|
||||
[
|
||||
<>Council on Environmental Quality<br/></>,
|
||||
<Address className={'footerAddressReadability'}
|
||||
key={'footeraddress'}
|
||||
items={[
|
||||
'730 Jackson Pl NW',
|
||||
'Washington, D.C. 20506',
|
||||
'(202) 395-5750',
|
||||
]}
|
||||
/>,
|
||||
<>
|
||||
<Logo
|
||||
size="slim"
|
||||
key={'logoimg'}
|
||||
className={'j40-footer-logo'}
|
||||
image={
|
||||
<img
|
||||
className={'usa-footer__logo-img'}
|
||||
src={whitehouseIcon}
|
||||
alt={'Whitehouse logo'}/>
|
||||
}
|
||||
heading={<p
|
||||
className={'usa-footer__logo-heading ' +
|
||||
' j40-footer-logo-heading'}>
|
||||
Council on Environmental Quality</p>}
|
||||
/>
|
||||
</>,
|
||||
<>
|
||||
<Address
|
||||
className={'j40-address-readability'}
|
||||
key={'footeraddress'}
|
||||
items={[
|
||||
'730 Jackson Pl NW',
|
||||
'Washington, D.C. 20506',
|
||||
'(202) 395-5750',
|
||||
]}
|
||||
/>
|
||||
</>,
|
||||
],
|
||||
]}
|
||||
/>}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,34 @@
|
|||
import React from 'react';
|
||||
import {GovBanner, Header, Title, PrimaryNav} from '@trussworks/react-uswds';
|
||||
import {useIntl, Link} from 'gatsby-plugin-intl';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {Helmet} from 'react-helmet';
|
||||
|
||||
const headerLinks = [
|
||||
<Link to="/" key="/">Home</Link>,
|
||||
<></>,
|
||||
];
|
||||
|
||||
const J40Header = () => {
|
||||
const intl = useIntl();
|
||||
const title = intl.formatMessage({id: '71L0pp',
|
||||
const title = intl.formatMessage({
|
||||
id: '71L0pp',
|
||||
defaultMessage: 'Justice40',
|
||||
description: 'Title of the project'});
|
||||
description: 'Title of the project',
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<meta charSet="utf-8"/>
|
||||
<title>{title}</title>
|
||||
</Helmet>
|
||||
|
||||
<GovBanner />
|
||||
<Header>
|
||||
<Title className={'usa-hero__heading j40-title'}>
|
||||
{title}
|
||||
</Title>
|
||||
<PrimaryNav items={headerLinks}/>
|
||||
<GovBanner/>
|
||||
<Header className={'j40-header'} basic={true} role={'banner'}>
|
||||
<div className="usa-nav-container">
|
||||
<div className="usa-navbar">
|
||||
<Title className={'j40-title'}>{title}</Title>
|
||||
</div>
|
||||
<PrimaryNav items={headerLinks}/>
|
||||
</div>
|
||||
</Header>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
<br />
|
||||
Have a question about government services?
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
|
|
@ -145,20 +145,11 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
<li
|
||||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
|
||||
data-testid="footerLogo"
|
||||
<a
|
||||
href="#"
|
||||
>
|
||||
<div
|
||||
class="mobile-lg:grid-col-auto"
|
||||
>
|
||||
<img
|
||||
alt="Whitehouse logo"
|
||||
class="usa-footer__logo-img"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
Find a contact at USA.gov
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -172,8 +163,29 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
<h4
|
||||
class="usa-footer__primary-link"
|
||||
>
|
||||
Council on Environmental Quality
|
||||
<br />
|
||||
<div
|
||||
class="usa-footer__logo grid-row grid-gap-2 j40-footer-logo"
|
||||
data-testid="footerLogo"
|
||||
>
|
||||
<div
|
||||
class="grid-col-auto"
|
||||
>
|
||||
<img
|
||||
alt="Whitehouse logo"
|
||||
class="usa-footer__logo-img"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid-col-auto"
|
||||
>
|
||||
<p
|
||||
class="usa-footer__logo-heading j40-footer-logo-heading"
|
||||
>
|
||||
Council on Environmental Quality
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
<ul
|
||||
class="usa-list usa-list--unstyled"
|
||||
|
|
@ -182,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
|
|||
class="usa-footer__secondary-link"
|
||||
>
|
||||
<address
|
||||
class="usa-footer__address footerAddressReadability"
|
||||
class="usa-footer__address j40-address-readability"
|
||||
>
|
||||
<div
|
||||
class="usa-footer__contact-info grid-row grid-gap"
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import * as React from 'react';
|
||||
import Layout from '../components/layout';
|
||||
|
||||
// import {GridContainer, Grid} from '@trussworks/react-uswds';
|
||||
|
||||
// this section seems too verbose? must be a more readable way to do this.
|
||||
// this inlines the svg as data:image/svg+xml For larger images this
|
||||
// can cause page bloat, but it should be fine here.
|
||||
// @ts-ignore
|
||||
import publicIcon from '/node_modules/uswds/dist/img/usa-icons/public.svg';
|
||||
// @ts-ignore
|
||||
import chatIcon from '/node_modules/uswds/dist/img/usa-icons/chat.svg';
|
||||
// @ts-ignore
|
||||
import githubIcon from '/node_modules/uswds/dist/img/usa-icons/github.svg';
|
||||
|
|
@ -19,18 +18,15 @@ import busIcon from '/node_modules/uswds/dist/img/usa-icons/directions_bus.svg';
|
|||
import homeIcon from '/node_modules/uswds/dist/img/usa-icons/home.svg';
|
||||
// @ts-ignore
|
||||
import groupsIcon from '/node_modules/uswds/dist/img/usa-icons/groups.svg';
|
||||
// todo: fix svg overlay
|
||||
import pollutionIcon // @ts-ignore
|
||||
from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
|
||||
// @ts-ignore
|
||||
import pollutionIcon from '/node_modules/uswds/dist/img/usa-icons/warning.svg';
|
||||
// @ts-ignore
|
||||
// eslint-disable-next-line max-len
|
||||
import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
|
||||
|
||||
|
||||
// markup
|
||||
const IndexPage = () => {
|
||||
const readMoreList: (any | string)[][] = [
|
||||
[publicIcon, 'Climate change'],
|
||||
[ecoIcon, 'Clean energy and energy efficiency'],
|
||||
[busIcon, 'Clean transit'],
|
||||
[homeIcon, 'Affordable and sustainable housing'],
|
||||
|
|
@ -42,15 +38,14 @@ const IndexPage = () => {
|
|||
return (
|
||||
<Layout>
|
||||
<main id="main-content" role="main">
|
||||
<section className="grid-container">
|
||||
<div className="grid-row grid-gap">
|
||||
<section className="grid-container usa-section">
|
||||
<div className="grid-row grid-gap-2">
|
||||
|
||||
<div className="desktop:grid-col">
|
||||
<div className="grid-row grid-gap">
|
||||
<div
|
||||
className="desktop:grid-col-10 \
|
||||
usa-prose text-asset-container">
|
||||
<h2>Our Team</h2>
|
||||
className="usa-prose text-asset-container">
|
||||
<h2>About Justice40</h2>
|
||||
<p>
|
||||
In an effort to address historical environmental injustices,
|
||||
President Biden created the Justice40 Initiative on January
|
||||
|
|
@ -75,13 +70,21 @@ const IndexPage = () => {
|
|||
|
||||
<p>
|
||||
Read more about the Justice40 Initiative in President
|
||||
Biden’s Executive Order on Tackling the Climate Crisis at
|
||||
Home and Abroad.
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tablet:grid-col-10">
|
||||
<h4>Areas of Focus</h4>
|
||||
<ul className="usa-icon-list j40-two-column">
|
||||
{readMoreList.map((item, index) => {
|
||||
return (
|
||||
|
|
@ -108,84 +111,53 @@ const IndexPage = () => {
|
|||
<div
|
||||
className="desktop:grid-col-10 \
|
||||
usa-prose text-asset-container">
|
||||
<h3>A Transparent, Community-First Approach</h3>
|
||||
<h4>A Transparent, Community-First Approach</h4>
|
||||
|
||||
<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.
|
||||
communities they are serving. CEQ commits to transparency,
|
||||
inclusivity, and iteration in building this screening tool.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Transparent: 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.
|
||||
<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>
|
||||
Inclusive: 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.
|
||||
<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>
|
||||
Iterative: 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.
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid-row grid-gap">
|
||||
<div
|
||||
className="desktop:grid-col-10 \
|
||||
usa-prose text-asset-container">
|
||||
<h3>Timeline</h3>
|
||||
<p>
|
||||
[timeline image here]
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
{/* aside*/}
|
||||
<aside
|
||||
aria-labelledby="left-sidebar"
|
||||
className="desktop:grid-col-2 usa-prose"
|
||||
className="desktop:grid-col-3 usa-prose grid-gap j40-aside"
|
||||
id="left-sidebar">
|
||||
<h2 className={'usa-graphic-list__heading'}>Get Involved</h2>
|
||||
<h3>
|
||||
|
|
@ -195,8 +167,7 @@ const IndexPage = () => {
|
|||
<br/>
|
||||
Send Feedback
|
||||
</h3>
|
||||
<p>Have ideas about how to
|
||||
acknowledge the on-the-ground
|
||||
<p>Have ideas about how to acknowledge the on-the-ground
|
||||
experiences of your community?
|
||||
</p>
|
||||
Email: <a href="mailto: justice40open@usds.gov">
|
||||
|
|
@ -210,13 +181,17 @@ const IndexPage = () => {
|
|||
Join the open source community</h3>
|
||||
<p>
|
||||
Justice40’s code is open source, which means it is available for
|
||||
the public to view and contribute.
|
||||
Anyone can view and contribute on GitHub.
|
||||
the public to view and contribute. Anyone can view and
|
||||
contribute on GitHub.
|
||||
</p>
|
||||
<p>
|
||||
<a href={'https://github.com/usds/justice40-tool'}>Check it out
|
||||
on GitHub</a></p>
|
||||
|
||||
<a
|
||||
href={'https://github.com/usds/justice40-tool/' +
|
||||
'crisis-at-home-and-abroad/'}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
key={'github3'}>Check it out on GitHub</a>
|
||||
</p>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,31 @@
|
|||
max-width: revert;
|
||||
}
|
||||
|
||||
|
||||
.j40-header {
|
||||
background-color: #112F4E; /* todo: move color to theme */
|
||||
color: white;
|
||||
}
|
||||
|
||||
.j40-title {
|
||||
padding: 2em;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
.j40-aside {
|
||||
background-color: #EFF6FB;
|
||||
}
|
||||
|
||||
.j40-footer-logo {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.j40-footer-logo-heading {
|
||||
|
||||
}
|
||||
|
||||
.j40-address-readability {
|
||||
display: inline-block;
|
||||
line-height: 1.5 !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue