Skip to content

Commit 0bb4e78

Browse files
djanelle-mitdjanelle-mit
authored
Merge pull request #369 from MITLibraries/use-405
USE-405: Adjust pagination, callout boxes, and sidebar for USE
2 parents 0ef2f65 + f89d8fb commit 0bb4e78

6 files changed

Lines changed: 121 additions & 78 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
padding-top: 1em;
77
border-top: 1px solid $color-border-default;
88
gap: 24px;
9+
margin-bottom: 48px;
910

1011
.center-elements {
1112
display: flex;

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

Lines changed: 100 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,7 @@
397397
}
398398

399399
// -----------------------------
400-
// Result list and Sidebar - USE
400+
// Result list - USE
401401
// -----------------------------
402402

403403
#content-wrapper {
@@ -428,77 +428,18 @@
428428
flex-grow: 1;
429429
}
430430

431-
#results-sidebar {
432-
flex: 0 0 360px;
433-
434-
display: flex;
435-
flex-direction: column;
436-
gap: 32px;
437-
438-
> div {
439-
display: flex;
440-
gap: 12px;
441-
442-
i {
443-
font-size: 2rem;
444-
margin-top: 1px;
445-
}
446-
}
447-
448-
@media (max-width: 1140px) {
449-
flex-basis: 280px;
450-
}
451-
452-
p {
453-
line-height: 1.4;
454-
}
455-
456-
a {
457-
@include underlinedLinks;
458-
font-weight: $fw-medium;
459-
}
460-
}
461-
462431
// Put the sidebar below the results when the screen is narrower than 1024px
463432
@media (max-width: $bp-screen-lg) {
464433
flex-direction: column;
465-
gap: 32px;
466-
467-
// Put the sidebar items side by side when space is available
468-
#results-sidebar {
469-
flex-direction: row;
470-
padding-bottom: 40px;
471-
gap: 12px;
472-
flex-basis: auto;
473-
474-
> div {
475-
padding-right: 24px;
476-
}
477-
}
478-
479-
#callout-wrapper {
480-
margin-bottom: 0;
481-
}
482-
}
483-
484-
// Put sidebar items in a column below 768px
485-
@media (max-width: $bp-screen-md) {
486-
487-
#results-sidebar {
488-
flex-direction: column;
489-
gap: 32px;
490-
}
491-
434+
gap: 0px;
492435
}
493-
}
494-
495436
}
496437

497438
// ----------------------------
498439
// Result callout boxes
499440
// ----------------------------
500441

501-
#callout-wrapper {
442+
.callout-wrapper {
502443
display: flex;
503444
gap: 12px;
504445
margin-bottom: 32px;
@@ -514,6 +455,7 @@
514455
i {
515456
font-size: 2rem;
516457
margin-top: 1px;
458+
flex: 0 0 20px;
517459
}
518460

519461
p {
@@ -529,3 +471,99 @@
529471
flex-direction: column;
530472
}
531473
}
474+
475+
// Callout box responsive behavior
476+
// SIDEBAR COLLAPSES BELOW RESULTS
477+
@media (max-width: $bp-screen-lg) {
478+
// Hide the bordered callouts
479+
#results > .callout-wrapper {
480+
display: none;
481+
}
482+
}
483+
484+
485+
// -----------------------------
486+
// Result sidebar
487+
// -----------------------------
488+
489+
#results-layout-wrapper #results-sidebar {
490+
flex: 0 0 360px;
491+
492+
display: flex;
493+
flex-direction: column;
494+
gap: 32px;
495+
496+
.core-sidebar-items {
497+
display: flex;
498+
flex-direction: column;
499+
gap: 32px;
500+
501+
> div {
502+
display: flex;
503+
gap: 12px;
504+
505+
i {
506+
font-size: 2rem;
507+
margin-top: 1px;
508+
flex: 0 0 20px;
509+
}
510+
}
511+
}
512+
513+
@media (max-width: 1140px) {
514+
flex-basis: 280px;
515+
}
516+
517+
p {
518+
line-height: 1.4;
519+
}
520+
521+
a {
522+
@include underlinedLinks;
523+
font-weight: $fw-medium;
524+
}
525+
526+
// Override some of the styling of the callout boxes when they're in the sidebar.
527+
.callout-wrapper {
528+
aside {
529+
border: none;
530+
padding: 0;
531+
532+
a {
533+
text-decoration: none;
534+
}
535+
}
536+
537+
flex-direction: column;
538+
gap: 32px;
539+
border-bottom: 1px solid $color-border-default;
540+
padding-bottom: 32px;
541+
margin-bottom: 0;
542+
}
543+
544+
// Re-layout the sidebar contents when below results on smaller screens
545+
@media (max-width: $bp-screen-lg) {
546+
547+
flex-direction: column;
548+
549+
.callout-wrapper {
550+
flex-direction: row;
551+
}
552+
553+
.core-sidebar-items {
554+
flex-direction: row;
555+
}
556+
557+
}
558+
559+
@media (max-width: $bp-screen-sm2) {
560+
.callout-wrapper {
561+
flex-direction: column;
562+
}
563+
564+
.core-sidebar-items {
565+
flex-direction: column;
566+
}
567+
}
568+
}
569+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ $container-max-width: 1280px;
116116

117117
// Additional breakpoints over mitlib-style
118118
$bp-screen-xs: 410px;
119+
$bp-screen-sm2: 640px;
119120

120121
// Left/Right Edge Padding
121122
$edge-padding-desktop: 32px;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div id="callout-wrapper">
1+
<div class="callout-wrapper">
22
<% if ['cdi', 'alma', 'all'].include?(@active_tab) %>
33
<%= render partial: "results_callout_component", locals: {
44
fa_name: 'magnifying-glass',

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

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<aside id="results-sidebar">
2-
<div>
3-
<i class="fa-light fa-message"></i>
2+
<%= render partial: "results_callouts" %>
3+
<div class="core-sidebar-items">
44
<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="https://libraries.mit.edu/use-feedback">Send feedback</a>
5+
<i class="fa-light fa-message"></i>
6+
<div>
7+
<h4>Were these results useful?</h4>
8+
<p>Your feedback can help shape the quality and relevance of our search results.</p>
9+
<a href="https://libraries.mit.edu/use-feedback">Send feedback</a>
10+
</div>
811
</div>
9-
</div>
10-
<div>
11-
<i class="fa-light fa-user"></i>
1212
<div>
13-
<h4>Need help?</h4>
14-
<p>Via chat, email, or consultations, we'll help you find and access what you need.</p>
15-
<a href="https://libraries.mit.edu/ask/">Ask us</a>
13+
<i class="fa-light fa-user"></i>
14+
<div>
15+
<h4>Need help?</h4>
16+
<p>Via chat, email, or consultations, we'll help you find and access what you need.</p>
17+
<a href="https://libraries.mit.edu/ask/">Ask us</a>
18+
</div>
1619
</div>
1720
</div>
18-
</aside>
21+
</aside>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<%= content_for(:title, results_page_title(@enhanced_query)) %>
22

33
<% content_for :additional_meta_tag do %>
4-
<meta name="robots" content="noindex, nofollow" />
4+
<meta name="robots" content="noindex, nofollow">
55
<% end %>
66

77
<div id="content-wrapper" class="space-wrap">
@@ -31,13 +31,13 @@
3131
<% end %>
3232
<% end %>
3333
</ol>
34+
<%= render partial: "pagination" %>
3435
<%# Note `results_callouts` is also displayed in no errors condition below %>
3536
<%= render partial: "results_callouts" %>
3637
</main>
3738
<%= render partial: "results_sidebar" %>
3839
</div>
39-
<%= render partial: "pagination" %>
40-
40+
4141
<% elsif @errors.blank? %>
4242

4343
<div id="results-layout-wrapper">

0 commit comments

Comments
 (0)