Skip to content
This repository has been archived by the owner on Jan 7, 2020. It is now read-only.

Table heading css #143

Merged
merged 7 commits into from
May 11, 2018
Merged

Table heading css #143

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
757a46b
updates to styling of header (including progress steps) and improve l…
awolfe76 May 10, 2018
cc308f9
better spacing; use an ordered list for progress
awolfe76 May 10, 2018
31982fe
more cleanup on headings
awolfe76 May 10, 2018
0747c17
make sure nationwide is capitalized
awolfe76 May 10, 2018
1caa80c
better break with an hr
awolfe76 May 10, 2018
130f2c0
adjust spacing
awolfe76 May 11, 2018
0f1339c
add hr to aggregate too
awolfe76 May 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
@import 'reports/Results.scss';
@import 'reports/SearchList.scss';
@import 'reports/ProgressCard.scss';
@import 'reports/Report.scss';
@import 'reports/Selector.scss';
@import 'reports/tables/tables.scss';
3 changes: 2 additions & 1 deletion src/common/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const makeHeadingLink = (headingText, headingLink) => {
const renderHeading = (type, heading) => {
if (type === 1) return <h1>{heading}</h1>
if (type === 2) return <h2>{heading}</h2>
if (type === 3) return <h3>{heading}</h3>
if (type === 4) return <h4>{heading}</h4>
}

Expand Down Expand Up @@ -39,7 +40,7 @@ const Header = props => {
}

Header.propTypes = {
type: PropTypes.oneOf([1, 2, 4]),
type: PropTypes.oneOf([1, 2, 3, 4]),
headingText: PropTypes.string,
paragraphText: PropTypes.string,
headingLink: PropTypes.string
Expand Down
1 change: 1 addition & 0 deletions src/common/Header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.header {
h1,
h2,
h3,
h4 {
margin-bottom: 0;
}
Expand Down
74 changes: 44 additions & 30 deletions src/reports/Aggregate.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ class Aggregate extends React.Component {
detailsCache.msaMds[msaMd.id] = msaMd
}

renderChoices(params) {}

render() {
const { params } = this.props.match
const state = detailsCache.states[params.stateId]
Expand All @@ -55,51 +57,62 @@ class Aggregate extends React.Component {

const header = (
<Header
type={2}
type={1}
headingText="MSA/MD Aggregate Reports"
paragraphText="These reports summarize lending activity by MSA/MD."
/>
)

return (
<>
<React.Fragment>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for the reintroduction of the longer fragment syntax?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really ... the <> way causes my editor (Sublime) to do odd things and makes it hard to read.

<div className="usa-grid" id="main-content">
{header}

{params.stateId ? (
<>
<ProgressCard
title="state"
name={state.name}
id={state.id}
link={`/aggregate-reports/${params.year}`}
/>
<ol className="ProgressCards usa-grid-full">
<li>
<ProgressCard
title="state"
name={state.name}
id={state.id}
link={`/aggregate-reports/${params.year}`}
/>
</li>

{params.msaMdId ? (
<>
<li>
<ProgressCard
title="MSA/MD"
name={msaMd.name}
id={msaMd.id}
link={`/aggregate-reports/${params.year}/${state.id}`}
/>
{params.reportId ? (
<>
<ProgressCard
title="report"
name={report.name}
id={report.id}
link={`/aggregate-reports/${params.year}/${state.id}/${
msaMd.id
}`}
/>
</>
) : (
<Reports {...this.props} />
)}
</>
) : (
<MsaMds {...this.props} selectorCallback={this.setMsaMd} />
)}
</>
</li>
) : null}

{params.reportId ? (
<li>
<ProgressCard
title="report"
name={report.name}
id={report.id}
link={`/aggregate-reports/${params.year}/${state.id}/${
msaMd.id
}`}
/>
</li>
) : null}
</ol>
) : null}

{params.stateId ? (
params.msaMdId ? (
params.reportId ? null : (
<Reports {...this.props} />
)
) : (
<MsaMds {...this.props} selectorCallback={this.setMsaMd} />
)
) : (
<Select
onChange={this.handleChange}
Expand All @@ -113,8 +126,9 @@ class Aggregate extends React.Component {
/>
)}
</div>

{params.reportId ? <Report {...this.props} /> : null}
</>
</React.Fragment>
)
}
}
Expand Down
80 changes: 46 additions & 34 deletions src/reports/Disclosure.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,62 +91,74 @@ class Disclosure extends React.Component {
institution && (institution.institutionId || institution.id)
const header = (
<Header
type={2}
type={1}
headingText="Disclosure reports"
paragraphText="These reports summarize lending activity for individual
institutions, both nationwide and by MSA/MD."
/>
)

return this.state.fetched ? (
<>
<React.Fragment>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another fragment

<div className="usa-grid" id="main-content">
{header}

{params.institutionId ? (
<>
<ProgressCard
title="institution"
name={institution.name}
id={institution.respondentId}
link={`/disclosure-reports/${params.year}`}
/>
<ol className="ProgressCards usa-grid-full">
<li>
<ProgressCard
title="institution"
name={institution.name}
id={institution.respondentId}
link={`/disclosure-reports/${params.year}`}
/>
</li>

{params.msaMdId ? (
<>
<li>
<ProgressCard
title="MSA/MD"
name={msaMd.name}
id={msaMd.id}
link={`/disclosure-reports/${params.year}/${institutionId}`}
/>
{params.reportId ? (
<>
<ProgressCard
title="report"
name={report.name}
id={report.id}
link={`/disclosure-reports/${
params.year
}/${institutionId}/${msaMd.id}`}
/>
</>
) : (
<Reports {...this.props} />
)}
</>
) : (
<MsaMds
{...this.props}
fetchedMsas={fetchedMsas}
selectorCallback={this.setMsaMd}
/>
)}
</>
</li>
) : null}

{params.reportId ? (
<li>
<ProgressCard
title="report"
name={report.name}
id={report.id}
link={`/disclosure-reports/${
params.year
}/${institutionId}/${msaMd.id}`}
/>
</li>
) : null}
</ol>
) : null}

{params.institutionId ? (
params.msaMdId ? (
params.reportId ? null : (
<Reports {...this.props} />
)
) : (
<MsaMds
{...this.props}
fetchedMsas={fetchedMsas}
selectorCallback={this.setMsaMd}
/>
)
) : (
<SearchList makeListItem={this.makeListItem} />
)}
</div>

{params.reportId ? <Report {...this.props} /> : null}
</>
</React.Fragment>
) : (
<LoadingIcon />
)
Expand Down
2 changes: 1 addition & 1 deletion src/reports/ModifiedLar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const ModifiedLar = props => {
return (
<div className="usa-grid" id="main-content">
<Header
type={2}
type={1}
headingText="Modified Loan/Application Register (LAR)"
paragraphText="A downloadable modified LAR file is available for every
financial institution that has completed a 2017 HMDA data submission.
Expand Down
17 changes: 8 additions & 9 deletions src/reports/ProgressCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import React from 'react'
import { Link } from 'react-router-dom'
import Header from '../common/Header.jsx'

const capitalize = str => str[0].toUpperCase() + str.slice(1)
const ProgressCard = ({ name, id, link, title }) => {
if (id === 'nationwide') {
name = ''
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A nationwide id will still need to be capitalized here, though it could just be hardcoded as id = 'Nationwide'

id = capitalize(id)
} else {
name = name + ' - '
}

return (
<div className="ProgressCard usa-width-one-third">
<h5>{capitalize(title)}</h5>
<div>
{name}
{id}
</div>
<Link to={link}>Select a different {title}</Link>
<div className="ProgressCard">
<Header
type={4}
headingText={title}
paragraphText={name + id}
headingLink={link}
/>
</div>
)
}
Expand Down
25 changes: 19 additions & 6 deletions src/reports/ProgressCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
.ProgressCard {
background: $color-gray-lightest;
padding: 0.5em;
margin-bottom: 1em;
.ProgressCards {
margin-bottom: 2em !important;
margin-left: 1em;
.ProgressCard {
.header {
margin-bottom: 0;
h4 {
margin-top: 0;
text-transform: capitalize;
}
}
}

h5 {
margin-bottom: 0.25em;
li {
float: left;
margin-right: 2.35765%;
width: 31.76157%;
&:last-child {
margin-right: 0;
}
}
}
42 changes: 19 additions & 23 deletions src/reports/Report.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,34 +227,30 @@ class Report extends React.Component {
}`
: null
return (
<div className="report">
<Header type={4} headingText={headingText}>
{report ? (
<>
<p style={{ width: '50%', display: 'inline-block' }}>
<div className="Report">
<div className="usa-grid">
<Header type={3} headingText={headingText}>
{report ? (
<>
{report.respondentId ? (
<span>
<p>
Institution: {report.respondentId} -{' '}
{report.institutionName}
</span>
</p>
) : null}
</p>

<p
style={{
width: '50%',
display: 'inline-block',
textAlign: 'right'
}}
>
{report.msa
? `MSA/MD: ${report.msa.id} - ${report.msa.name}`
: 'Nationwide'}
</p>
</>
) : null}
</Header>
<button onClick={this.generateCSV}>Save as CSV</button>
{report.msa ? (
<p>
MSA/MD: {report.msa.id} - {report.msa.name}
</p>
) : (
<p>Nationwide</p>
)}
</>
) : null}
</Header>
<button onClick={this.generateCSV}>Save as CSV</button>
</div>
{this.selectReport(report, reportType)}
<p className="usa-text-small report-date">
Report date: {report.reportDate}
Expand Down
Loading