Skip to content

Commit 7078807

Browse files
carylwyattcarylwyatt
committed
Merge branch 'main' into deployment
2 parents 0e55121 + 10f7ade commit 7078807

File tree

4 files changed

+161
-35
lines changed

4 files changed

+161
-35
lines changed

‎src/js/designs/ResultsItem/ResultsItem.stories.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ const parameters = {
2121

2222
export const FullView = {
2323
parameters: parameters,
24+
args: {
25+
visited: false,
26+
}
2427
};
2528
export const MultipleItems = {
2629
parameters: parameters,
@@ -33,11 +36,20 @@ export const SearchOnly = {
3336
parameters: parameters,
3437
args: {
3538
access: 'limited-search-only',
39+
visited: false,
40+
},
41+
};
42+
export const RegisteredAccess = {
43+
parameters: parameters,
44+
args: {
45+
access: 'registered-access',
46+
visited: false,
3647
},
3748
};
3849
export const AccessPermitted = {
3950
parameters: parameters,
4051
args: {
4152
access: 'limited-access-permitted',
53+
visited: false,
4254
},
4355
};

‎src/js/designs/ResultsItem/index.svelte‎

Lines changed: 85 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
export let publicationDate = 1827;
88
export let author = 'Nicolas, Nicholas Harris, Sir, 1799-1848.';
99
export let supportsSelection = true;
10+
export let visited = false;
1011
1112
let coverUrl = `https://babel.hathitrust.org/cgi/imgsrv/cover?id=${htid}&width=250`;
1213
let blankImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=`;
@@ -43,7 +44,10 @@
4344
<a
4445
class="list-group-item list-group-item-action w-sm-50"
4546
href="http://catalog.hathitrust.org/Record/{catalogId}"
46-
><i class="fa-solid fa-circle-info" aria-hidden="true" /> <span>Catalog Record</span></a
47+
><i class="fa-solid fa-circle-info" aria-hidden="true" /> <span>Catalog Record</span>{#if visited}<i
48+
aria-hidden="true"
49+
class="visited-link fa-solid fa-check-double"
50+
></i>{/if}</a
4751
>
4852
{#if access == 'multiple-items'}
4953
<a
@@ -54,20 +58,39 @@
5458
<!-- <span class="list-group-item w-sm-50 border-0 bg-transparent fs-7">Use the Catalog Record to view multiple volumes</span> -->
5559
{:else if access == 'limited-search-only'}
5660
<a class="list-group-item list-group-item-action w-sm-50" href="https://babel.hathitrust.org/cgi/pt?id={htid}"
57-
><i aria-hidden="true" class="fa-solid fa-lock" /> <span>Limited (search-only)</span></a
61+
><i aria-hidden="true" class="fa-solid fa-lock" /> <span>Limited (search-only)</span>{#if visited}<i
62+
aria-hidden="true"
63+
class="visited-link fa-solid fa-check-double"
64+
></i>{/if}</a
65+
>
66+
{:else if access == 'registered-access'}
67+
<a
68+
data-activated-role="superuser"
69+
class="list-group-item list-group-item-action w-sm-50"
70+
href="https://babel.hathitrust.org/cgi/pt?id={htid}"
71+
><i aria-hidden="true" class="fa-solid fa-lock-open" /> <span>Registered Access</span>{#if visited}<i
72+
aria-hidden="true"
73+
class="visited-link fa-solid fa-check-double"
74+
></i>{/if}</a
5875
>
5976
{:else if access == 'limited-access-permitted'}
6077
<a
61-
data-access-role="superuser"
78+
data-activated-role="superuser"
6279
class="list-group-item list-group-item-action w-sm-50"
6380
href="https://babel.hathitrust.org/cgi/pt?id={htid}"
64-
><i aria-hidden="true" class="fa-solid fa-unlock-keyhole" /> <span>Limited (access permitted)</span></a
81+
><i aria-hidden="true" class="fa-solid fa-unlock" /> <span>Limited (access permitted)</span>{#if visited}<i
82+
aria-hidden="true"
83+
class="visited-link fa-solid fa-check-double"
84+
></i>{/if}</a
6585
>
6686
{:else}
6787
<a
6888
class="list-group-item list-group-item-action active active w-sm-50"
6989
href="https://babel.hathitrust.org/cgi/pt?id={htid}"
70-
><i class="fa-regular fa-file-lines" aria-hidden="true" /> <span>Full View</span></a
90+
><i class="fa-regular fa-file-lines" aria-hidden="true" /> <span>Full View</span>{#if visited}<i
91+
aria-hidden="true"
92+
class="visited-link fa-solid fa-check-double"
93+
></i>{/if}</a
7194
>
7295
{/if}
7396
</div>
@@ -106,23 +129,67 @@
106129
text-decoration: none;
107130
}
108131
109-
a[data-access-role] {
110-
background: #924a0b;
111-
// border-radius: 4px;
112-
color: white;
132+
.list-group {
133+
a {
134+
white-space: nowrap;
113135
114-
&:hover {
115-
background: white;
116-
color: #924a0b;
136+
&:has(+ span) {
137+
border-top-right-radius: var(--bs-list-group-border-radius) !important;
138+
border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
139+
}
140+
.visited-link {
141+
color: var(--bs-list-group-color);
142+
margin-left: auto;
143+
}
144+
&:hover .visited-link,
145+
&:focus .visited-link {
146+
color: var(--bs-list-group-action-hover-color);
147+
}
148+
149+
&:active .visited-link {
150+
color: var(--bs-list-group-action-active-bg);
151+
}
152+
153+
.visited-link {
154+
color: var(--bs-list-group-color);
155+
}
156+
157+
// &.active .visited-link {
158+
// color: var(--bs-list-group-active-bg);
159+
// }
160+
161+
&.active .visited-link {
162+
color: var(--bs-list-group-active-color);
163+
}
164+
}
165+
.list-group-item {
166+
display: flex;
167+
align-items: center;
168+
gap: 0.5rem;
117169
}
118170
}
171+
a[data-activated-role] {
172+
background: var(--color-primary-800);
173+
color: white;
119174
120-
.list-group a {
121-
white-space: nowrap;
122-
123-
&:has(+ span) {
124-
border-top-right-radius: var(--bs-list-group-border-radius) !important;
125-
border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
175+
&:hover,
176+
&:focus {
177+
background: white;
178+
color: var(--color-primary-800);
179+
}
180+
.visited-link {
181+
color: var(--color-shades-0);
182+
}
183+
&:hover .visited-link,
184+
&:focus .visited-link {
185+
color: var(--color-primary-800);
186+
}
187+
&:active {
188+
background-color: var(--color-primary-900);
189+
color: var(--color-shades-0);
190+
}
191+
&:active .visited-link {
192+
color: var(--color-shades-0);
126193
}
127194
}
128195
</style>

‎src/js/designs/ResultsList/index.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,14 @@
2020
publicationDate: 1979,
2121
access: 'limited-search-only',
2222
},
23+
{
24+
htid: 'coo.31924057934600',
25+
catalogId: '000552872',
26+
title: 'Contributions from the Dominion Observatory, Ottawa, Ontario v.6:6',
27+
author: 'Dominion Observatory (Canada)',
28+
publicationDate: 1979,
29+
access: 'registered-access',
30+
},
2331
{
2432
htid: 'hvd.32044019639822',
2533
catalogId: '009720544',

‎src/scss/apps.scss‎

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -180,37 +180,40 @@ body {
180180
text-decoration: none;
181181
}
182182

183-
a[data-access-role] {
184-
background: #924a0b;
185-
// border-radius: 4px;
186-
color: white;
187-
188-
&:hover {
189-
background: white;
190-
color: #924a0b;
191-
}
192-
}
193-
194183
.list-group a {
195184
white-space: nowrap;
196185
display: inline-flex;
197186
align-items: center;
198187
gap: 0.5rem;
199188

189+
font-size: 1rem;
190+
font-weight: 500;
191+
line-height: 1.3125rem;
192+
letter-spacing: -0.01rem;
193+
200194
&:has(+ span) {
201195
border-top-right-radius: var(--bs-list-group-border-radius) !important;
202196
border-bottom-right-radius: var(--bs-list-group-border-radius) !important;
197+
203198
}
204199

200+
// label colors
201+
--bs-list-group-color: var(--color-neutral-900);
202+
--bs-list-group-bg: var(--color-shades-0);
203+
--bs-list-group-active-color: var(--color-shades-0);
204+
--bs-list-group-active-bg: var(--color-primary-600);
205+
--bs-list-group-action-active-color: var(--color-neutral-900);
206+
--bs-list-group-action-active-bg: var(--color-neutral-100);
207+
205208
.visited-link {
206209
color: var(--bs-list-group-bg);
207210
margin-left: auto;
208211
}
209212

210-
&:hover .visited-link,&:focus .visited-link {
213+
&:hover .visited-link, &:focus .visited-link {
211214
color: var(--bs-list-group-action-hover-bg);
212215
}
213-
216+
214217
&:active .visited-link {
215218
color: var(--bs-list-group-action-active-bg);
216219
}
@@ -219,14 +222,50 @@ body {
219222
color: var(--bs-list-group-color);
220223
}
221224

222-
&.active .visited-link {
223-
color: var(--bs-list-group-active-bg);
224-
}
225-
226225
&.active:visited .visited-link {
227226
color: var(--bs-list-group-active-color);
228227
}
229228

229+
&.active .visited-link {
230+
color: var(--bs-list-group-active-bg);
231+
}
232+
233+
&[data-activated-role] {
234+
background: var(--color-primary-800);
235+
color: var(--color-shades-0);
236+
237+
&:hover, &:focus {
238+
background: var(--color-shades-0);
239+
color: var(--color-primary-800);
240+
}
241+
242+
.visited-link {
243+
color: var(--color-primary-800);
244+
}
245+
246+
&:visited .visited-link {
247+
color: var(--color-shades-0);
248+
}
249+
250+
&:hover .visited-link, &:focus .visited-link {
251+
color: var(--color-shades-0);
252+
}
253+
254+
&:active .visited-link {
255+
color: var(--color-shades-0);
256+
}
257+
258+
&:visited:hover .visited-link, &:visited:focus .visited-link {
259+
color: var(--color-primary-800);
260+
}
261+
262+
}
263+
}
264+
.list-group-horizontal-sm>.list-group-item {
265+
&:focus-visible {
266+
border-top-right-radius: 6px;
267+
border-bottom-left-radius: 6px;
268+
}
230269
}
231270

232271
// by default, hide the 10+nth facets

0 commit comments

Comments
 (0)