Standardize and Clean Search Inside Results

[merwhite11]

Problem

To complement the effort in #1001 to redirect patrons to the Search Inside results, we need to standardize the Search Inside result cards. There are currently three types of result cards in Search Inside results with UI inconsistencies:

1. When result book is available to Borrow: Footer displays as 'Borrow & See All Results'
   • Change footer to match case 2 below -> link to all matches highlighted in text reader
2. When result book is available to Read: Footer displays as See All Results
   • Reword 'See All Results' to more obviously signify link to all matches highlighted in text reader
3. When result book is Preview Only: No footer
   • TBD what the footer should be

Evidence / Screenshot

Borrow result:

Read result:

Preview only result:

For consistent UI across the site, we need to update the Search Inside results to more closely match the No results Fulltext Suggestion Card implemented in #1001.

1. Change font of snippet to serif font
2. Add quotation marks around snippet
3. Add page number after each snippet

Relevant URL(s)

Reproducing the bug

1. Go to Search Inside
2. Search 'walter' and scroll down to see all 3 UI variations of the footer.

• Expected behavior: There should be a consistent footer with language that more clearly leads to text reader
• Actual behavior: Inconsistent footer UI and unclear text

Context

• Browser (Chrome, Safari, Firefox, etc):
• OS (Windows, Mac, etc):
• Logged in (Y/N): Y
• Environment (prod, dev, local): prod

Notes from this Issue's Lead

Proposal & constraints

Related files

Stakeholders

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[merwhite11]

@mekarpeles

Here is a proposal of a modified Search Inside result card that carries over the design elements from Search Inside Suggestion Card (#1001).

• 3 excerpts instead of 5
• Excerpt in serif font to distinguish from other text
• Excerpt in blue font to indicate clickability (links to text reader)
• Large quotes around excerpt
• Page number
• Reworded footer (still conditionally displayed)

Codepen: https://codepen.io/merwhite11/pen/NWVLXVa

[mekarpeles]

1. Stick with 1 or 2 quotes for this page
2. Padding on quote should be 10px 0 so it aligns left
3. Author should be smaller than title (both on /search/inside and /search)
4. Let's try the copy "Preview all X matches" and have it be within (not below) sri__extra to save height.
5. I think the quote should be black w/ blue hover (similar to Title and Author) and the page number should be on the same line w/ —