From e7ccd35aa6872722c8e4dcfbdf33f62049a6d20b Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Thu, 17 Jun 2021 07:31:18 -0700
Subject: [PATCH] Minimal refactor to make maps wider (#149)

Not particularly pretty, but it works.
---
 client/src/components/layout.tsx      |  13 +-
 client/src/components/map.module.scss |   1 +
 client/src/pages/index.tsx            | 185 +++++++++++++-------------
 client/src/pages/timeline.tsx         |  86 ++++++------
 4 files changed, 146 insertions(+), 139 deletions(-)

diff --git a/client/src/components/layout.tsx b/client/src/components/layout.tsx
index 8d058ff9..ed9c991b 100644
--- a/client/src/components/layout.tsx
+++ b/client/src/components/layout.tsx
@@ -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/>
diff --git a/client/src/components/map.module.scss b/client/src/components/map.module.scss
index 3ea5da50..afd75306 100644
--- a/client/src/components/map.module.scss
+++ b/client/src/components/map.module.scss
@@ -1,4 +1,5 @@
 .mapContainer {
   height: 676px;
   margin-bottom: 29px;
+  max-width: revert;
 }
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index d5544f69..bade0291 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -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>
   );
 };
diff --git a/client/src/pages/timeline.tsx b/client/src/pages/timeline.tsx
index d16ae642..86d6a8b9 100644
--- a/client/src/pages/timeline.tsx
+++ b/client/src/pages/timeline.tsx
@@ -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>
   );
 };