Skip to content

Commit 77970ca

Browse files
djanelle-mitdjanelle-mit
authored
Merge pull request #276 from MITLibraries/use-61-results-chrome
USE-61: Implement page chrome around the results list
2 parents cef6b49 + 7f462e0 commit 77970ca

File tree

10 files changed

+263
-64
lines changed

10 files changed

+263
-64
lines changed

‎app/assets/stylesheets/application.css.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44

55
@import "libraries-main";
66
@import "partials/_variables";
7+
@import "partials/_typography";
78
@import "partials/_alerts";
9+
@import "partials/_buttons";
810
@import "partials/_effects";
911
@import "partials/_filters";
1012
@import "partials/_global_alerts";
@@ -19,5 +21,4 @@
1921
@import "partials/_shared";
2022
@import "partials/_results";
2123
@import "partials/_loading_spinner";
22-
@import "partials/_typography";
23-
@import "partials/_suggestion-panel";
24+
@import "partials/_suggestion-panel";

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@mixin buttonSecondary {
2+
border: 1px solid $color-blue-500;
3+
border-radius: 0;
4+
display: inline-block;
5+
padding: 6px 12px;
6+
text-decoration: none;
7+
font-size: 1.6rem;
8+
font-weight: $fw-medium;
9+
10+
&:hover {
11+
background-color: $color-blue-25;
12+
}
13+
}

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

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,54 @@
33
display: flex;
44
flex-flow: row nowrap;
55
justify-content: center;
6-
margin-top: 3em;
6+
padding-top: 1em;
7+
border-top: 1px solid $color-border-default;
8+
gap: 24px;
79

8-
.first {
9-
border-right: 1px solid black;
10-
margin-right: 0.5em;
11-
padding-right: 0.5em;
10+
.center-elements {
11+
display: flex;
12+
flex-grow: 1;
13+
gap: 24px;
14+
justify-content: center;
1215
}
1316

14-
.previous {
15-
border-right: 1px solid black;
16-
margin-right: 0.5em;
17-
padding-right: 0.5em;
17+
span {
18+
display: inline-block;
19+
padding: 6px 12px;
20+
border: 1px solid $color-border-default;
21+
color: $color-text-disabled;
1822
}
1923

20-
.next {
21-
border-left: 1px solid black;
22-
margin-left: 0.5em;
23-
padding-left: 0.5em;
24+
div.current span {
25+
border: none;
26+
padding: 6px 0;
27+
color: $color-text-primary;
2428
}
25-
}
29+
30+
a {
31+
@include buttonSecondary;
32+
}
33+
34+
.first a, .first span {
35+
border: none;
36+
text-decoration: underline;
37+
text-decoration-color: $color-blue-500;
38+
text-underline-offset: 0.5rem;
39+
padding: 6px 0;
40+
41+
&:hover {
42+
background-color: $color-white;
43+
}
44+
}
45+
46+
.first span {
47+
text-decoration-color: $color-border-default;
48+
}
49+
50+
// Hide the first link and count on smaller screens
51+
@media (max-width: $bp-screen-md) {
52+
justify-content: space-between;
53+
54+
.center-elements {display: none;}
55+
}
56+
}

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

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,10 @@
121121
}
122122

123123
/* USE Specific Overrides */
124+
/* Layout of results and sidebar columns */
124125
#content-wrapper {
125126
padding-top: 12px;
127+
padding-bottom: 44px;
126128

127129
.results-context {
128130
padding-left: 0;
@@ -135,8 +137,94 @@
135137
margin-bottom: 32px;
136138
}
137139

138-
#results {
140+
#results-section {
139141
padding: 16px 0 0 0;
140142
}
141143

144+
#results-layout-wrapper {
145+
display: flex;
146+
gap: 64px;
147+
148+
#results {
149+
padding: 0;
150+
flex-grow: 1;
151+
}
152+
153+
#results-sidebar {
154+
flex: 0 0 360px;
155+
156+
display: flex;
157+
flex-direction: column;
158+
gap: 32px;
159+
160+
@media (max-width: 1140px) {
161+
flex-basis: 280px;
162+
}
163+
164+
p {
165+
line-height: 1.4;
166+
}
167+
168+
a {
169+
@include underlinedLinks;
170+
}
171+
}
172+
173+
// Put the sidebar below the results when the screen is narrower than 1024px
174+
@media (max-width: $bp-screen-lg) {
175+
flex-direction: column;
176+
gap: 32px;
177+
178+
// Put the sidebar items side by side when space is available
179+
#results-sidebar {
180+
flex-direction: row;
181+
padding-bottom: 40px;
182+
gap: 12px;
183+
flex-basis: auto;
184+
185+
> div {
186+
padding-right: 24px;
187+
}
188+
}
189+
190+
#callout-wrapper {
191+
margin-bottom: 0;
192+
}
193+
}
194+
195+
// Put sidebar items in a column below 768px
196+
@media (max-width: $bp-screen-md) {
197+
198+
#results-sidebar {
199+
flex-direction: column;
200+
gap: 32px;
201+
}
202+
203+
}
204+
}
205+
206+
}
207+
208+
/* Callouts below results */
209+
#callout-wrapper {
210+
display: flex;
211+
gap: 12px;
212+
margin-bottom: 32px;
213+
214+
aside {
215+
border: 3px solid $color-border-default;
216+
padding: 20px 24px;
217+
218+
p {
219+
line-height: 1.4;
220+
}
221+
222+
a {
223+
@include buttonSecondary;
224+
}
225+
}
226+
227+
@media (max-width: $bp-screen-md) {
228+
flex-direction: column;
229+
}
142230
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
// Mixing for underlined links
2+
@mixin underlinedLinks {
3+
color: inherit;
4+
font-weight: $fw-medium;
5+
text-decoration: underline;
6+
text-decoration-color: $color-blue-500;
7+
text-underline-offset: 0.5rem;
8+
9+
&:hover {
10+
color: $color-blue-500;
11+
}
12+
}
13+
114
// Override fonts from the theme gem, done temporarily for USE UI
215
body {
316
font-family: $base-font;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ $color-cyan-500: #00C8FF;
2626
$color-cyan-700: #00A0CC;
2727

2828
// BLUE
29+
$color-blue-25: #F0F0FF;
2930
$color-blue-500: #0000FF;
3031

3132
// PURPLE
@@ -45,6 +46,9 @@ $color-text-placeholder: $color-gray-500;
4546
$color-text-disabled: $color-gray-400;
4647
$color-text-oncolor: $color-white;
4748

49+
// BORDERS
50+
$color-border-default: $color-gray-400;
51+
4852
// FOCUS
4953
$color-focus: $color-cyan-700;
5054
$color-focus-dark: $color-cyan-500;

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<% return if @pagination.nil? %>
2-
3-
<nav class="pagination-container" aria-label="Pagination">
4-
<div class="first">
5-
<%= first_url(@enhanced_query) %>
6-
</div>
7-
<div class="previous">
8-
<%= prev_url(@enhanced_query) %>
9-
</div>
10-
<div class="current"><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></div>
11-
<div class="next">
12-
<%= next_url(@enhanced_query) %>
13-
</div>
14-
</nav>
2+
<div id="pagination">
3+
<nav class="pagination-container" aria-label="Pagination">
4+
<div class="previous">
5+
<%= prev_url(@enhanced_query) %>
6+
</div>
7+
<div class="center-elements">
8+
<div class="first">
9+
<%= first_url(@enhanced_query) %>
10+
</div>
11+
<div class="current"><span><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></span></div>
12+
</div>
13+
<div class="next">
14+
<%= next_url(@enhanced_query) %>
15+
</div>
16+
</nav>
17+
</div>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div id="callout-wrapper">
2+
<aside class="result-callout">
3+
<i></i>
4+
<div>
5+
<h4>Refine your search</h4>
6+
<p>Use advanced search features to expand or filter your search.</p>
7+
<a href="#">Search Primo</a>
8+
</div>
9+
</aside>
10+
<aside class="result-callout">
11+
<i></i>
12+
<div>
13+
<h4>Can’t find a book?</h4>
14+
<p>If we don’t own it you can often request it from another library.</p>
15+
<a href="#">Search WorldCat</a>
16+
</div>
17+
</aside>
18+
</div>

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<aside id="results-sidebar">
2+
<div>
3+
<i></i>
4+
<div>
5+
<h4>Were these results useful?</h4>
6+
<p>Your feedback can help shape the quality and relevance of our search results.</p>
7+
<a href="#">Send feedback</a>
8+
</div>
9+
</div>
10+
<div>
11+
<i></i>
12+
<div>
13+
<h4>Get help from expert librarians</h4>
14+
<p>From thesis research to course reserves, we can help you find what you need.</p>
15+
<a href="#">Ask us</a>
16+
</div>
17+
</div>
18+
</aside>

0 commit comments

Comments
 (0)