diff --git a/src/components/cap-case.js b/src/components/cap-case.js index 0c0a750..eaa1fb3 100644 --- a/src/components/cap-case.js +++ b/src/components/cap-case.js @@ -4,15 +4,19 @@ import { fetchCaselawBody, fetchCaseMetadata, fetchCasesList, + fetchReporterData, + getBreadcrumbLinks, } from "../lib/data.js"; import { isEmpty } from "../lib/isEmpty.js"; import { fetchOr404 } from "../lib/fetchOr404.js"; +import "./cap-breadcrumb.js"; export default class CapCase extends LitElement { static properties = { caseBody: { attribute: false }, caseMetadata: { attribute: false }, + reporterData: { attribute: false }, reporter: { type: String }, volume: { type: String }, case: { type: String }, @@ -24,16 +28,57 @@ export default class CapCase extends LitElement { /* Styles for HTML under our control */ /**/ + .case__navigation { + max-width: 80%; + margin-inline: auto; + + @media (min-width: 65rem) { + padding-block-end: var(--spacing-200); + } + } + + .case__downloadLinks { + margin-block-start: var(--spacing-100); + font-family: var(--font-sans-text); + + @media (min-width: 35rem) { + font-size: var(--font-size-175); + } + + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-evenly; + } + + .case__downloadLinks a { + color: var(--color-gray-500); + cursor: pointer; + background: none; + border: 2px solid var(--color-gray-500); + font-weight: 600; + font-size: var(--font-size-100); + text-align: center; + text-transform: uppercase; + padding: calc(var(--spacing-125) / 2); + text-decoration: none; + margin: var(--spacing-50); + flex-grow: 1; + } + + .case__downloadLinks a:hover { + color: var(--color-blue-400); + border-color: var(--color-blue-400); + } + /* .case-container */ .case-container { - flex: 0 0 83.33333%; - max-width: 83.33333%; + grid-column: 1 / -1; + padding-block-end: var(--spacing-550); + padding-block-start: var(--spacing-400); margin: auto; - padding-top: 0; - padding-bottom: 100px; - /* styles inherited from "body" in capstone */ letter-spacing: 0.01em; @@ -55,7 +100,9 @@ export default class CapCase extends LitElement { font-size: 0.9em; font-family: var(--font-serif-titling); text-align: center; - padding: 2em 2em 0; + padding: 0 2em 0; + max-width: 83.33333%; + margin: auto; } @media (min-width: 992px) { @@ -76,6 +123,7 @@ export default class CapCase extends LitElement { line-height: 1.4em; padding: 0; margin: 0; + margin-bottom: var(--spacing-50); } .case-header .decision-date, @@ -90,15 +138,11 @@ export default class CapCase extends LitElement { /* .metadata */ .metadata { - flex: 0 0 83.33333%; max-width: 83.33333%; margin: auto; } .metadata .case-name { - flex: 0 0 66.66667%; - max-width: 66.66667%; - margin-left: 16.66667%; font-family: var(--font-serif); text-align: center; } @@ -109,14 +153,6 @@ export default class CapCase extends LitElement { font-style: italic; } - /* PDF link */ - - .pdf-link { - font-family: var(--font-sans-text); - text-align: center; - margin: var(--spacing-50) auto -1em; - } - /**/ /* Styles that apply to the injected HTML */ /**/ @@ -359,6 +395,7 @@ export default class CapCase extends LitElement { super(); this.caseBody = ""; this.caseMetadata = {}; + this.reporterData = {}; } connectedCallback() { @@ -378,6 +415,8 @@ export default class CapCase extends LitElement { this.case, (data) => (this.caseMetadata = data), ), + () => + fetchReporterData(this.reporter, (data) => (this.reporterData = data)), ); window.addEventListener("hashchange", this.handleHashChange.bind(this)); } @@ -455,14 +494,11 @@ export default class CapCase extends LitElement { getPDFLink() { if (this.caseMetadata.provenance.source === "Harvard") { return html` - + View scanned PDF `; } return nothing; @@ -536,25 +572,51 @@ export default class CapCase extends LitElement { window.requestAnimationFrame(this.rewriteLinks); return html` -
-
-

${this.createCaseHeaderHeader(this.caseMetadata)}

-
- ${this.getDecisionDate(this.caseMetadata.decision_date)} - ${this.caseMetadata.court?.name} - ${this.getDocketNumber(this.caseMetadata.docket_number)} +
+ + +
+ +
+
+

${this.createCaseHeaderHeader(this.caseMetadata)}

+
+ ${this.getDecisionDate(this.caseMetadata.decision_date)} + ${this.caseMetadata.court?.name} + ${this.getDocketNumber(this.caseMetadata.docket_number)} +
+
+ ${this.createCitationsString(this.caseMetadata.citations)} +
-
- ${this.createCitationsString(this.caseMetadata.citations)} + + + ${unsafeHTML(this.caseBody)}
- - ${this.getPDFLink()} - - ${unsafeHTML(this.caseBody)} -
+
`; } else { return nothing; diff --git a/src/components/cap-content-router.js b/src/components/cap-content-router.js index 1b6ae3b..248cee9 100644 --- a/src/components/cap-content-router.js +++ b/src/components/cap-content-router.js @@ -11,11 +11,14 @@ export default class CapContentRouter extends LitElement { css` cap-case { display: block; - flex: 0 0 58.33333%; - max-width: 58.33333%; margin: auto; - padding-top: 2.5rem; - padding-bottom: 3rem; + padding-top: var(--spacing-250); + padding-bottom: var(--spacing-500); + + @media (min-width: 65rem) { + flex: 0 0 58.33333%; + max-width: 58.33333%; + } } `, ]; diff --git a/src/components/cap-jurisdictions.js b/src/components/cap-jurisdictions.js index 9f5a770..33f0fe0 100644 --- a/src/components/cap-jurisdictions.js +++ b/src/components/cap-jurisdictions.js @@ -60,6 +60,27 @@ export default class CapJurisdictions extends LitElement { font-family: var(--font-serif); } + .jurisdictions__button { + margin-top: var(--spacing-75); + } + + .jurisdictions__button a { + color: var(--color-gray-600); + cursor: pointer; + background: none; + border: 2px solid var(--color-gray-600); + font-weight: 700; + font-size: var(--font-size-100); + text-transform: uppercase; + width: fit-content; + padding: calc(var(--spacing-125) / 2); + } + + .jurisdictions__button a:hover { + color: var(--color-blue-400); + border-color: var(--color-blue-400); + } + .jurisdictions__main { grid-column: 1 / -1; padding-inline: var(--spacing-500); @@ -160,6 +181,12 @@ export default class CapJurisdictions extends LitElement {

Browse all volumes of the Caselaw Access Project below.

+

+ Or, download our data. +

+

+ Learn more about bulk data +

- + `; } else { return nothing; diff --git a/src/components/cap-volume.js b/src/components/cap-volume.js index 9d3e558..16b604f 100644 --- a/src/components/cap-volume.js +++ b/src/components/cap-volume.js @@ -83,6 +83,20 @@ export default class CapVolume extends LitElement { font-weight: 500; } + .volume__downloadLinks { + margin-block-start: var(--spacing-150); + } + + .volume__downloadLinks a { + font-weight: 400; + } + + .volume__caseListHeading { + margin-block-start: var(--spacing-200); + font-size: var(--font-size-175); + font-weight: 600; + } + .volume__caseList { margin-block-start: var(--spacing-150); display: block; @@ -110,13 +124,16 @@ export default class CapVolume extends LitElement { ); } - getPDFLink() { + downloadPDF() { if (this.casesData[0].provenance.source === "Harvard") { - return html` - View scanned PDF.`; + return html` `; } return nothing; } @@ -141,9 +158,33 @@ export default class CapVolume extends LitElement {

${this.reporterData.full_name} (${this.reporterData.start_year}-${this.reporterData.end_year}) - volume ${this.volume}. ${this.getPDFLink()} + volume ${this.volume}.

+ ${this.downloadPDF()} + +

Cases