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

More layout fixes (#94)

Browse source 
* More layout fixes
* Get aside flush with top/bottom
* Media change iconlist to one column on mobile
* Misc other fixes
* convert className to use React syntax consistently.
* Update J40Footer.spec.tsx.snap
TODO: body font need to be addressed at the theme level?
This commit is contained in:
TomNUSDS 2021-06-04 07:36:16 -07:00 • committed by GitHub
parent 55d6e6635b
commit 63d33b40d0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/src/components/J40Footer.tsx
View file

@ -67,8 +67,7 @@ const J40Footer = () => {
alt={'Whitehouse logo'}/>
}
heading={<p
className={'usa-footer__logo-heading ' +
' j40-footer-logo-heading'}>
className={' j40-footer-logo-heading'}>
Council on Environmental Quality</p>}
/>
</>,

2
client/src/components/__snapshots__/J40Footer.spec.tsx.snap
View file

@ -180,7 +180,7 @@ exports[`J40Footer renders correctly 1`] = `
class="grid-col-auto"
>
<p
class="usa-footer__logo-heading j40-footer-logo-heading"
class=" j40-footer-logo-heading"
>
Council on Environmental Quality
</p>

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

@ -38,13 +38,13 @@ const IndexPage = () => {
return (
<Layout>
<main id="main-content" role="main">
<section className="grid-container usa-section">
<div className="grid-row grid-gap-2">
<div className={'grid-row grid-gap-2'}>
<section className={'grid-container usa-section'}>
<div className={'desktop:grid-col'}>
<div className="desktop:grid-col">
<div className="grid-row grid-gap">
<div className={'grid-row grid-gap'}>
<div
className="usa-prose text-asset-container">
className={'usa-prose text-asset-container'}>
<h2>About Justice40</h2>
<p>
In an effort to address historical environmental injustices,
@ -83,22 +83,22 @@ const IndexPage = () => {
</div>
</div>
<div className="tablet:grid-col-10">
<div className={'grid-gap j40-two-column-confine'}>
<h4>Areas of Focus</h4>
<ul className="usa-icon-list j40-two-column">
<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">
className={'usa-icon-list__item'}>
<div className={'usa-icon-list__icon'}>
<img
className="j40-two-column-icons-spacing"
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>
className={'usa-icon-list__content'}> {item[1]} </div>
</li>
);
})
@ -106,11 +106,9 @@ const IndexPage = () => {
</ul>
</div>
<div className="grid-row grid-gap">
<div className={'grid-row grid-gap'}>
<div
className="desktop:grid-col-10 \
usa-prose text-asset-container">
className={'usa-prose text-asset-container'}>
<h4>A Transparent, Community-First Approach</h4>
<p>
@ -153,32 +151,35 @@ const IndexPage = () => {
</div>
</div>
</div>
</section>
{/* aside*/}
<aside
aria-labelledby="left-sidebar"
className="desktop:grid-col-3 usa-prose grid-gap j40-aside"
id="left-sidebar">
<h2 className={'usa-graphic-list__heading'}>Get Involved</h2>
<h3>
{/* aside */}
<aside
aria-labelledby="left-sidebar"
className={'j40-aside desktop:grid-col-3'}
id="left-sidebar">
<section
className={'usa-prose grid-gap grid-container usa-section'}>
<h3 className={'j40-aside-title'}>Get Involved</h3>
<h5>
<img
className={'flex-align-self-center width-5'} src={chatIcon}
className={'flex-align-self-center width-4'} src={chatIcon}
alt={'chat icon'}/>
<br/>
Send Feedback
</h3>
</h5>
<p>Have ideas about how to acknowledge the on-the-ground
experiences of your community?
</p>
Email: <a href="mailto: justice40open@usds.gov">
justice40open@usds.gov</a>
<p>&nbsp;</p>
<h3>
<h5>
<img
className={'flex-align-self-center width-5'}
className={'flex-align-self-center width-4'}
src={githubIcon} alt={'github icon'}/>
<br/>
Join the open source community</h3>
Join the open source community</h5>
<p>
Justice40’s code is open source, which means it is available for
the public to view and contribute. Anyone can view and
@ -192,10 +193,10 @@ const IndexPage = () => {
rel={'noreferrer'}
key={'github3'}>Check it out on GitHub</a>
</p>
</aside>
</div>
</section>
</aside>
</div>
</section>
</main>
</Layout>
);

20
client/src/styles/global.scss
View file

@ -3,9 +3,16 @@
.j40-two-column {
overflow: hidden;
column-count: 2;
column-gap: 1em;
padding: 0;
@media (min-width: 768px) {
column-count: 2;
column-gap: 1em;
}
@media (max-width: 768px) {
column-count: 1;
column-gap: 0;
}
}
.j40-two-column > * {
@ -21,6 +28,10 @@
max-width: revert;
}
.j40-two-column-confine {
max-width: fit-content;
}
.j40-header {
background-color: #112f4e; /* todo: move color to theme */
color: white;
@ -28,12 +39,17 @@
.j40-title {
font-size: xx-large;
font-family: "Merriweather Web";
}
.j40-aside {
background-color: #eff6fb;
}
.j40-aside-title {
padding-bottom: 1em;
}
.j40-footer-logo {
display: inline-block;
text-align: center;