Merge pull request #32 from kilbergr/rek-style-reporter

Rek style reporter
harvard-lil · Jan 29, 2024 · 5670d53 · 5670d53
2 parents 63ec88d + 9257a4d
commit 5670d53
Showing 1 changed file with 102 additions and 20 deletions.
diff --git a/src/components/cap-reporter.js b/src/components/cap-reporter.js
@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "../lib/lit.js";
 import { fetchVolumesData, fetchReporterData } from "../lib/data.js";
+import { baseStyles } from "../lib/wc-base.js";
 
 export default class CapReporter extends LitElement {
 	static properties = {
@@ -14,6 +15,80 @@ export default class CapReporter extends LitElement {
 		this.reporterData = {};
 	}
 
+	static styles = [
+		baseStyles,
+
+		css`
+			p,
+			ul {
+				font-family: var(--font-sans-text);
+				display: inline;
+
+				@media (min-width: 35rem) {
+					font-size: var(--font-size-175);
+				}
+			}
+
+			ul {
+				padding: 0;
+			}
+
+			li {
+				list-style-type: none;
+				display: inline;
+			}
+
+			a:link,
+			a:visited,
+			a:hover,
+			a:active {
+				text-decoration: none;
+				color: var(--color-blue-400);
+
+				&:hover {
+					color: var(--color-blue-500);
+					text-decoration: underline;
+				}
+			}
+
+			.reporters__main {
+				grid-column: 1 / -1;
+				padding-inline: var(--spacing-500);
+				padding-block-start: var(--spacing-300);
+				padding-block-end: var(--spacing-550);
+
+				@media (min-width: 60rem) {
+					grid-column: 1 / -1;
+				}
+			}
+
+			.reporter__heading {
+				font-weight: 600;
+				font-size: var(--font-size-250);
+				position: relative;
+			}
+
+			.reporter__subHeading {
+				font-size: var(--font-size-175);
+				margin-top: 0;
+				margin-bottom: 1rem;
+				font-weight: 500;
+			}
+
+			.reporter__volumeList {
+				margin-block-start: var(--spacing-100);
+				display: block;
+			}
+
+			.reporter__link {
+				font-weight: 600;
+			}
+
+			.list__title {
+				font-weight: 600;
+			}
+		`,
+	];
 	connectedCallback() {
 		super.connectedCallback();
 		fetchVolumesData(this.reporter, (data) => (this.volumesData = data));
@@ -22,26 +97,33 @@ export default class CapReporter extends LitElement {
 
 	render() {
 		return html`
-			<h1>${this.reporterData.short_name}</h1>
-			<h2>
-				${this.reporterData.full_name}
-				(${this.reporterData.start_year}-${this.reporterData.end_year})
-			</h2>
-			Volume number:
-			<ul>
-				${this.volumesData
-					.sort((a, b) => a.volume_number - b.volume_number)
-					.map(
-						(v) =>
-							html`<li>
-								<a
-									href="/caselaw/?reporter=${this
-										.reporter}&volume=${v.volume_number}"
-									>${v.volume_number}</a
-								>
-							</li>`,
-					)}
-			</ul>
+			<cap-caselaw-layout>
+				<div class="reporters__main">
+					<hgroup>
+						<h1 class="reporter__heading">${this.reporterData.short_name}</h1>
+						<p class="reporter__subHeading">
+							${this.reporterData.full_name}
+							(${this.reporterData.start_year}-${this.reporterData.end_year}).
+						</p>
+					</hgroup>
+					<ul class="reporter__volumeList">
+						<p class="list__title">Volume number:</p>
+						${this.volumesData
+							.sort((a, b) => a.volume_number - b.volume_number)
+							.map(
+								(v) =>
+									html`<li>
+										<a
+											href="/caselaw/?reporter=${this
+												.reporter}&volume=${v.volume_number}"
+											>${v.volume_number}</a
+										>
+									</li>`,
+							)}
+					</ul>
+				</div>
+				<cap-caselaw-layout> </cap-caselaw-layout
+			></cap-caselaw-layout>
 		`;
 	}
 }