Skip to content

Commit 42b3cac

Browse files
JPrevostdjanelle-mit
JPrevost
and
djanelle-mit
committed
Styling results list
https: //mitlibraries.atlassian.net/browse/USE-161 Co-Authored-By: djanelle-mit <[email protected]>
1 parent 8e489da commit 42b3cac

File tree

7 files changed

+187
-40
lines changed

7 files changed

+187
-40
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: 132 additions & 4 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) {
@@ -37,9 +41,18 @@
3741
margin-left: 3rem;
3842
}
3943
}
40-
}
44+
}
45+
}
46+
47+
.results-list.use {
48+
list-style-type: none;
49+
padding: 0;
4150
}
4251

52+
// --------------------------------------
53+
// Individual Results for GeoData & USE
54+
// --------------------------------------
55+
4356
.result {
4457
padding: 2rem;
4558
border-top: 1px solid $brand-primary;
@@ -120,8 +133,119 @@
120133
}
121134
}
122135

123-
/* USE Specific Overrides */
124-
/* Layout of results and sidebar columns */
136+
// --------------------------------------
137+
// Individual Results overrides for USE
138+
// --------------------------------------
139+
140+
.result.use, .result.primo {
141+
margin-bottom: 48px;
142+
padding: 0;
143+
border-top: none;
144+
145+
&:hover,
146+
&:focus {
147+
background-color: transparent;
148+
}
149+
150+
.eyebrow {
151+
color: $color-text-secondary;
152+
font-size: 1.3rem;
153+
font-weight: $fw-medium;
154+
letter-spacing: 0.05em;
155+
text-transform: uppercase;
156+
}
157+
158+
.record-title {
159+
font-size: 2.4rem;
160+
line-height: 1.3;
161+
margin-bottom: 8px;
162+
163+
a {
164+
@include underlinedLinks;
165+
font-weight: $fw-semibold;
166+
}
167+
}
168+
169+
.pub-info {
170+
font-size: $fs-base;
171+
color: $color-text-secondary;
172+
span:first-child:after {
173+
content: " • ";
174+
color: $color-text-disabled;
175+
}
176+
margin-bottom: 1em;
177+
margin-top: 0;
178+
}
179+
180+
.result-highlights.use {
181+
margin-top: 0;
182+
183+
ul {
184+
list-style: disc outside;
185+
padding-left: 16px;
186+
187+
li {
188+
margin-left: 0.6rem;
189+
font-size: 1.6rem;
190+
}
191+
}
192+
}
193+
194+
.highlight {
195+
background-color: $color-highlight;
196+
}
197+
198+
&.use, &.primo {
199+
.result-metadata {
200+
margin-bottom: 16px;
201+
}
202+
203+
.pub-info {
204+
margin-bottom: 4px;
205+
}
206+
207+
ul.contributors {
208+
li {
209+
font-weight: $fw-normal;
210+
211+
a {
212+
color: $color-text-secondary;
213+
text-decoration: none;
214+
215+
&:hover {
216+
text-decoration: underline;
217+
}
218+
}
219+
}
220+
}
221+
222+
.inner-heading {
223+
font-size: 1.6rem;
224+
font-family: $base-font; // Since we're using 16px, override to use body font
225+
}
226+
227+
// Make result buttons present as underlined links
228+
a.button {
229+
@include underlinedLinks;
230+
font-weight: $fw-medium;
231+
font-size: 1.6rem;
232+
margin-right: 16px;
233+
}
234+
235+
// Except the first button, which should present as a secondary button
236+
a.button:first-child {
237+
@include buttonSecondary;
238+
}
239+
240+
.truncate-list li:last-child {margin-bottom: 0;}
241+
242+
}
243+
}
244+
245+
// -----------------------------
246+
// Result list and Sidebar - USE
247+
// -----------------------------
248+
125249
#content-wrapper {
126250
padding-top: 12px;
127251
padding-bottom: 44px;
@@ -167,6 +291,7 @@
167291

168292
a {
169293
@include underlinedLinks;
294+
font-weight: $fw-medium;
170295
}
171296
}
172297

@@ -205,7 +330,10 @@
205330

206331
}
207332

208-
/* Callouts below results */
333+
// ----------------------------
334+
// Result callout boxes
335+
// ----------------------------
336+
209337
#callout-wrapper {
210338
display: flex;
211339
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>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<p class="results-context-description">From all MIT Libraries sources</p>
2323
<div id="results-layout-wrapper">
2424
<main id="results">
25-
<ol class="results-list" start="<%= @pagination[:start] %>">
25+
<ol class="results-list use" start="<%= @pagination[:start] %>">
2626
<% @results.each do |result| %>
2727
<% if result[:api] == 'primo' %>
2828
<%= render(partial: 'search/result_primo', locals: { result: result }) %>

0 commit comments

Comments
 (0)