From bcae2a692f9f94e4bb158b149cc019af669d90a5 Mon Sep 17 00:00:00 2001 From: R I B Z Date: Wed, 7 Feb 2024 12:31:15 -0800 Subject: [PATCH 1/5] link to the right anchor --- src/components/cap-section-highlight.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/cap-section-highlight.js b/src/components/cap-section-highlight.js index 1718c01..981aa7f 100644 --- a/src/components/cap-section-highlight.js +++ b/src/components/cap-section-highlight.js @@ -7,6 +7,10 @@ import { pressLinks } from "../data/pressLinks.js"; export class CapSectionHighlight extends LitElement { static properties = {}; + constructor() { + super(); + } + static styles = [ baseStyles, css` @@ -92,9 +96,6 @@ export class CapSectionHighlight extends LitElement { `, ]; - constructor() { - super(); - } render() { return html`
@@ -106,7 +107,7 @@ export class CapSectionHighlight extends LitElement { >

See the full list:

- Press + Press
From ee5f49e1e9bed3fc151737c66447a91d003a70eb Mon Sep 17 00:00:00 2001 From: R I B Z Date: Wed, 7 Feb 2024 12:32:47 -0800 Subject: [PATCH 2/5] add back in shadow DOM and some styling...tbc --- src/templates/cap-about-page.js | 111 +++++++++++++++++++++++++++++--- 1 file changed, 101 insertions(+), 10 deletions(-) diff --git a/src/templates/cap-about-page.js b/src/templates/cap-about-page.js index 67c9bc0..a0676fd 100644 --- a/src/templates/cap-about-page.js +++ b/src/templates/cap-about-page.js @@ -1,4 +1,5 @@ -import { LitElement, html } from "../lib/lit.js"; +import { LitElement, html, css } from "../lib/lit.js"; +import { baseStyles } from "../lib/wc-base.js"; import "../components/cap-nav.js"; import "../components/cap-page-header.js"; import "../components/cap-footer.js"; @@ -8,19 +9,109 @@ import "../components/cap-contributor-list.js"; import { anchorLinks } from "../data/aboutSidebarLinks.js"; export class CapAboutPage extends LitElement { - // Turn Shadow DOM off - // Generally discouraged: https://lit.dev/docs/components/shadow-dom/#implementing-createrenderroot - createRenderRoot() { - return this; + static properties = {}; + + constructor() { + super(); + } + + static styles = [ + baseStyles, + css` + + .interiorPage__main { + display: grid; + grid-template-columns: repeat(4, 1fr); + + @media (min-width: 65rem) { + max-width: 80%; + margin-inline: auto; + box-shadow: 0 0 27px 0 rgba(222, 222, 230, 0.46); + } + } + + .interiorPage__header { + background-color: var(--color-gray-500); + grid-column: 1 / -1; + } + + .intPage__description { + color: var(--color-white); + font-family: var(--font-serif); + } + + interiorPage__aside { + @media (max-width: 60rem) { + display: none; + } + } + + interiorPage__article { + grid-column: 1 / -1; + background: var(--color-beige); + padding-inline: var(--spacing-500); + padding-block-start: var(--spacing-300); + padding-block-end: var(--spacing-550); + background-color: var(--color-beige); + + @media (min-width: 60rem) { + grid-column: 2 / -1; + } + } + + interiorPage__article * + * { + margin-block-start: var(--spacing-100); + + @media (min-width: 35rem) { + margin-block-start: var(--spacing-200); + } + } + + interiorPage__article h2 + * { + margin-block-start: var(--spacing-100); + } + ` + ] + + connectedCallback() { + super.connectedCallback(); + window.addEventListener("hashchange", this.handleHashChange.bind(this)); + } + + updated() { + // if a person navigates directly to a URL with a hash, handle it on load + this.handleHashChange(); + } + + disconnectedCallback() { + super.disconnectedCallback(); + window.removeEventListener("hashchange", this.handleHashChange.bind(this)); + } + + /* + In order to preserve encapsulation in the shadow DOM, we need to recreate + the ability to navigate to the anchor tags for each link. + Potentially we could have rendered to the window's DOM, but that will be + potentially problematic when we have to render case HTML, so I started + using this pattern here. + */ + handleHashChange() { + const hash = window.location.hash.substring(1); // remove the '#' + if (hash) { + const element = this.shadowRoot.getElementById(hash); + if (element) { + element.scrollIntoView(); + } + } } render() { return html` -
-
+
+
-

+

The Caselaw Access Project (“CAP”) expands public access to U.S. law. Our goal is to make all published U.S. court decisions freely available to the public online, in a consistent format, digitized @@ -28,10 +119,10 @@ export class CapAboutPage extends LitElement {

-
-

+

What data do we have?

@@ -149,7 +216,7 @@ export class CapAboutPage extends LitElement { We also offer PDFs with selectable OCR text for each case published up to 2018.

-

Data sources

+

Data sources

Harvard Law School Collection

We created CAP's initial collection by digitizing roughly 40 million @@ -238,7 +305,7 @@ export class CapAboutPage extends LitElement {

  • Copyrighted material such as headnotes.
    • -

    Data quality

    +

    Data quality

    Harvard Law School Collection data is generated by OCR from page scans, using ABBYY FineReader. Case metadata, such as the party @@ -246,24 +313,24 @@ export class CapAboutPage extends LitElement { Case text and general head matter has been generated by machine OCR and has not received human review.

    -

    Data citation

    +

    Data citation

    Data made available through the Caselaw Access Project API and bulk download service is citable. View our suggested citation in these standard formats:

    - APA
    + APA
    Caselaw Access Project. (2018). Retrieved [date], from [url].

    - MLA
    + MLA
    The President and Fellows of Harvard University. "Caselaw Access Project." 2018, [url].

    - Chicago / Turabian
    + Chicago / Turabian
    Caselaw Access Project. "Caselaw Access Project." Last modified [date], [url].

    @@ -271,18 +338,18 @@ export class CapAboutPage extends LitElement { Have you used Caselaw Access Project data in your research? Tell us about it.

    -

    +

    Usage and Access

    -

    +

    The CAP data is free for the public to use and access.

    -

    Press

    +

    Press

    -

    +

    Friends and Partners

      @@ -323,10 +390,10 @@ export class CapAboutPage extends LitElement {
    -

    Contributors

    +

    Contributors

    -

    Getting Legal Help

    From 7958a9d2fa7deb82ef7071be4c3acb76cecb116d Mon Sep 17 00:00:00 2001 From: R I B Z Date: Wed, 7 Feb 2024 14:00:59 -0800 Subject: [PATCH 4/5] fix lint --- src/templates/cap-about-page.js | 201 +++++++++++++++++--------------- 1 file changed, 105 insertions(+), 96 deletions(-) diff --git a/src/templates/cap-about-page.js b/src/templates/cap-about-page.js index 49f3844..382cd68 100644 --- a/src/templates/cap-about-page.js +++ b/src/templates/cap-about-page.js @@ -18,127 +18,127 @@ export class CapAboutPage extends LitElement { static styles = [ baseStyles, css` - p, - ul { - font-family: var(--font-sans-text); + p, + ul { + font-family: var(--font-sans-text); - @media (min-width: 35rem) { - font-size: var(--font-size-175); + @media (min-width: 35rem) { + font-size: var(--font-size-175); + } } - } - ul { - padding-inline-start: 1.8rem; - list-style-position: outside; - } + ul { + padding-inline-start: 1.8rem; + list-style-position: outside; + } - li { - list-style-type: circle; - } + li { + list-style-type: circle; + } - h2 { - font-size: var(--font-size-200); - font-weight: 600; + h2 { + font-size: var(--font-size-200); + font-weight: 600; - @media (min-width: 35rem) { - font-size: var(--font-size-250); + @media (min-width: 35rem) { + font-size: var(--font-size-250); + } } - } - h3 { - font-size: var(--font-size-175); + h3 { + font-size: var(--font-size-175); - @media (min-width: 35rem) { - font-size: var(--font-size-200); + @media (min-width: 35rem) { + font-size: var(--font-size-200); + } } - } - h4 { - font-size: var(--font-size-100); + h4 { + font-size: var(--font-size-100); - @media (min-width: 35rem) { - font-size: var(--font-size-175); + @media (min-width: 35rem) { + font-size: var(--font-size-175); + } } - } - a:link, - a:visited, - a:active { - text-decoration: none; - color: var(--color-blue-400); - } + a:link, + a:visited, + a:active { + text-decoration: none; + color: var(--color-blue-400); + } - a:hover { - color: var(--color-blue-500); - text-decoration: underline; - } + a:hover { + color: var(--color-blue-500); + text-decoration: underline; + } - .interiorPage__main { - display: grid; - grid-template-columns: repeat(4, 1fr); + .interiorPage__main { + display: grid; + grid-template-columns: repeat(4, 1fr); - @media (min-width: 65rem) { - max-width: 80%; - margin-inline: auto; - box-shadow: 0 0 27px 0 rgba(222, 222, 230, 0.46); + @media (min-width: 65rem) { + max-width: 80%; + margin-inline: auto; + box-shadow: 0 0 27px 0 rgba(222, 222, 230, 0.46); + } } - } - .interiorPage__header { - background-color: var(--color-gray-500); - grid-column: 1 / -1; - } + .interiorPage__header { + background-color: var(--color-gray-500); + grid-column: 1 / -1; + } - .intPage__description { - color: var(--color-white); - font-family: var(--font-serif); - } + .intPage__description { + color: var(--color-white); + font-family: var(--font-serif); + } - interiorPage__aside { - @media (max-width: 60rem) { - display: none; + interiorPage__aside { + @media (max-width: 60rem) { + display: none; + } } - } - .interiorPage__article { - grid-column: 1 / -1; - background-color: var(--color-beige); - padding-inline: var(--spacing-500); - padding-block-start: var(--spacing-300); - padding-block-end: var(--spacing-550); + .interiorPage__article { + grid-column: 1 / -1; + background-color: var(--color-beige); + padding-inline: var(--spacing-500); + padding-block-start: var(--spacing-300); + padding-block-end: var(--spacing-550); - @media (min-width: 60rem) { - grid-column: 2 / -1; + @media (min-width: 60rem) { + grid-column: 2 / -1; + } } - } - .interiorPage__decorator { - font-weight: 400; - color: var(--color-blue-500); - position: relative; - } - - .interiorPage__decorator::before { - content: "§"; - color: var(--color-yellow); - position: absolute; - font-size: 1.5rem; - line-height: 1.2; - transform: translateX(calc(-100% - 0.5rem)) translateY(5%); - } + .interiorPage__decorator { + font-weight: 400; + color: var(--color-blue-500); + position: relative; + } - @media screen and (min-width: 35rem) { .interiorPage__decorator::before { - font-size: 2rem; - line-height: 1.5; + content: "§"; + color: var(--color-yellow); + position: absolute; + font-size: 1.5rem; + line-height: 1.2; + transform: translateX(calc(-100% - 0.5rem)) translateY(5%); } - } - .interiorPage__purple { - color: var(--color-purple-200); - } - ` - ] + @media screen and (min-width: 35rem) { + .interiorPage__decorator::before { + font-size: 2rem; + line-height: 1.5; + } + } + + .interiorPage__purple { + color: var(--color-purple-200); + } + `, + ]; connectedCallback() { super.connectedCallback(); @@ -216,7 +216,9 @@ export class CapAboutPage extends LitElement { We also offer PDFs with selectable OCR text for each case published up to 2018.

    -

    Data sources

    +

    + Data sources +

    Harvard Law School Collection

    We created CAP's initial collection by digitizing roughly 40 million @@ -305,7 +307,9 @@ export class CapAboutPage extends LitElement {

  • Copyrighted material such as headnotes.
    • -

    Data quality

    +

    + Data quality +

    Harvard Law School Collection data is generated by OCR from page scans, using ABBYY FineReader. Case metadata, such as the party @@ -313,7 +317,9 @@ export class CapAboutPage extends LitElement { Case text and general head matter has been generated by machine OCR and has not received human review.

    -

    Data citation

    +

    + Data citation +

    Data made available through the Caselaw Access Project API and bulk download service is citable. View our suggested citation in these @@ -330,7 +336,8 @@ export class CapAboutPage extends LitElement { Access Project." 2018, [url].

    - Chicago / Turabian
    + Chicago / Turabian
    Caselaw Access Project. "Caselaw Access Project." Last modified [date], [url].

    @@ -390,7 +397,9 @@ export class CapAboutPage extends LitElement { -

    Contributors

    +

    + Contributors +

    From b97203d8e9d0444f67ce3c13add68bc05ab2226a Mon Sep 17 00:00:00 2001 From: R I B Z Date: Thu, 8 Feb 2024 07:14:26 -0800 Subject: [PATCH 5/5] improves style naming --- src/templates/cap-about-page.js | 70 ++++++++++++++++++++------------- 1 file changed, 43 insertions(+), 27 deletions(-) diff --git a/src/templates/cap-about-page.js b/src/templates/cap-about-page.js index 382cd68..18b44a1 100644 --- a/src/templates/cap-about-page.js +++ b/src/templates/cap-about-page.js @@ -73,7 +73,7 @@ export class CapAboutPage extends LitElement { text-decoration: underline; } - .interiorPage__main { + .interiorMain { display: grid; grid-template-columns: repeat(4, 1fr); @@ -84,23 +84,23 @@ export class CapAboutPage extends LitElement { } } - .interiorPage__header { + .interiorMain__header { background-color: var(--color-gray-500); grid-column: 1 / -1; } - .intPage__description { + .interiorMain__description { color: var(--color-white); font-family: var(--font-serif); } - interiorPage__aside { + .interiorMain__aside { @media (max-width: 60rem) { display: none; } } - .interiorPage__article { + .interiorMain__article { grid-column: 1 / -1; background-color: var(--color-beige); padding-inline: var(--spacing-500); @@ -112,13 +112,29 @@ export class CapAboutPage extends LitElement { } } - .interiorPage__decorator { + .interiorMain__article + .interiorMain__article { + padding-block-start: 0; + } + + .interiorMain__article * + * { + margin-block-start: var(--spacing-100); + + @media (min-width: 35rem) { + margin-block-start: var(--spacing-200); + } + } + + .interiorMain__decorator + * { + margin-block-start: var(--spacing-100); + } + + .interiorMain__decorator { font-weight: 400; color: var(--color-blue-500); position: relative; } - .interiorPage__decorator::before { + .interiorMain__decorator::before { content: "§"; color: var(--color-yellow); position: absolute; @@ -128,13 +144,13 @@ export class CapAboutPage extends LitElement { } @media screen and (min-width: 35rem) { - .interiorPage__decorator::before { + .interiorMain__decorator::before { font-size: 2rem; line-height: 1.5; } } - .interiorPage__purple { + .interiorMain__emphasis { color: var(--color-purple-200); } `, @@ -175,10 +191,10 @@ export class CapAboutPage extends LitElement { render() { return html` -
    -
    +
    +
    -

    +

    The Caselaw Access Project (“CAP”) expands public access to U.S. law. Our goal is to make all published U.S. court decisions freely available to the public online, in a consistent format, digitized @@ -186,11 +202,11 @@ export class CapAboutPage extends LitElement {

    -