diff --git a/src/js/designs/ResultsItem/ResultsItem.stories.js b/src/js/designs/ResultsItem/ResultsItem.stories.js
index 90c75e2..ece7a1a 100644
--- a/src/js/designs/ResultsItem/ResultsItem.stories.js
+++ b/src/js/designs/ResultsItem/ResultsItem.stories.js
@@ -21,6 +21,9 @@ const parameters = {
export const FullView = {
parameters: parameters,
+ args: {
+ visited: false,
+ }
};
export const MultipleItems = {
parameters: parameters,
@@ -33,11 +36,20 @@ export const SearchOnly = {
parameters: parameters,
args: {
access: 'limited-search-only',
+ visited: false,
+ },
+};
+export const RegisteredAccess = {
+ parameters: parameters,
+ args: {
+ access: 'registered-access',
+ visited: false,
},
};
export const AccessPermitted = {
parameters: parameters,
args: {
access: 'limited-access-permitted',
+ visited: false,
},
};
diff --git a/src/js/designs/ResultsItem/index.svelte b/src/js/designs/ResultsItem/index.svelte
index 58058d4..3d29948 100644
--- a/src/js/designs/ResultsItem/index.svelte
+++ b/src/js/designs/ResultsItem/index.svelte
@@ -7,6 +7,7 @@
export let publicationDate = 1827;
export let author = 'Nicolas, Nicholas Harris, Sir, 1799-1848.';
export let supportsSelection = true;
+ export let visited = false;
let coverUrl = `https://babel.hathitrust.org/cgi/imgsrv/cover?id=${htid}&width=250`;
let blankImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=`;
@@ -43,7 +44,10 @@
Catalog Record Catalog Record{#if visited}{/if}
{#if access == 'multiple-items'}
Use the Catalog Record to view multiple volumes -->
{:else if access == 'limited-search-only'}
Limited (search-only) Limited (search-only){#if visited}{/if}
+ {:else if access == 'registered-access'}
+ Registered Access{#if visited}{/if}
{:else if access == 'limited-access-permitted'}
Limited (access permitted) Limited (access permitted){#if visited}{/if}
{:else}
Full View Full View{#if visited}{/if}
{/if}
@@ -106,23 +129,67 @@
text-decoration: none;
}
- a[data-access-role] {
- background: #924a0b;
- // border-radius: 4px;
- color: white;
+ .list-group {
+ a {
+ white-space: nowrap;
- &:hover {
- background: white;
- color: #924a0b;
+ &:has(+ span) {
+ border-top-right-radius: var(--bs-list-group-border-radius) !important;
+ border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
+ }
+ .visited-link {
+ color: var(--bs-list-group-color);
+ margin-left: auto;
+ }
+ &:hover .visited-link,
+ &:focus .visited-link {
+ color: var(--bs-list-group-action-hover-color);
+ }
+
+ &:active .visited-link {
+ color: var(--bs-list-group-action-active-bg);
+ }
+
+ .visited-link {
+ color: var(--bs-list-group-color);
+ }
+
+ // &.active .visited-link {
+ // color: var(--bs-list-group-active-bg);
+ // }
+
+ &.active .visited-link {
+ color: var(--bs-list-group-active-color);
+ }
+ }
+ .list-group-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
}
}
+ a[data-activated-role] {
+ background: var(--color-primary-800);
+ color: white;
- .list-group a {
- white-space: nowrap;
-
- &:has(+ span) {
- border-top-right-radius: var(--bs-list-group-border-radius) !important;
- border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
+ &:hover,
+ &:focus {
+ background: white;
+ color: var(--color-primary-800);
+ }
+ .visited-link {
+ color: var(--color-shades-0);
+ }
+ &:hover .visited-link,
+ &:focus .visited-link {
+ color: var(--color-primary-800);
+ }
+ &:active {
+ background-color: var(--color-primary-900);
+ color: var(--color-shades-0);
+ }
+ &:active .visited-link {
+ color: var(--color-shades-0);
}
}
diff --git a/src/js/designs/ResultsList/index.svelte b/src/js/designs/ResultsList/index.svelte
index afb984d..d4b12e0 100644
--- a/src/js/designs/ResultsList/index.svelte
+++ b/src/js/designs/ResultsList/index.svelte
@@ -20,6 +20,14 @@
publicationDate: 1979,
access: 'limited-search-only',
},
+ {
+ htid: 'coo.31924057934600',
+ catalogId: '000552872',
+ title: 'Contributions from the Dominion Observatory, Ottawa, Ontario v.6:6',
+ author: 'Dominion Observatory (Canada)',
+ publicationDate: 1979,
+ access: 'registered-access',
+ },
{
htid: 'hvd.32044019639822',
catalogId: '009720544',
diff --git a/src/scss/apps.scss b/src/scss/apps.scss
index 2275e95..25425fd 100644
--- a/src/scss/apps.scss
+++ b/src/scss/apps.scss
@@ -180,37 +180,40 @@ body {
text-decoration: none;
}
- a[data-access-role] {
- background: #924a0b;
- // border-radius: 4px;
- color: white;
-
- &:hover {
- background: white;
- color: #924a0b;
- }
- }
-
.list-group a {
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.5rem;
+ font-size: 1rem;
+ font-weight: 500;
+ line-height: 1.3125rem;
+ letter-spacing: -0.01rem;
+
&:has(+ span) {
border-top-right-radius: var(--bs-list-group-border-radius) !important;
border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
+
}
+ // label colors
+ --bs-list-group-color: var(--color-neutral-900);
+ --bs-list-group-bg: var(--color-shades-0);
+ --bs-list-group-active-color: var(--color-shades-0);
+ --bs-list-group-active-bg: var(--color-primary-600);
+ --bs-list-group-action-active-color: var(--color-neutral-900);
+ --bs-list-group-action-active-bg: var(--color-neutral-100);
+
.visited-link {
color: var(--bs-list-group-bg);
margin-left: auto;
}
- &:hover .visited-link,&:focus .visited-link {
+ &:hover .visited-link, &:focus .visited-link {
color: var(--bs-list-group-action-hover-bg);
}
-
+
&:active .visited-link {
color: var(--bs-list-group-action-active-bg);
}
@@ -219,14 +222,50 @@ body {
color: var(--bs-list-group-color);
}
- &.active .visited-link {
- color: var(--bs-list-group-active-bg);
- }
-
&.active:visited .visited-link {
color: var(--bs-list-group-active-color);
}
+ &.active .visited-link {
+ color: var(--bs-list-group-active-bg);
+ }
+
+ &[data-activated-role] {
+ background: var(--color-primary-800);
+ color: var(--color-shades-0);
+
+ &:hover, &:focus {
+ background: var(--color-shades-0);
+ color: var(--color-primary-800);
+ }
+
+ .visited-link {
+ color: var(--color-primary-800);
+ }
+
+ &:visited .visited-link {
+ color: var(--color-shades-0);
+ }
+
+ &:hover .visited-link, &:focus .visited-link {
+ color: var(--color-shades-0);
+ }
+
+ &:active .visited-link {
+ color: var(--color-shades-0);
+ }
+
+ &:visited:hover .visited-link, &:visited:focus .visited-link {
+ color: var(--color-primary-800);
+ }
+
+ }
+ }
+ .list-group-horizontal-sm>.list-group-item {
+ &:focus-visible {
+ border-top-right-radius: 6px;
+ border-bottom-left-radius: 6px;
+ }
}
// by default, hide the 10+nth facets