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` -Browse all volumes of the Caselaw Access Project below.
++ Or, download our data. +
++ View + + scanned PDF. +
+${this.reporterData.full_name} (${this.reporterData.start_year}-${this.reporterData.end_year}) - volume ${this.volume}. ${this.getPDFLink()} + volume ${this.volume}.
+ ${this.downloadPDF()} + +