Skip to content

USE-61: Implement page chrome around the results list #276

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Nov 17, 2025
Merged

USE-61: Implement page chrome around the results list #276

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
357f929
Restructuring of results markup and partials for sidebar and callouts
djanelle-mit Nov 14, 2025
c90fb64
Styled pagination and moved inside results container
djanelle-mit Nov 14, 2025
8e562be
Tweak spacing around page title now that it's above results container
djanelle-mit Nov 14, 2025
6ce0144
Finished styling sidebar and updated layout to be responsive
djanelle-mit Nov 14, 2025
eeb2775
Spacing to bottom of content area
djanelle-mit Nov 14, 2025
dc82063
Basic layout for callout boxes
djanelle-mit Nov 14, 2025
b2dd54a
Extracted button into mixin and applied in callouts and pagination
djanelle-mit Nov 14, 2025
27fed12
Updated responsive behavior for pagination
djanelle-mit Nov 17, 2025
ddd2743
Break pagination out of results container
djanelle-mit Nov 17, 2025
14e05d2
Tweaking spacing on narrower screens for bottom elements
djanelle-mit Nov 17, 2025
1a74417
Added main back and hid sidebar when in no results conditional
djanelle-mit Nov 17, 2025
c4b3b04
Fixed tabs using 4 spaces instead of 2
djanelle-mit Nov 17, 2025
7f462e0
Reorganized markup of the results view to be easier to understand
djanelle-mit Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions app/assets/stylesheets/application.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@

@import "libraries-main";
@import "partials/_variables";
@import "partials/_typography";
@import "partials/_alerts";
@import "partials/_buttons";
@import "partials/_effects";
@import "partials/_filters";
@import "partials/_global_alerts";
Expand All @@ -19,5 +21,4 @@
@import "partials/_shared";
@import "partials/_results";
@import "partials/_loading_spinner";
@import "partials/_typography";
@import "partials/_suggestion-panel";
@import "partials/_suggestion-panel";
13 changes: 13 additions & 0 deletions app/assets/stylesheets/partials/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
@mixin buttonSecondary {
border: 1px solid $color-blue-500;
border-radius: 0;
display: inline-block;
padding: 6px 12px;
text-decoration: none;
font-size: 1.6rem;
font-weight: $fw-medium;

&:hover {
background-color: $color-blue-25;
}
}
59 changes: 45 additions & 14 deletions app/assets/stylesheets/partials/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,54 @@
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin-top: 3em;
padding-top: 1em;
border-top: 1px solid $color-border-default;
gap: 24px;

.first {
border-right: 1px solid black;
margin-right: 0.5em;
padding-right: 0.5em;
.center-elements {
display: flex;
flex-grow: 1;
gap: 24px;
justify-content: center;
}

.previous {
border-right: 1px solid black;
margin-right: 0.5em;
padding-right: 0.5em;
span {
display: inline-block;
padding: 6px 12px;
border: 1px solid $color-border-default;
color: $color-text-disabled;
}

.next {
border-left: 1px solid black;
margin-left: 0.5em;
padding-left: 0.5em;
div.current span {
border: none;
padding: 6px 0;
color: $color-text-primary;
}
}

a {
@include buttonSecondary;
}

.first a, .first span {
border: none;
text-decoration: underline;
text-decoration-color: $color-blue-500;
text-underline-offset: 0.5rem;
padding: 6px 0;

&:hover {
background-color: $color-white;
}
}

.first span {
text-decoration-color: $color-border-default;
}

// Hide the first link and count on smaller screens
@media (max-width: $bp-screen-md) {
justify-content: space-between;

.center-elements {display: none;}
}
}
90 changes: 89 additions & 1 deletion app/assets/stylesheets/partials/_results.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,10 @@
}

/* USE Specific Overrides */
/* Layout of results and sidebar columns */
#content-wrapper {
padding-top: 12px;
padding-bottom: 44px;

.results-context {
padding-left: 0;
Expand All @@ -135,8 +137,94 @@
margin-bottom: 32px;
}

#results {
#results-section {
padding: 16px 0 0 0;
}

#results-layout-wrapper {
display: flex;
gap: 64px;

#results {
padding: 0;
flex-grow: 1;
}

#results-sidebar {
flex: 0 0 360px;

display: flex;
flex-direction: column;
gap: 32px;

@media (max-width: 1140px) {
flex-basis: 280px;
}

p {
line-height: 1.4;
}

a {
@include underlinedLinks;
}
}

// Put the sidebar below the results when the screen is narrower than 1024px
@media (max-width: $bp-screen-lg) {
flex-direction: column;
gap: 32px;

// Put the sidebar items side by side when space is available
#results-sidebar {
flex-direction: row;
padding-bottom: 40px;
gap: 12px;
flex-basis: auto;

> div {
padding-right: 24px;
}
}

#callout-wrapper {
margin-bottom: 0;
}
}

// Put sidebar items in a column below 768px
@media (max-width: $bp-screen-md) {

#results-sidebar {
flex-direction: column;
gap: 32px;
}

}
}

}

/* Callouts below results */
#callout-wrapper {
display: flex;
gap: 12px;
margin-bottom: 32px;

aside {
border: 3px solid $color-border-default;
padding: 20px 24px;

p {
line-height: 1.4;
}

a {
@include buttonSecondary;
}
}

@media (max-width: $bp-screen-md) {
flex-direction: column;
}
}
13 changes: 13 additions & 0 deletions app/assets/stylesheets/partials/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
// Mixing for underlined links
@mixin underlinedLinks {
color: inherit;
font-weight: $fw-medium;
text-decoration: underline;
text-decoration-color: $color-blue-500;
text-underline-offset: 0.5rem;

&:hover {
color: $color-blue-500;
}
}

// Override fonts from the theme gem, done temporarily for USE UI
body {
font-family: $base-font;
Expand Down
4 changes: 4 additions & 0 deletions app/assets/stylesheets/partials/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ $color-cyan-500: #00C8FF;
$color-cyan-700: #00A0CC;

// BLUE
$color-blue-25: #F0F0FF;
$color-blue-500: #0000FF;

// PURPLE
Expand All @@ -45,6 +46,9 @@ $color-text-placeholder: $color-gray-500;
$color-text-disabled: $color-gray-400;
$color-text-oncolor: $color-white;

// BORDERS
$color-border-default: $color-gray-400;

// FOCUS
$color-focus: $color-cyan-700;
$color-focus-dark: $color-cyan-500;
Expand Down
29 changes: 16 additions & 13 deletions app/views/search/_pagination.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<% return if @pagination.nil? %>

<nav class="pagination-container" aria-label="Pagination">
<div class="first">
<%= first_url(@enhanced_query) %>
</div>
<div class="previous">
<%= prev_url(@enhanced_query) %>
</div>
<div class="current"><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></div>
<div class="next">
<%= next_url(@enhanced_query) %>
</div>
</nav>
<div id="pagination">
Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: On wide screens it feels a bit odd to have the pagination not align with the results and instead align with the fill width content that includes the right side callouts. Since the right side callouts are often not-visible at the same time as the pagination it looks uneven when the intent seems to be to justified pagination.

Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just caught up on Slack and you noted there that this is known.

Copy link
Contributor Author

@djanelle-mit djanelle-mit Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This irks me, but I think it's a practical starting point for the short term until we have the stepped pagination ("Show X more")

<nav class="pagination-container" aria-label="Pagination">
<div class="previous">
<%= prev_url(@enhanced_query) %>
</div>
<div class="center-elements">
<div class="first">
<%= first_url(@enhanced_query) %>
</div>
<div class="current"><span><%= @pagination[:start] %> - <%= @pagination[:end] %> of <%= number_with_delimiter(@pagination[:hits]) %></span></div>
</div>
<div class="next">
<%= next_url(@enhanced_query) %>
</div>
</nav>
</div>
18 changes: 18 additions & 0 deletions app/views/search/_results_callouts.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div id="callout-wrapper">
Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: This appears to be using 4 spaces instead of two whereas most of our views are using 2 spaces for indents.

Copy link
Contributor Author

@djanelle-mit djanelle-mit Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated my VS code to default to tabs with 2 spaces. Those were net new files so they used the 4 space default.

<aside class="result-callout">
<i></i>
<div>
<h4>Refine your search</h4>
<p>Use advanced search features to expand or filter your search.</p>
<a href="#">Search Primo</a>
</div>
</aside>
<aside class="result-callout">
<i></i>
<div>
<h4>Can’t find a book?</h4>
<p>If we don’t own it you can often request it from another library.</p>
<a href="#">Search WorldCat</a>
</div>
</aside>
</div>
18 changes: 18 additions & 0 deletions app/views/search/_results_sidebar.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<aside id="results-sidebar">
Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non-blocking: This appears to be using 4 spaces instead of two whereas most of our views are using 2 spaces for indents.

Copy link
Contributor Author

@djanelle-mit djanelle-mit Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated my VS code to default to tabs with 2 spaces. Those were net new files so they used the 4 space default.

<div>
<i></i>
<div>
<h4>Were these results useful?</h4>
<p>Your feedback can help shape the quality and relevance of our search results.</p>
<a href="#">Send feedback</a>
</div>
</div>
<div>
<i></i>
<div>
<h4>Get help from expert librarians</h4>
<p>From thesis research to course reserves, we can help you find what you need.</p>
<a href="#">Ask us</a>
</div>
</div>
</aside>
66 changes: 35 additions & 31 deletions app/views/search/results.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,50 @@
<%= render(partial: 'trigger_tacos') if tacos_enabled? %>

<%= turbo_frame_tag "search-results", data: { turbo_action: "advance" } do %>
<div class="layout-3q1q layout-band">
<main id="results" class="col3q wrap-results">
<% if @show_primo_continuation %>
<%= render partial: 'search/primo_continuation' %>
<% elsif @results.present? && @errors.blank? %>
<h2 class="results-context"><%= results_summary(@pagination[:hits]) %></h2>
<p class="results-context-description">From all MIT Libraries sources</p>
<ol class="results-list" start="<%= @pagination[:start] %>">
<% case @active_tab %>
<% when 'primo' %>
<%= render(partial: 'search/result_primo', collection: @results, as: :result) %>
<% when 'timdex' %>
<%= render(partial: 'search/result', collection: @results, as: :result) %>
<% when 'all' %>
<% @results.each do |result| %>
<% if result[:source] == 'Primo' %>
<%= render(partial: 'search/result_primo', locals: { result: result }) %>
<% else %>
<%= render(partial: 'search/result', locals: { result: result }) %>
<div id="results-section">
<% if @show_primo_continuation %>
<%= render partial: 'search/primo_continuation' %>
<% elsif @results.present? && @errors.blank? %>
<h2 class="results-context"><%= results_summary(@pagination[:hits]) %></h2>
<p class="results-context-description">From all MIT Libraries sources</p>
<div id="results-layout-wrapper">
<main id="results">
<ol class="results-list" start="<%= @pagination[:start] %>">
<% case @active_tab %>
<% when 'primo' %>
<%= render(partial: 'search/result_primo', collection: @results, as: :result) %>
<% when 'timdex' %>
<%= render(partial: 'search/result', collection: @results, as: :result) %>
<% when 'all' %>
<% @results.each do |result| %>
<% if result[:source] == 'Primo' %>
<%= render(partial: 'search/result_primo', locals: { result: result }) %>
<% else %>
<%= render(partial: 'search/result', locals: { result: result }) %>
<% end %>
<% end %>
<% end %>
<% end %>
</ol>
<% elsif @errors.blank? %>
<div class="no-results">
<p class="hd-2">No results found for your search</p>
</div>
</ol>
<%= render partial: "results_callouts" %>
<% elsif @errors.blank? %>
<main id="results">
<div class="no-results">
<p class="hd-2">No results found for your search</p>
</div>
</main>
Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tag ends up closed twice in certain scenarios I believe.

I'd suggest realigning the if/elsif statements so it is easier to keep track of them. I suspect the line 45 closing main might need to move into a condition? Not sure though.

Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If it isn't clear what I'm suggesting, I'd be happy to put in a commit and hop on a call to explain.

Copy link
Contributor Author

@djanelle-mit djanelle-mit Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pushed a new version that reorganizes the markup a bit. I checked both results and no results on local and the deployed version and things look good.

Is this what you had in mind? I removed all of the duplicate conditionals and things are easier to read.

I also brought the #results-layout-wrapper into the No Results version to keep the nested styles working as intended. This will help us when it's time to lay out whatever we decide here.

Copy link
Member

@JPrevost JPrevost Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, all the tags close as expected now (I think!). 👍🏻

<% end %>
</main>
<% if @results.present? %>
<%= render partial: "results_sidebar" %>
<% end %>
</main>
</div>
</div>

<% if @results.present? %>
<div id="pagination">
<%= render partial: "pagination" %>
</div>
<%= render partial: 'shared/ask', locals: { display: 'view-md' } %>
<%= render partial: "pagination" %>
<% end %>
<% end %>

<%= render partial: 'shared/ask', locals: { display: 'aside' } if @results.blank? %>
</div>

<%= javascript_include_tag "filters" %>
Loading