Skip to content

Commit

Permalink
Merge pull request #104 from tinykite/dialog-fix
Browse files Browse the repository at this point in the history 
Dialog fix
  • Loading branch information
@tinykite
tinykite authored Jul 8, 2024
2 parents 63b3199 + 1ad3d04 commit 0a59492
Showing 1 changed file with 147 additions and 91 deletions.
238 changes: 147 additions & 91 deletions src/components/cap-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ class CapNav extends LitElement {
max-inline-size: min(90vw, 60ch);
max-block-size: min(80vh, 100%);
max-block-size: min(80dvb, 100%);
overflow: hidden;
background-color: var(--color-beige);
position: fixed;
margin: auto;
Expand All @@ -33,6 +32,34 @@ class CapNav extends LitElement {
margin-block-start: var(--spacing-200);
}
}
.searchInterstitial__button {
--positionOffset: 0.5rem;
--padding: 0.75rem;
position: absolute;
top: var(--positionOffset);
right: var(--positionOffset);
background: none;
border: none;
padding: var(--padding);
cursor: pointer;
&:hover,
&:focus {
color: var(--color-purple-300);
}
}
.searchInterstitial__button,
.searchInterstitial__icon {
margin: 0;
}
.searchInterstitial__icon {
color: inherit;
}
.header {
position: relative;
}
Expand Down Expand Up @@ -114,9 +141,18 @@ class CapNav extends LitElement {
}
.nav__link:hover,
.nav__link:focus {
.nav__link:focus,
.nav__interstitialToggle:hover,
.nav__interstitialToggle:focus {
color: var(--color-yellow);
}
.nav__interstitialToggle {
cursor: pointer;
background: none;
border: none;
color: inherit;
}
`,
];

Expand Down Expand Up @@ -170,102 +206,122 @@ class CapNav extends LitElement {
}
}

_openSearchInterstitial(event) {
event.preventDefault();
get searchInterstitial() {
return this.shadowRoot.querySelector(".searchInterstitial");
}

_openSearchInterstitial() {
this.searchInterstitial.showModal();
}

const searchInterstitial = this.shadowRoot.querySelector(
".searchInterstitial",
);
searchInterstitial.showModal();
_closeSearchInterstitial() {
this.searchInterstitial.close();
}

render() {
return html`
<div>
<dialog class="searchInterstitial">
<h2>Search at CourtListener</h2>
<p>Goodbye for now!</p>
<p>
All use restrictions for the Caselaw Access Project’s data have
officially been lifted. To consolidate efforts and make space for
future projects at the Library Innovation Lab, we have partnered
with our good friends at CourtListener to provide search for the
corpus.
</p>
<p>
<a href="https://www.courtlistener.com/opinion/">
Proceed to CourtListener
</a>
</p>
</dialog>
<header class="header">
<nav class="nav">
<a href="/">
<cap-logo></cap-logo>
<span class="u-visuallyHidden">Caselaw Access Project</span></a
>
<button
class="nav__mobileMenuToggle"
aria-haspopup="menu"
aria-expanded="false"
@click="${this._handleMenuToggle}"
<dialog class="searchInterstitial">
<button
class="searchInterstitial__button"
@click="${this._closeSearchInterstitial}"
>
<span class="u-visuallyHidden">Close</span>
<svg
class="searchInterstitial__icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"
fill="currentColor"
/>
</svg>
</button>
<h2>Search at CourtListener</h2>
<p>Goodbye for now!</p>
<p>
All use restrictions for the Caselaw Access Project’s data have
officially been lifted. To consolidate efforts and make space for
future projects at the Library Innovation Lab, we have partnered with
our good friends at CourtListener to provide search for the corpus.
</p>
<p>
<a href="https://www.courtlistener.com/opinion/">
Proceed to CourtListener
</a>
</p>
</dialog>
<header class="header">
<nav class="nav">
<a href="/">
<cap-logo></cap-logo>
<span class="u-visuallyHidden">Caselaw Access Project</span></a
>
<button
class="nav__mobileMenuToggle"
aria-haspopup="menu"
aria-expanded="false"
@click="${this._handleMenuToggle}"
>
<span class="u-visuallyHidden"> Menu </span>
<svg
class="nav__mobileMenuIcon"
aria-hidden="true"
width="25"
height="18"
viewBox="0 0 25 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<span class="u-visuallyHidden"> Menu </span>
<svg
class="nav__mobileMenuIcon"
aria-hidden="true"
width="25"
height="18"
viewBox="0 0 25 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
<path
class="nav__mobileMenuPath nav__mobileMenuPath--top"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.74228e-08 0.999998C1.35705e-07 0.447713 0.447716 -2.14643e-06 1 -2.09815e-06L24 -8.74228e-08C24.5523 -3.91405e-08 25 0.447715 25 1V1C25 1.55228 24.5523 2 24 2L1 2C0.447715 2 3.91405e-08 1.55228 8.74228e-08 0.999998V0.999998Z"
fill="currentColor"
/>
<path
class="nav__mobileMenuPath nav__mobileMenuPath--middle"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.74228e-08 9C1.35705e-07 8.44771 0.447716 8 1 8L24 8C24.5523 8 25 8.44772 25 9V9C25 9.55228 24.5523 10 24 10L1 10C0.447715 10 3.91405e-08 9.55228 8.74228e-08 9V9Z"
fill="currentColor"
/>
<path
class="nav__mobileMenuPath nav__mobileMenuPath--bottom"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.74228e-08 17C1.35705e-07 16.4477 0.447716 16 1 16L24 16C24.5523 16 25 16.4477 25 17V17C25 17.5523 24.5523 18 24 18L1 18C0.447715 18 3.91405e-08 17.5523 8.74228e-08 17V17Z"
fill="currentColor"
/>
</svg>
</button>
<ul class="nav__list">
<li class="nav__item">
<button
class="nav__interstitialToggle"
@click="${this._openSearchInterstitial}"
>
<path
class="nav__mobileMenuPath nav__mobileMenuPath--top"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.74228e-08 0.999998C1.35705e-07 0.447713 0.447716 -2.14643e-06 1 -2.09815e-06L24 -8.74228e-08C24.5523 -3.91405e-08 25 0.447715 25 1V1C25 1.55228 24.5523 2 24 2L1 2C0.447715 2 3.91405e-08 1.55228 8.74228e-08 0.999998V0.999998Z"
fill="currentColor"
/>
<path
class="nav__mobileMenuPath nav__mobileMenuPath--middle"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.74228e-08 9C1.35705e-07 8.44771 0.447716 8 1 8L24 8C24.5523 8 25 8.44772 25 9V9C25 9.55228 24.5523 10 24 10L1 10C0.447715 10 3.91405e-08 9.55228 8.74228e-08 9V9Z"
fill="currentColor"
/>
<path
class="nav__mobileMenuPath nav__mobileMenuPath--bottom"
fill-rule="evenodd"
clip-rule="evenodd"
d="M8.74228e-08 17C1.35705e-07 16.4477 0.447716 16 1 16L24 16C24.5523 16 25 16.4477 25 17V17C25 17.5523 24.5523 18 24 18L1 18C0.447715 18 3.91405e-08 17.5523 8.74228e-08 17V17Z"
fill="currentColor"
/>
</svg>
</button>
<ul class="nav__list">
<li class="nav__item" tab>
<a
class="nav__link"
@click="${this._openSearchInterstitial}"
href="https://www.courtlistener.com/opinion/"
>Search</a
>
</li>
${navLinks.map((link) => {
return html`
<li class="nav__item" tab>
<a class="nav__link" href="${link.path}">${link.name}</a>
</li>
`;
})}
</ul>
</nav>
</header>
</div>
Search
</button>
</li>
${navLinks.map((link) => {
return html`
<li class="nav__item">
<a class="nav__link" href="${link.path}">${link.name}</a>
</li>
`;
})}
</ul>
</nav>
</header>
`;
}
}
Expand Down

0 comments on commit 0a59492

Please sign in to comment.