Skip to content

Commit d44693d

Browse files
matt-bernhardtmatt-bernhardt
authored
Merge eb0b535 into 8e489da 
2 parents 8e489da + eb0b535 commit d44693d

File tree

6 files changed

+167
-83
lines changed

6 files changed

+167
-83
lines changed

‎app/assets/stylesheets/partials/_buttons.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@mixin buttonSecondary {
22
border: 1px solid $color-blue-500;
3+
background-color: $color-white;
4+
color: $color-text-primary;
35
border-radius: 0;
46
display: inline-block;
57
padding: 6px 12px;

‎app/assets/stylesheets/partials/_results.scss‎

Lines changed: 113 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// ----------------------------
2+
// Results List
3+
// ----------------------------
4+
15
.top-space {
26
margin-top: 1.2rem;
37
@media (min-width: $bp-screen-md) {
@@ -28,73 +32,77 @@
2832
margin-top: 0;
2933
}
3034
}
35+
}
3136

32-
.results-list {
33-
@media (max-width: $bp-screen-md) {
34-
.result {
35-
padding-left: 0;
36-
padding-right: 0;
37-
margin-left: 3rem;
38-
}
39-
}
40-
}
37+
.results-list {
38+
list-style-type: none;
39+
padding: 0;
4140
}
4241

43-
.result {
44-
padding: 2rem;
45-
border-top: 1px solid $brand-primary;
46-
font-size: $fs-small;
47-
line-height: 0; /* line height needs to be reset so iOS doesn't act weird */
42+
// ----------------------------
43+
// Individual Results
44+
// ----------------------------
4845

49-
&::marker {
50-
font-size: 2.5rem;
51-
font-weight: $fw-bold;
52-
}
46+
li.result {
47+
margin-bottom: 48px;
5348

54-
&:hover,
55-
&:focus {
56-
background-color: $gray-l4;
49+
.eyebrow {
50+
color: $color-text-secondary;
51+
font-size: 1.3rem;
52+
font-weight: $fw-medium;
53+
letter-spacing: 0.05em;
54+
text-transform: uppercase;
5755
}
5856

59-
.result-content {
60-
line-height: 1.2;
57+
.record-title {
58+
font-size: 2.4rem;
59+
line-height: 1.3;
60+
margin-bottom: 8px;
6161

62-
.record-title {
63-
font-size: 2.5rem;
64-
line-height: 1.1;
62+
a {
63+
@include underlinedLinks;
64+
font-weight: $fw-semibold;
6565
}
66+
}
6667

67-
a:visited {
68-
color: $brand-secondary;
68+
.pub-info {
69+
font-size: $fs-base;
70+
color: $color-text-secondary;
71+
span:first-child:after {
72+
content: " • ";
73+
color: $color-text-disabled;
6974
}
75+
margin-bottom: 1em;
76+
}
7077

71-
.pub-info {
72-
font-size: $fs-base;
73-
color: $gray-d1;
74-
span:first-child:after {
75-
content: " | ";
78+
.result-summary {
79+
margin-bottom: 2.4em;
80+
}
81+
82+
.result-highlights {
83+
margin-top: 1.4em;
84+
ul {
85+
list-style: none;
86+
li {
87+
margin-left: 2rem;
7688
}
77-
margin: 1em 0;
7889
}
90+
}
7991

80-
.result-summary {
81-
margin-bottom: 2.4em;
82-
}
92+
.result-highlights.use {
93+
margin-top: 0;
8394

84-
.result-highlights {
85-
margin-top: 1.4em;
86-
ul {
87-
list-style: none;
88-
li {
89-
margin-left: 2rem;
90-
}
95+
ul {
96+
list-style: disc inside;
97+
98+
li {
99+
margin-left: 0.6rem;
91100
}
92101
}
93102
}
94103

95104
.result-get,
96105
.result-record {
97-
padding-top: 5px;
98106
a:visited {
99107
color: $white;
100108
}
@@ -118,10 +126,63 @@
118126
font-size: 1.8rem;
119127
line-height: 1.1;
120128
}
129+
130+
.highlight {
131+
background-color: $color-highlight;
132+
}
133+
134+
&.use, &.primo {
135+
.result-metadata {
136+
margin-bottom: 16px;
137+
}
138+
139+
.pub-info {
140+
margin-bottom: 4px;
141+
}
142+
143+
ul.contributors {
144+
li {
145+
font-weight: $fw-normal;
146+
147+
a {
148+
color: $color-text-secondary;
149+
text-decoration: none;
150+
151+
&:hover {
152+
text-decoration: underline;
153+
}
154+
}
155+
}
156+
}
157+
158+
.inner-heading {
159+
font-size: 1.6rem;
160+
font-family: $base-font; // Since we're using 16px, override to use body font
161+
}
162+
163+
// Make result buttons present as underlined links
164+
a.button {
165+
@include underlinedLinks;
166+
font-weight: $fw-medium;
167+
margin-right: 16px;
168+
}
169+
170+
// Except the first button, which should present as a secondary button
171+
a.button:first-child {
172+
@include buttonSecondary;
173+
}
174+
175+
.truncate-list li:last-child {margin-bottom: 0;}
176+
177+
}
121178
}
122179

123-
/* USE Specific Overrides */
124-
/* Layout of results and sidebar columns */
180+
/* Start USE specific overrides */
181+
182+
// ----------------------------
183+
// Result list and Sidebar
184+
// ----------------------------
185+
125186
#content-wrapper {
126187
padding-top: 12px;
127188
padding-bottom: 44px;
@@ -167,6 +228,7 @@
167228

168229
a {
169230
@include underlinedLinks;
231+
font-weight: $fw-medium;
170232
}
171233
}
172234

@@ -205,7 +267,10 @@
205267

206268
}
207269

208-
/* Callouts below results */
270+
// ----------------------------
271+
// Result callout boxes
272+
// ----------------------------
273+
209274
#callout-wrapper {
210275
display: flex;
211276
gap: 12px;

‎app/assets/stylesheets/partials/_typography.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Mixing for underlined links
22
@mixin underlinedLinks {
33
color: inherit;
4-
font-weight: $fw-medium;
4+
font-weight: inherit;
55
text-decoration: underline;
66
text-decoration-color: $color-blue-500;
77
text-underline-offset: 0.5rem;

‎app/assets/stylesheets/partials/_variables.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ $color-red-400: #FF3333;
2121
$color-red-500: #ff0000;
2222
$color-red-600: #e50000;
2323

24+
// YELLOW
25+
$color-yellow-500: #FFD700;
26+
2427
// CYAN
2528
$color-cyan-500: #00C8FF;
2629
$color-cyan-700: #00A0CC;
@@ -57,6 +60,9 @@ $color-focus-dark: $color-cyan-500;
5760
$color-suggestion-border: $color-purple-700;
5861
$color-suggestion-accent-text: $color-purple-700;
5962

63+
// HIGHLIGHT
64+
$color-highlight: $color-yellow-500;
65+
6066
// ----------------------------
6167
// #TYPOGRAPHY
6268
// ----------------------------

‎app/views/search/_result.html.erb‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
1-
<li class="result">
1+
<li class="result use">
22
<div class="result-content">
3+
<p class="eyebrow">Eyebrow Text</p>
34
<h3 class="record-title">
45
<span class="sr">Title: </span>
56
<%= link_to_result(result) %>
67
</h3>
78

8-
<p class="pub-info">
9-
<span><%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %></span>
10-
<span>
11-
<% result[:dates]&.each do |date| %>
12-
<%= date['value'] if date['kind'] == 'Publication date' %>
13-
<% end %>
14-
</span>
15-
</p>
9+
<div class="result-metadata">
1610

17-
<span class="sr">Contributors: </span>
18-
<ul class="list-inline truncate-list contributors">
19-
<%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %>
20-
</ul>
11+
<p class="pub-info">
12+
<span><%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %></span>
13+
<span>
14+
<% result[:dates]&.each do |date| %>
15+
<%= date['value'] if date['kind'] == 'Publication date' %>
16+
<% end %>
17+
</span>
18+
</p>
2119

22-
<div class="result-highlights">
20+
<% if result[:contributors].present? %>
21+
<span class="sr">Contributors: </span>
22+
<ul class="list-inline truncate-list contributors">
23+
<%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %>
24+
</ul>
25+
<% end %>
26+
</div>
27+
28+
<div class="result-highlights use">
2329
<%= render partial: 'search/highlights', locals: { result: result } %>
2430
</div>
2531

‎app/views/search/_result_primo.html.erb‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<li class="result">
1+
<li class="result primo">
22
<div class="result-content">
3+
<p class="eyebrow">Eyebrow Text</p>
34
<h3 class="record-title">
45
<span class="sr">Title: </span>
56
<% if result[:links]&.find { |link| link['kind'] == 'full record' } %>
@@ -9,30 +10,34 @@
910
<% end %>
1011
</h3>
1112

12-
<p class="pub-info">
13-
<span><%= result[:format] %></span>
14-
<span><%= result[:year] %></span>
15-
</p>
13+
<div class="result-metadata">
1614

17-
<% if result[:creators].present? %>
18-
<span class="sr">Contributors: </span>
19-
<ul class="list-inline truncate-list contributors">
20-
<% result[:creators].each do |creator| %>
21-
<li>
22-
<% if creator[:link] %>
23-
<%= link_to creator[:value], creator[:link] %>
24-
<% else %>
25-
<%= creator[:value] %>
26-
<% end %>
27-
</li>
28-
<% end %>
29-
</ul>
30-
<% end %>
15+
<p class="pub-info">
16+
<span><%= result[:format] %></span>
17+
<span><%= result[:year] %></span>
18+
</p>
19+
20+
<% if result[:creators].present? %>
21+
<span class="sr">Contributors: </span>
22+
<ul class="list-inline truncate-list contributors">
23+
<% result[:creators].each do |creator| %>
24+
<li>
25+
<% if creator[:link] %>
26+
<%= link_to creator[:value], creator[:link] %>
27+
<% else %>
28+
<%= creator[:value] %>
29+
<% end %>
30+
</li>
31+
<% end %>
32+
</ul>
33+
<% end %>
34+
35+
</div>
3136

3237
<div class="result-get">
3338
<% if result[:links].present? %>
3439
<% result[:links].each do |link| %>
35-
<%= link_to link['kind'].titleize, link['url'], class: 'link-button' %>
40+
<%= link_to link['kind'].titleize, link['url'], class: 'button' %>
3641
<% end %>
3742
<% end %>
3843
</div>

0 commit comments

Comments
 (0)