From 653f6f4fd28863659ab3314333a61e840861e0c7 Mon Sep 17 00:00:00 2001 From: merwhite11 Date: Thu, 9 May 2024 11:52:52 -0700 Subject: [PATCH 1/6] Connected new js to template via index.js Created macro, not inserting into work_search html Response from partial loading in macro Basic outline for card Added in pseucode for data call plan Partial querying db and sending back data Trying to get macro to render, not working Can't create FulltextSearchBox macro, 500 error Adding partial with data to DOM ! Deleted some console.logs Author last name and covers loading in macro Attempting to get author name --- conf/openlibrary.yml | 6 +- .../macros/FulltextSearchSuggestion.html | 26 +++ .../macros/FulltextSearchSuggestionItem.html | 92 +++++++++ .../macros/FulltextSuggestionSnippet.html | 22 ++ openlibrary/plugins/inside/code.py | 1 + openlibrary/plugins/openlibrary/code.py | 11 + .../js/fulltext-search-suggestion.js | 19 ++ openlibrary/plugins/openlibrary/js/index.js | 8 + openlibrary/templates/work_search.html | 5 +- .../fulltext-search-suggestion.less | 192 ++++++++++++++++++ static/css/page-user.less | 2 + static/images/icons/icon_search-inside.svg | 1 + 12 files changed, 381 insertions(+), 4 deletions(-) create mode 100644 openlibrary/macros/FulltextSearchSuggestion.html create mode 100644 openlibrary/macros/FulltextSearchSuggestionItem.html create mode 100644 openlibrary/macros/FulltextSuggestionSnippet.html create mode 100644 openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js create mode 100644 static/css/components/fulltext-search-suggestion.less create mode 100644 static/images/icons/icon_search-inside.svg diff --git a/conf/openlibrary.yml b/conf/openlibrary.yml index 80ec9a05c99..702065f2f8e 100644 --- a/conf/openlibrary.yml +++ b/conf/openlibrary.yml @@ -15,10 +15,12 @@ smtp_server: localhost dummy_sendmail: True debug: True -coverstore_url: http://covers:7075 +# coverstore_url: http://covers:7075 +coverstore_url: https://covers.openlibrary.org # URL to use inside HTML files; must be publicly accessible from # a client's browser -coverstore_public_url: http://localhost:7075 +# coverstore_public_url: http://localhost:7075 +coverstore_public_url: https://covers.openlibrary.org state_dir: var/run diff --git a/openlibrary/macros/FulltextSearchSuggestion.html b/openlibrary/macros/FulltextSearchSuggestion.html new file mode 100644 index 00000000000..c7308db7c40 --- /dev/null +++ b/openlibrary/macros/FulltextSearchSuggestion.html @@ -0,0 +1,26 @@ +$def with(query, results, page=1) + +$def render_snippet(query, doc): + $:macros.FulltextSuggestionSnippet(query, doc=doc) + +$if results and results.get('hits'): + $ hits = results['hits'].get('hits', [])[:3] + $ num_found = commify(results['hits'].get('total', 0)) + $ ia_base_url = "https://archive.org" +
+
+ + $_('search inside icon') + +

$_('Browse %(results_count)s Search Inside Matches', results_count=num_found) +

+
+
+ $for doc in hits: + $if doc.get('edition'): + $:macros.FulltextSearchSuggestionItem(doc['edition'], extra=render_snippet(query, doc)) +
+
diff --git a/openlibrary/macros/FulltextSearchSuggestionItem.html b/openlibrary/macros/FulltextSearchSuggestionItem.html new file mode 100644 index 00000000000..6114f1b50e2 --- /dev/null +++ b/openlibrary/macros/FulltextSearchSuggestionItem.html @@ -0,0 +1,92 @@ +$def with (doc, extra=None, attrs=None, blur=False) + +$code: + max_rendered_authors = 9 + doc_type = ( + 'infogami_work' if doc.get('type', {}).get('key') == '/type/work' else + 'infogami_edition' if doc.get('type', {}).get('key') == '/type/edition' else + 'solr_work' if not doc.get('editions') else + 'solr_edition' + ) + + selected_ed = doc + if doc_type == 'solr_edition': + selected_ed = doc.get('editions')[0] + + book_url = doc.url() if doc_type.startswith('infogami_') else doc.key + if doc_type == 'solr_edition': + work_edition_url = book_url + '?edition=' + urlquote('key:' + selected_ed.key) + else: + book_provider = get_book_provider(doc) + if book_provider and doc_type.endswith('_work'): + work_edition_url = book_url + '?edition=' + urlquote(book_provider.get_best_identifier_slug(doc)) + else: + work_edition_url = book_url + + work_edition_all_url = work_edition_url + if '?' in work_edition_url: + work_edition_all_url += '&mode=all' + else: + work_edition_all_url += '?mode=all' + + edition_work = None + if doc_type == 'infogami_edition' and 'works' in doc: + edition_work = doc['works'][0] + + full_title = selected_ed.get('title', '') + (': ' + selected_ed.subtitle if selected_ed.get('subtitle') else '') + if doc_type == 'infogami_edition' and edition_work: + full_work_title = edition_work.get('title', '') + (': ' + edition_work.subtitle if edition_work.get('subtitle') else '') + else: + full_work_title = doc.get('title', '') + (': ' + doc.subtitle if doc.get('subtitle') else '') + +
+ $ blur_cover = "bookcover--blur" if blur else "" +
+ + $ cover = get_cover_url(selected_ed) or "/images/icons/avatar_book-sm.png" + + $_('Cover of: %(title)s', title=full_title) + + +
+
+

+ +

+
+ +
+ $if extra: +
+ $:extra +
+
+
+ diff --git a/openlibrary/macros/FulltextSuggestionSnippet.html b/openlibrary/macros/FulltextSuggestionSnippet.html new file mode 100644 index 00000000000..09e0ebbaa6e --- /dev/null +++ b/openlibrary/macros/FulltextSuggestionSnippet.html @@ -0,0 +1,22 @@ +$def with (q, doc=None) + +$ ia = doc.get('fields', {}).get('identifier', [''])[0] +$ ia_base_url = "https://archive.org" +$ availability = doc.get('availability', {}) +$ snippet = doc.get('highlight', {}).get('text', [''])[0] +$ page_nums = doc.get('fields', {}).get('page_num', []) +$ page = ', '.join([str(num) for num in page_nums]) + +$if snippet: +
+ $if snippet: +
+ + …$:(snippet.replace("<", "«").replace(">", "»").replace("{{{", "").replace("}}}", ""))… + + $if page: + +
Page: $page
+ +
+
\ No newline at end of file diff --git a/openlibrary/plugins/inside/code.py b/openlibrary/plugins/inside/code.py index d63318bf55b..3b62c60ecb7 100644 --- a/openlibrary/plugins/inside/code.py +++ b/openlibrary/plugins/inside/code.py @@ -20,6 +20,7 @@ def GET(self): query = i.q page = int(i.page) results = fulltext_search(query, page=page, limit=RESULTS_PER_PAGE) + print('*************RESULTS FROM FULLTEXT****************', results) search_time = time() - search_start return render_template( diff --git a/openlibrary/plugins/openlibrary/code.py b/openlibrary/plugins/openlibrary/code.py index 2ef6cfdb6c1..1f9dc276a1e 100644 --- a/openlibrary/plugins/openlibrary/code.py +++ b/openlibrary/plugins/openlibrary/code.py @@ -41,6 +41,7 @@ from openlibrary.utils.isbn import isbn_13_to_isbn_10, isbn_10_to_isbn_13, canonical from openlibrary.core.models import Edition from openlibrary.core.lending import get_availability +from openlibrary.core.fulltext import fulltext_search import openlibrary.core.stats from openlibrary.plugins.openlibrary.home import format_work_data from openlibrary.plugins.openlibrary.stats import increment_error_count @@ -1114,6 +1115,7 @@ def GET(self): args[0], args[1] ) partial = {"partials": str(macro)} + elif component == 'SearchFacets': data = json.loads(i.data) path = data.get('path') @@ -1150,6 +1152,15 @@ def GET(self): "activeFacets": str(active_facets).strip(), } + elif component == "FulltextSearchSuggestion": + query = i.get('data', '') + data = fulltext_search(query) + hits = data.get('hits', []) + macro = web.template.Template.globals['macros'].FulltextSearchSuggestion( + query, data + ) + partial = {"partials": str(macro)} + return delegate.RawText(json.dumps(partial)) diff --git a/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js b/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js new file mode 100644 index 00000000000..79f990fb26e --- /dev/null +++ b/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js @@ -0,0 +1,19 @@ +export function initFulltextSearchSuggestion(fulltextSearchSuggestion) { + const query = fulltextSearchSuggestion.dataset.query + getPartials(fulltextSearchSuggestion, query) +} + +async function getPartials(fulltextSearchSuggestion, query) { + const queryParam = encodeURIComponent(query) + return fetch(`/partials.json?_component=FulltextSearchSuggestion&data=${queryParam}`) + .then((resp) => { + if (resp.status !== 200) { + throw new Error(`Failed to fetch partials. Status code: ${resp.status}`) + } + return resp.json() + }) + .then((data) => { + // console.log('DATA FROM PARTIAL', data['data']) + fulltextSearchSuggestion.innerHTML += data['partials'] + }) +} diff --git a/openlibrary/plugins/openlibrary/js/index.js b/openlibrary/plugins/openlibrary/js/index.js index d3412d36181..a0aed4020e8 100644 --- a/openlibrary/plugins/openlibrary/js/index.js +++ b/openlibrary/plugins/openlibrary/js/index.js @@ -555,4 +555,12 @@ jQuery(function () { import(/* webpackChunkName: "affiliate-links" */ './affiliate-links') .then(module => module.initAffiliateLinks(affiliateLinksSection)) } + + // Fulltext search box: + const fulltextSearchSuggestion = document.querySelector('#fulltext-search-suggestion') + if (fulltextSearchSuggestion) { + import(/* webpackChunkName: "fulltext-search-suggestion" */ './fulltext-search-suggestion') + .then(module => module.initFulltextSearchSuggestion(fulltextSearchSuggestion)) + } }); + diff --git a/openlibrary/templates/work_search.html b/openlibrary/templates/work_search.html index c3d09b8ad6f..ffd6464e155 100644 --- a/openlibrary/templates/work_search.html +++ b/openlibrary/templates/work_search.html @@ -52,7 +52,8 @@

$_("Search Books")

$# Temporarily (2020-03-26) disable automatically showing full-text $# results because of performance issues due to increased load. See $# this commit to revert. -
+
+ $elif param and not search_response.error and len(search_response.docs):
diff --git a/static/css/components/fulltext-search-suggestion.less b/static/css/components/fulltext-search-suggestion.less new file mode 100644 index 00000000000..98902379417 --- /dev/null +++ b/static/css/components/fulltext-search-suggestion.less @@ -0,0 +1,192 @@ +/** + * Search Result Item + * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#searchresultitem + */ + @import "buttonBtn.less"; + @import "buttonCta.less"; + + .bookauthor { + font-family: @lucida_sans_serif-6; + font-weight: 500; + } + + .fulltext-suggestions{ + list-style-type: none; + line-height: 1.5em; + background-color: @grey-fafafa; + border-radius: 5px; + padding: 5px; + margin-bottom: 3px; + border-bottom: 1px solid @light-beige; + .display-flex(); + flex-direction: column; + .header { + display: flex; + flex-direction: row; + align-items: center; + padding: 5px; + margin-bottom: 3px; + .title { + display: block; + margin: 0; + padding: 5px; + // color: @dark-grey; + font-size: large; + font-weight: 700; + font-family: @lucida_sans_serif-6; + a[href] { + text-decoration: none; + color: @dark-grey; + } + a[href]:hover { + color: #003266; + text-decoration: underline; + } + } + } + .fsi__container { + .display-flex(); + flex-direction: column; + padding: 5px; + } + .fsi__main { + // .display-flex(); + // flex-direction: column; + display: grid; + grid-template-areas: + "bookcover titleAndAuthor" + "excerpts excerpts"; + grid-template-columns: 1fr 2fr; + grid-template-rows: auto 1fr; + + background-color: white; + padding: 3px; + margin-bottom: 5px; + border-bottom: 1px solid @light-beige; + border-radius: 3px; + overflow: hidden; + @media (min-width: @width-breakpoint-tablet) { + // flex-direction: row; + // height: 100px; + grid-template-areas: + "bookcover titleAndAuthor" + "bookcover excerpts"; + grid-template-columns: 1fr 8fr; + grid-template-rows: auto 1fr; + } + .bookDetails { + display: flex; + flex-direction: row; + // display: inline-flex; + gap: 10px; + margin: 5px 10px 0 10px; + @media (min-width: @width-breakpoint-tablet) { + flex-direction: row; + align-items: flex-start; + gap: 20px; + } + } + .bookcover-container { + padding: 8px; + @media (min-width: @width-breakpoint-tablet) { + height: 100%; + } + } + .bookcover { + grid-area: bookcover; + overflow: hidden; + height: 80px; + width: auto; + min-width: 90px; + border-radius: 4px; + align-self: center; + justify-self: center; + margin-top: 5px; + @media (min-width: @width-breakpoint-tablet) { + height: 100px; + } + img { + height: 100%; + width: 100%; + object-fit: cover; + } + } + .bookcover--blur { + img { + filter: blur(4px); + } + } + .imageLg { + text-align: center; + width: 100%; + margin: 10px 10px 0 5px; + img { + max-width: 100%; + max-height: 110px; + } + } + a[href] { + text-decoration: none; + } + .titleAndAuthor { + grid-area: titleAndAuthor; + display: flex; + flex-direction: column; + padding: 5px 3px 0 10px; + .resultTitle { + overflow: auto; + margin: 0 !important; + font-family: @lucida_sans_serif-1; + color: @grey; + h3 { + display: block; + margin: 0; + padding: 0; + color: @dark-grey; + // font-size: 1.0em; + font-weight: 700; + font-family: @lucida_sans_serif-6; + line-height: 1.2em; + @media(min-width: 425px) { + font-size: 1.0em; + } + @media (min-width: @width-breakpoint-tablet) { + font-size: 1.0em; + } + } + } + .bookauthor { + font-size: small; + line-height: 1.2em; + margin: 10px 0; + @media(min-width: 425px) { + font-size: 1.0em; + } + } + } + .excerpts { + grid-area: excerpts; + display: inline; + width: 100%; + padding: 5px; + margin: 0; + @media (min-width: @width-breakpoint-tablet) { + width: auto; + } + .fulltext-excerpt { + padding: 5px; + margin: 0 5px; + line-height: 1.6em; + } + .page-nums { + color: @dark-grey; + font-weight: 700; + display: block; + @media (min-width: @width-breakpoint-tablet) { + display: inline; + } + } + } + } +} + diff --git a/static/css/page-user.less b/static/css/page-user.less index 8ff38472ce5..09c2821a375 100644 --- a/static/css/page-user.less +++ b/static/css/page-user.less @@ -224,6 +224,8 @@ tr.table-row.selected{ transform: translateY(-50%); } +// Import styles for fulltext-search-suggestion card +@import (less) "components/fulltext-search-suggestion.less"; // Import styles for author infobox @import (less) "components/author-infobox.less"; // Import all common components diff --git a/static/images/icons/icon_search-inside.svg b/static/images/icons/icon_search-inside.svg new file mode 100644 index 00000000000..7982c49cd98 --- /dev/null +++ b/static/images/icons/icon_search-inside.svg @@ -0,0 +1 @@ + \ No newline at end of file From 47396db82fd99859c39b6f7fc8b75cdfa2ceac26 Mon Sep 17 00:00:00 2001 From: merwhite11 Date: Fri, 7 Jun 2024 13:19:18 -0700 Subject: [PATCH 2/6] Restructed html and less files w BEM Redesigned mobile style w flex, truncated text, quotes Resolved conflict-Book title blue and underlined Styling changes LoadingIndicator displaying which results fetching --- .../macros/FulltextSearchSuggestion.html | 22 +- .../macros/FulltextSearchSuggestionItem.html | 29 ++- .../macros/FulltextSuggestionSnippet.html | 12 +- .../js/fulltext-search-suggestion.js | 22 +- openlibrary/templates/work_search.html | 15 +- .../fulltext-search-suggestion-item.less | 108 ++++++++++ .../fulltext-search-suggestion.less | 188 ++---------------- .../fulltext-suggestion-snippet.less | 29 +++ static/css/page-user.less | 4 + .../images/icons/icon_big-quote-closing.svg | 1 + .../images/icons/icon_big-quote-opening.svg | 1 + 11 files changed, 224 insertions(+), 207 deletions(-) create mode 100644 static/css/components/fulltext-search-suggestion-item.less create mode 100644 static/css/components/fulltext-suggestion-snippet.less create mode 100644 static/images/icons/icon_big-quote-closing.svg create mode 100644 static/images/icons/icon_big-quote-opening.svg diff --git a/openlibrary/macros/FulltextSearchSuggestion.html b/openlibrary/macros/FulltextSearchSuggestion.html index c7308db7c40..f6dd90c9ba5 100644 --- a/openlibrary/macros/FulltextSearchSuggestion.html +++ b/openlibrary/macros/FulltextSearchSuggestion.html @@ -4,23 +4,23 @@ $:macros.FulltextSuggestionSnippet(query, doc=doc) $if results and results.get('hits'): - $ hits = results['hits'].get('hits', [])[:3] + $ hits = results['hits'].get('hits', [])[:4] $ num_found = commify(results['hits'].get('total', 0)) $ ia_base_url = "https://archive.org" + + $:macros.LoadingIndicator('Fetching Search Inside Suggestions')
-
- +
+ $_('search inside icon') -

$_('Browse %(results_count)s Search Inside Matches', results_count=num_found) +

$_('%(results_count)s Search Inside Matches', results_count=num_found)

-
- $for doc in hits: - $if doc.get('edition'): - $:macros.FulltextSearchSuggestionItem(doc['edition'], extra=render_snippet(query, doc)) -
+ $for doc in hits: + $if doc.get('edition'): + $:macros.FulltextSearchSuggestionItem(doc['edition'], snippet=render_snippet(query, doc))
diff --git a/openlibrary/macros/FulltextSearchSuggestionItem.html b/openlibrary/macros/FulltextSearchSuggestionItem.html index 6114f1b50e2..2cee03434b4 100644 --- a/openlibrary/macros/FulltextSearchSuggestionItem.html +++ b/openlibrary/macros/FulltextSearchSuggestionItem.html @@ -1,4 +1,4 @@ -$def with (doc, extra=None, attrs=None, blur=False) +$def with (doc, snippet=None, attrs=None, blur=False) $code: max_rendered_authors = 9 @@ -39,26 +39,26 @@ else: full_work_title = doc.get('title', '') + (': ' + doc.subtitle if doc.get('subtitle') else '') -
- $ blur_cover = "bookcover--blur" if blur else "" +$ blur_cover = "fsi__bookcover-img-blur" if blur else "" + +
- + $ cover = get_cover_url(selected_ed) or "/images/icons/avatar_book-sm.png" - $_('Cover of: %(title)s', title=full_title) -
-
-

- -

-
-
+
+

+ +

+

$:macros.BookByline(author_data, limit=max_rendered_authors, overflow_url=work_edition_url, attrs='class="results"')

- $if extra: -
- $:extra + $if snippet: + $:snippet
diff --git a/openlibrary/macros/FulltextSuggestionSnippet.html b/openlibrary/macros/FulltextSuggestionSnippet.html index 09e0ebbaa6e..0b8238b6381 100644 --- a/openlibrary/macros/FulltextSuggestionSnippet.html +++ b/openlibrary/macros/FulltextSuggestionSnippet.html @@ -8,15 +8,21 @@ $ page = ', '.join([str(num) for num in page_nums]) $if snippet: -
+
$if snippet: -
+
+ $_('search inside icon') …$:(snippet.replace("<", "«").replace(">", "»").replace("{{{", "").replace("}}}", ""))… + $_('search inside icon') $if page: -
Page: $page
+
Page: $page
\ No newline at end of file diff --git a/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js b/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js index 79f990fb26e..c21139fe04e 100644 --- a/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js +++ b/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js @@ -1,8 +1,21 @@ export function initFulltextSearchSuggestion(fulltextSearchSuggestion) { - const query = fulltextSearchSuggestion.dataset.query - getPartials(fulltextSearchSuggestion, query) + const isLoading = showLoadingIndicators(fulltextSearchSuggestion) + if(isLoading) { + const query = fulltextSearchSuggestion.dataset.query + getPartials(fulltextSearchSuggestion, query) + } } +function showLoadingIndicators(searchSuggestion) { + let isLoading = false + const loadingIndicator = searchSuggestion.querySelector('.loadingIndicator') + if (loadingIndicator) { + isLoading = true + loadingIndicator.classList.remove('hidden') + } + + return isLoading +} async function getPartials(fulltextSearchSuggestion, query) { const queryParam = encodeURIComponent(query) return fetch(`/partials.json?_component=FulltextSearchSuggestion&data=${queryParam}`) @@ -15,5 +28,10 @@ async function getPartials(fulltextSearchSuggestion, query) { .then((data) => { // console.log('DATA FROM PARTIAL', data['data']) fulltextSearchSuggestion.innerHTML += data['partials'] + const loadingIndicator = fulltextSearchSuggestion.querySelector('.loadingIndicator'); + if (loadingIndicator) { + console.log('loadingindicator!') + loadingIndicator.classList.add('hidden') + } }) } diff --git a/openlibrary/templates/work_search.html b/openlibrary/templates/work_search.html index ffd6464e155..8c6f14a78fd 100644 --- a/openlibrary/templates/work_search.html +++ b/openlibrary/templates/work_search.html @@ -52,18 +52,13 @@

$_("Search Books")

$# Temporarily (2020-03-26) disable automatically showing full-text $# results because of performance issues due to increased load. See $# this commit to revert. -
- +
+
+ $:macros.LoadingIndicator(_("Loading Search Inside Suggestions"), "fulltext-loading") +
$elif param and not search_response.error and len(search_response.docs):
diff --git a/static/css/components/fulltext-search-suggestion-item.less b/static/css/components/fulltext-search-suggestion-item.less new file mode 100644 index 00000000000..2d2f935245c --- /dev/null +++ b/static/css/components/fulltext-search-suggestion-item.less @@ -0,0 +1,108 @@ +.fsi { + &__main { + .display-flex(); + flex-direction: row; + background-color: white; + padding: 5px; + margin-bottom: 5px; + border-bottom: 1px solid @light-beige; + border-radius: 3px; + overflow: hidden; + @media (min-width: @width-breakpoint-tablet) { + flex-direction: row; + } + } + + &__book-cover { + grid-area: bookcover; + overflow: hidden; + height: 100%; + width: auto; + min-width: 90px; + border-radius: 4px; + align-self: center; + justify-self: center; + margin-top: 5px; + @media (min-width: @width-breakpoint-tablet) { + height: 130px; + margin-bottom: 5px; + } + } + + &__book-cover-img { + height: 100%; + width: 100%; + object-fit: cover; + } + + &__book-cover-img-blur { + filter: blur(4px); + } + + &__book-details { + display: flex; + flex-direction: column; + gap: 10px; + margin: 5px 10px 0 10px; + @media (min-width: @width-breakpoint-tablet) { + align-items: flex-start; + } + } + + &__title-author { + display: flex; + flex-direction: column; + padding: 5px 3px 0 10px; + width: 50%; + // color: #003266; + // text-decoration: underline; + @media (min-width: 375px) { + width: 70% + } + @media (min-width: 425px) { + width: 80% + } + + } + + &__book-title, + &__book-author { + font-size: large; + width: 80%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #003266; + color: @dark-grey; + font-family: @lucida_sans_serif-6; + @media (min-width: @width-breakpoint-desktop) { + text-decoration: none; + color: #000; + } + + } + &__book-title { + margin: 0 !important; + display: block; + margin: 0; + padding: 0; + font-weight: 700; + line-height: 1.2em; + } + + &__book-author { + line-height: 1.2em; + margin: 3px 0 0; + } + + // &__excerpts { + // grid-area: excerpts; + // display: inline; + // width: 100%; + // padding: 5px; + // margin: 0; + // @media (min-width: @width-breakpoint-tablet) { + // width: auto; + // } + // } +} \ No newline at end of file diff --git a/static/css/components/fulltext-search-suggestion.less b/static/css/components/fulltext-search-suggestion.less index 98902379417..40b905c0d1c 100644 --- a/static/css/components/fulltext-search-suggestion.less +++ b/static/css/components/fulltext-search-suggestion.less @@ -2,8 +2,8 @@ * Search Result Item * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#searchresultitem */ - @import "buttonBtn.less"; - @import "buttonCta.less"; +// @import "buttonBtn.less"; +// @import "buttonCta.less"; .bookauthor { font-family: @lucida_sans_serif-6; @@ -20,173 +20,29 @@ border-bottom: 1px solid @light-beige; .display-flex(); flex-direction: column; - .header { - display: flex; - flex-direction: row; - align-items: center; - padding: 5px; - margin-bottom: 3px; - .title { - display: block; - margin: 0; - padding: 5px; - // color: @dark-grey; - font-size: large; - font-weight: 700; - font-family: @lucida_sans_serif-6; - a[href] { - text-decoration: none; - color: @dark-grey; - } - a[href]:hover { - color: #003266; - text-decoration: underline; - } - } - } - .fsi__container { - .display-flex(); - flex-direction: column; + + &__header { + display: flex; + flex-direction: row; + align-items: center; padding: 5px; - } - .fsi__main { - // .display-flex(); - // flex-direction: column; - display: grid; - grid-template-areas: - "bookcover titleAndAuthor" - "excerpts excerpts"; - grid-template-columns: 1fr 2fr; - grid-template-rows: auto 1fr; + margin-bottom: 3px; + } - background-color: white; - padding: 3px; - margin-bottom: 5px; - border-bottom: 1px solid @light-beige; - border-radius: 3px; - overflow: hidden; + &__title { + display: block; + margin: 0; + padding: 5px; + font-size: medium; + font-weight: 700; + font-family: @lucida_sans_serif-6; @media (min-width: @width-breakpoint-tablet) { - // flex-direction: row; - // height: 100px; - grid-template-areas: - "bookcover titleAndAuthor" - "bookcover excerpts"; - grid-template-columns: 1fr 8fr; - grid-template-rows: auto 1fr; - } - .bookDetails { - display: flex; - flex-direction: row; - // display: inline-flex; - gap: 10px; - margin: 5px 10px 0 10px; - @media (min-width: @width-breakpoint-tablet) { - flex-direction: row; - align-items: flex-start; - gap: 20px; - } - } - .bookcover-container { - padding: 8px; - @media (min-width: @width-breakpoint-tablet) { - height: 100%; - } - } - .bookcover { - grid-area: bookcover; - overflow: hidden; - height: 80px; - width: auto; - min-width: 90px; - border-radius: 4px; - align-self: center; - justify-self: center; - margin-top: 5px; - @media (min-width: @width-breakpoint-tablet) { - height: 100px; - } - img { - height: 100%; - width: 100%; - object-fit: cover; - } - } - .bookcover--blur { - img { - filter: blur(4px); - } - } - .imageLg { - text-align: center; - width: 100%; - margin: 10px 10px 0 5px; - img { - max-width: 100%; - max-height: 110px; - } - } - a[href] { - text-decoration: none; - } - .titleAndAuthor { - grid-area: titleAndAuthor; - display: flex; - flex-direction: column; - padding: 5px 3px 0 10px; - .resultTitle { - overflow: auto; - margin: 0 !important; - font-family: @lucida_sans_serif-1; - color: @grey; - h3 { - display: block; - margin: 0; - padding: 0; - color: @dark-grey; - // font-size: 1.0em; - font-weight: 700; - font-family: @lucida_sans_serif-6; - line-height: 1.2em; - @media(min-width: 425px) { - font-size: 1.0em; - } - @media (min-width: @width-breakpoint-tablet) { - font-size: 1.0em; - } - } - } - .bookauthor { - font-size: small; - line-height: 1.2em; - margin: 10px 0; - @media(min-width: 425px) { - font-size: 1.0em; - } - } - } - .excerpts { - grid-area: excerpts; - display: inline; - width: 100%; - padding: 5px; - margin: 0; - @media (min-width: @width-breakpoint-tablet) { - width: auto; - } - .fulltext-excerpt { - padding: 5px; - margin: 0 5px; - line-height: 1.6em; - } - .page-nums { - color: @dark-grey; - font-weight: 700; - display: block; - @media (min-width: @width-breakpoint-tablet) { - display: inline; - } - } + font-size: large; } - } + } + + &__icon { + margin-top: 5px; + } } diff --git a/static/css/components/fulltext-suggestion-snippet.less b/static/css/components/fulltext-suggestion-snippet.less new file mode 100644 index 00000000000..01ed534369b --- /dev/null +++ b/static/css/components/fulltext-suggestion-snippet.less @@ -0,0 +1,29 @@ +.fsi-snippet { + grid-area: excerpts; + display: inline; + width: 70%; + padding: 5px; + margin: 0; + font-size: small; + @media (min-width: 425px) { + width: 80%; + } + @media (min-width: @width-breakpoint-tablet) { + width: auto; + font-size: medium; + } + + &__main { + padding: 5px; + margin: 0 5px; + line-height: 1.6em; + font-family: Georgia, 'Times New Roman', Times, serif + } + + &__page-num { + color: @dark-grey; + font-weight: 700; + display: block; + } +} + diff --git a/static/css/page-user.less b/static/css/page-user.less index 09c2821a375..10d6154968e 100644 --- a/static/css/page-user.less +++ b/static/css/page-user.less @@ -226,6 +226,10 @@ tr.table-row.selected{ // Import styles for fulltext-search-suggestion card @import (less) "components/fulltext-search-suggestion.less"; +// Import styles for fulltext-search-suggestion card item +@import (less) "components/fulltext-search-suggestion-item.less"; +// Import styles for fulltext-search-suggestion card item snippet +@import (less) "components/fulltext-suggestion-snippet.less"; // Import styles for author infobox @import (less) "components/author-infobox.less"; // Import all common components diff --git a/static/images/icons/icon_big-quote-closing.svg b/static/images/icons/icon_big-quote-closing.svg new file mode 100644 index 00000000000..0a9573958d8 --- /dev/null +++ b/static/images/icons/icon_big-quote-closing.svg @@ -0,0 +1 @@ + quote \ No newline at end of file diff --git a/static/images/icons/icon_big-quote-opening.svg b/static/images/icons/icon_big-quote-opening.svg new file mode 100644 index 00000000000..9dc49913b15 --- /dev/null +++ b/static/images/icons/icon_big-quote-opening.svg @@ -0,0 +1 @@ + quote \ No newline at end of file From d91337628ec17027b459dcb5e8ba717f93131a88 Mon Sep 17 00:00:00 2001 From: merwhite11 Date: Tue, 18 Jun 2024 11:40:16 -0700 Subject: [PATCH 3/6] Added Retry link for error handling i18n quotes, header and footer option Cleaning up code Fixed linter errors Fixed js test error Corrected more js test errors Removed print out Added i18n syntax Added blue hover to quote link --- .../macros/FulltextSearchSuggestion.html | 14 +++- .../macros/FulltextSuggestionSnippet.html | 20 +++-- openlibrary/plugins/inside/code.py | 1 - .../js/fulltext-search-suggestion.js | 44 ++++++++--- .../fulltext-search-suggestion-item.less | 35 ++------- .../fulltext-search-suggestion.less | 75 ++++++++++++------- .../fulltext-suggestion-snippet.less | 22 ++++-- 7 files changed, 128 insertions(+), 83 deletions(-) diff --git a/openlibrary/macros/FulltextSearchSuggestion.html b/openlibrary/macros/FulltextSearchSuggestion.html index f6dd90c9ba5..df14c0ef57c 100644 --- a/openlibrary/macros/FulltextSearchSuggestion.html +++ b/openlibrary/macros/FulltextSearchSuggestion.html @@ -8,7 +8,7 @@ $ num_found = commify(results['hits'].get('total', 0)) $ ia_base_url = "https://archive.org" - $:macros.LoadingIndicator('Fetching Search Inside Suggestions') + $:macros.LoadingIndicator(_("Fetching Search Inside Suggestions")) diff --git a/openlibrary/macros/FulltextSuggestionSnippet.html b/openlibrary/macros/FulltextSuggestionSnippet.html index 0b8238b6381..211643d1521 100644 --- a/openlibrary/macros/FulltextSuggestionSnippet.html +++ b/openlibrary/macros/FulltextSuggestionSnippet.html @@ -5,24 +5,22 @@ $ availability = doc.get('availability', {}) $ snippet = doc.get('highlight', {}).get('text', [''])[0] $ page_nums = doc.get('fields', {}).get('page_num', []) -$ page = ', '.join([str(num) for num in page_nums]) +$if len(page_nums) == 1 and isinstance(page_nums[0], list): + $ page_nums = page_nums[0] +$ page = ', '.join(str(num) for num in page_nums) $if snippet:
$if snippet:
- $_('search inside icon') - +
$_('❝')
+ …$:(snippet.replace("<", "«").replace(">", "»").replace("{{{", "").replace("}}}", ""))… - $_('search inside icon') +
$_('❞')
$if page: - -
Page: $page
+ +
$_('Page: %(page)s', page=page)
-
\ No newline at end of file +
diff --git a/openlibrary/plugins/inside/code.py b/openlibrary/plugins/inside/code.py index 3b62c60ecb7..d63318bf55b 100644 --- a/openlibrary/plugins/inside/code.py +++ b/openlibrary/plugins/inside/code.py @@ -20,7 +20,6 @@ def GET(self): query = i.q page = int(i.page) results = fulltext_search(query, page=page, limit=RESULTS_PER_PAGE) - print('*************RESULTS FROM FULLTEXT****************', results) search_time = time() - search_start return render_template( diff --git a/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js b/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js index c21139fe04e..96e7980d91c 100644 --- a/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js +++ b/openlibrary/plugins/openlibrary/js/fulltext-search-suggestion.js @@ -1,19 +1,18 @@ export function initFulltextSearchSuggestion(fulltextSearchSuggestion) { const isLoading = showLoadingIndicators(fulltextSearchSuggestion) - if(isLoading) { + if (isLoading) { const query = fulltextSearchSuggestion.dataset.query getPartials(fulltextSearchSuggestion, query) } } -function showLoadingIndicators(searchSuggestion) { +function showLoadingIndicators(fulltextSearchSuggestion) { let isLoading = false - const loadingIndicator = searchSuggestion.querySelector('.loadingIndicator') - if (loadingIndicator) { - isLoading = true - loadingIndicator.classList.remove('hidden') - } - + const loadingIndicator = fulltextSearchSuggestion.querySelector('.loadingIndicator') + if (loadingIndicator) { + isLoading = true + loadingIndicator.classList.remove('hidden') + } return isLoading } async function getPartials(fulltextSearchSuggestion, query) { @@ -26,12 +25,37 @@ async function getPartials(fulltextSearchSuggestion, query) { return resp.json() }) .then((data) => { - // console.log('DATA FROM PARTIAL', data['data']) fulltextSearchSuggestion.innerHTML += data['partials'] const loadingIndicator = fulltextSearchSuggestion.querySelector('.loadingIndicator'); if (loadingIndicator) { - console.log('loadingindicator!') loadingIndicator.classList.add('hidden') } }) + .catch(() => { + const loadingIndicator = fulltextSearchSuggestion.querySelector('.loadingIndicator') + if (loadingIndicator) { + loadingIndicator.classList.add('hidden') + } + const existingRetryAffordance = fulltextSearchSuggestion.querySelector('.fulltext-suggestions__retry') + if (existingRetryAffordance) { + existingRetryAffordance.classList.remove('hidden') + } else { + fulltextSearchSuggestion.insertAdjacentHTML('afterbegin', renderRetryLink()) + const retryAffordance = fulltextSearchSuggestion.querySelector('.fulltext-suggestions__retry') + retryAffordance.addEventListener('click', () => { + retryAffordance.classList.add('hidden') + getPartials(fulltextSearchSuggestion, query) + }) + } + + }) +} + +/** + * Returns HTML string with error message and retry link. + * + * @returns {string} HTML for a retry link. + */ +function renderRetryLink() { + return 'Failed to fetch fulltext search suggestions. Retry?' } diff --git a/static/css/components/fulltext-search-suggestion-item.less b/static/css/components/fulltext-search-suggestion-item.less index 2d2f935245c..ba956632374 100644 --- a/static/css/components/fulltext-search-suggestion-item.less +++ b/static/css/components/fulltext-search-suggestion-item.less @@ -2,7 +2,7 @@ &__main { .display-flex(); flex-direction: row; - background-color: white; + background-color: @white; padding: 5px; margin-bottom: 5px; border-bottom: 1px solid @light-beige; @@ -14,14 +14,12 @@ } &__book-cover { - grid-area: bookcover; overflow: hidden; height: 100%; width: auto; min-width: 90px; border-radius: 4px; align-self: center; - justify-self: center; margin-top: 5px; @media (min-width: @width-breakpoint-tablet) { height: 130px; @@ -43,7 +41,7 @@ display: flex; flex-direction: column; gap: 10px; - margin: 5px 10px 0 10px; + margin: 5px 10px 0; @media (min-width: @width-breakpoint-tablet) { align-items: flex-start; } @@ -54,15 +52,12 @@ flex-direction: column; padding: 5px 3px 0 10px; width: 50%; - // color: #003266; - // text-decoration: underline; @media (min-width: 375px) { width: 70% } @media (min-width: 425px) { width: 80% } - } &__book-title, @@ -72,37 +67,23 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color: #003266; - color: @dark-grey; font-family: @lucida_sans_serif-6; - @media (min-width: @width-breakpoint-desktop) { - text-decoration: none; - color: #000; - } - } + &__book-title { margin: 0 !important; display: block; - margin: 0; padding: 0; font-weight: 700; line-height: 1.2em; } + &__book-title-link { + text-decoration: none !important; + } + &__book-author { line-height: 1.2em; margin: 3px 0 0; } - - // &__excerpts { - // grid-area: excerpts; - // display: inline; - // width: 100%; - // padding: 5px; - // margin: 0; - // @media (min-width: @width-breakpoint-tablet) { - // width: auto; - // } - // } -} \ No newline at end of file +} diff --git a/static/css/components/fulltext-search-suggestion.less b/static/css/components/fulltext-search-suggestion.less index 40b905c0d1c..fd9dba93b78 100644 --- a/static/css/components/fulltext-search-suggestion.less +++ b/static/css/components/fulltext-search-suggestion.less @@ -2,34 +2,27 @@ * Search Result Item * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#searchresultitem */ -// @import "buttonBtn.less"; -// @import "buttonCta.less"; - - .bookauthor { - font-family: @lucida_sans_serif-6; - font-weight: 500; - } - - .fulltext-suggestions{ - list-style-type: none; - line-height: 1.5em; - background-color: @grey-fafafa; - border-radius: 5px; - padding: 5px; - margin-bottom: 3px; - border-bottom: 1px solid @light-beige; - .display-flex(); - flex-direction: column; - - &__header { + +.fulltext-suggestions{ + list-style-type: none; + line-height: 1.5em; + background-color: @grey-fafafa; + border-radius: 5px; + padding: 5px; + margin-bottom: 3px; + border-bottom: 1px solid @light-beige; + .display-flex(); + flex-direction: column; + + &__header { display: flex; flex-direction: row; align-items: center; padding: 5px; margin-bottom: 3px; - } + } - &__title { + &__title { display: block; margin: 0; padding: 5px; @@ -39,10 +32,40 @@ @media (min-width: @width-breakpoint-tablet) { font-size: large; } - } + } + + &__title-link { + color: @black !important; + text-decoration: none !important; + } - &__icon { + &__icon { margin-top: 5px; - } -} + } + &__footer { + display: flex; + justify-content: flex-end; + margin: 0; + padding: 5px; + font-size: medium; + font-weight: 700; + font-family: @lucida_sans_serif-6; + @media (min-width: @width-breakpoint-tablet) { + font-size: large; + } + } + + &__footer-link { + display: flex; + align-items: center; + } + + &__right-chevron { + height: 20px; + } + + &__retry { + text-align: center; + } +} diff --git a/static/css/components/fulltext-suggestion-snippet.less b/static/css/components/fulltext-suggestion-snippet.less index 01ed534369b..641be7d3bed 100644 --- a/static/css/components/fulltext-suggestion-snippet.less +++ b/static/css/components/fulltext-suggestion-snippet.less @@ -1,5 +1,4 @@ .fsi-snippet { - grid-area: excerpts; display: inline; width: 70%; padding: 5px; @@ -17,13 +16,26 @@ padding: 5px; margin: 0 5px; line-height: 1.6em; - font-family: Georgia, 'Times New Roman', Times, serif + } + + &__quotation-mark { + font-size: larger; + display: inline; } &__page-num { - color: @dark-grey; - font-weight: 700; + color: @dark-grey !important; display: block; - } + text-decoration: none !important; + } } +//overrides + a:link { + text-decoration: none; + font-family: @georgia_serif-1; + color: @black; + } + a:hover { + color: @link-blue; + } \ No newline at end of file From 6e38dcaaabb27cec96d4130055edbd5e29bd090f Mon Sep 17 00:00:00 2001 From: merwhite11 Date: Fri, 12 Jul 2024 12:50:16 -0700 Subject: [PATCH 4/6] Edited header + loading indic text, quote hover, author font size Fixed header alignment, page num fix, tab specific message, authors --- .../macros/FulltextSearchSuggestion.html | 11 +++--- .../macros/FulltextSuggestionSnippet.html | 8 ++--- openlibrary/templates/search/authors.html | 8 ++++- openlibrary/templates/work_search.html | 8 +++-- .../fulltext-search-suggestion-item.less | 7 ++-- .../fulltext-search-suggestion.less | 22 ++++++++---- .../fulltext-suggestion-snippet.less | 35 +++++++++++-------- static/css/less/breakpoints.less | 1 + 8 files changed, 65 insertions(+), 35 deletions(-) diff --git a/openlibrary/macros/FulltextSearchSuggestion.html b/openlibrary/macros/FulltextSearchSuggestion.html index df14c0ef57c..c10171dc8e1 100644 --- a/openlibrary/macros/FulltextSearchSuggestion.html +++ b/openlibrary/macros/FulltextSearchSuggestion.html @@ -4,11 +4,11 @@ $:macros.FulltextSuggestionSnippet(query, doc=doc) $if results and results.get('hits'): - $ hits = results['hits'].get('hits', [])[:4] + $ hits = results['hits'].get('hits', [])[:5] $ num_found = commify(results['hits'].get('total', 0)) $ ia_base_url = "https://archive.org" - $:macros.LoadingIndicator(_("Fetching Search Inside Suggestions")) + $:macros.LoadingIndicator(_("Checking for Search Inside matches"))
@@ -16,8 +16,9 @@ width="30" height="30" alt="$_('search inside icon')"/> -

$_("Search Inside") +

+ $:_('Search Inside found these books with matching passages...')

$for doc in hits: @@ -31,4 +32,4 @@

-
+ \ No newline at end of file diff --git a/openlibrary/macros/FulltextSuggestionSnippet.html b/openlibrary/macros/FulltextSuggestionSnippet.html index 211643d1521..fdb2be21409 100644 --- a/openlibrary/macros/FulltextSuggestionSnippet.html +++ b/openlibrary/macros/FulltextSuggestionSnippet.html @@ -16,11 +16,11 @@
$_('❝')
…$:(snippet.replace("<", "«").replace(">", "»").replace("{{{", "").replace("}}}", ""))… - +  
$_('❞')
$if page: - -
$_('Page: %(page)s', page=page)
- +
+ $_('Page: %(page)s', page=page) +
diff --git a/openlibrary/templates/search/authors.html b/openlibrary/templates/search/authors.html index 82871bcf79e..448efdbe4b3 100644 --- a/openlibrary/templates/search/authors.html +++ b/openlibrary/templates/search/authors.html @@ -48,7 +48,13 @@

$_("Search Authors")

$_('Is the same author listed twice?') $_('Merge authors')
$else: -

$_('No hits')

+
+
$:_('No authors directly matched your search')
+
+
+
+ $:macros.LoadingIndicator(_("Checking Search Inside matches")) +
$elif q: -
- $_("No results found.") - $_('Search for books containing the phrase "%s"?', q) +
+
$:_('No lists directly matched your search')
+
+
+
+ $:macros.LoadingIndicator(_("Checking Search Inside matches"))
-
diff --git a/openlibrary/templates/search/subjects.html b/openlibrary/templates/search/subjects.html index 2928552c0c0..220c3fab657 100644 --- a/openlibrary/templates/search/subjects.html +++ b/openlibrary/templates/search/subjects.html @@ -27,7 +27,16 @@

$if q: $ response = get_results(q, offset=offset, limit=results_per_page) $if not response.error: -

$ungettext('%(count)s hit', '%(count)s hits', response.num_found, count=commify(response.num_found))

+ $if response.num_found: +

$ungettext('%(count)s hit', '%(count)s hits', response.num_found, count=commify(response.num_found))

+ $else: +
+
$:_('No subjects directly matched your search')
+
+
+
+ $:macros.LoadingIndicator(_("Checking Search Inside matches")) +
$if q and response.error: diff --git a/static/css/components/fulltext-search-suggestion.less b/static/css/components/fulltext-search-suggestion.less index 16a3074bed1..6b03361a92b 100644 --- a/static/css/components/fulltext-search-suggestion.less +++ b/static/css/components/fulltext-search-suggestion.less @@ -20,15 +20,20 @@ align-items: start; padding: 5px; margin-bottom: 3px; - img { - min-height: 30px; - min-width: 30px; - @media (min-width: @width-breakpoint-tablet) { - align-items: center; - } + } + + img { + min-height: 30px; + min-width: 30px; + @media (min-width: @width-breakpoint-tablet) { + align-items: center; } } + &__icon { + margin-top: 5px; + } + &__title { display: block; margin: 0; @@ -49,10 +54,6 @@ } } - &__icon { - margin-top: 5px; - } - &__footer { display: flex; justify-content: flex-end; From dbbde6e43db2e8eebda417e0e9adbf24c94e78ca Mon Sep 17 00:00:00 2001 From: merwhite11 Date: Thu, 18 Jul 2024 16:32:16 -0700 Subject: [PATCH 6/6] Added click trackers to all a tags --- bundlesize.config.json | 2 +- conf/openlibrary.yml | 6 +- openlibrary/i18n/messages.pot | 84 ++++++++++++++----- .../macros/FulltextSearchSuggestion.html | 10 +-- .../macros/FulltextSearchSuggestionItem.html | 4 +- .../macros/FulltextSuggestionSnippet.html | 4 +- openlibrary/plugins/openlibrary/code.py | 6 +- .../fulltext-search-suggestion-item.less | 20 +++-- .../fulltext-search-suggestion.less | 27 +++--- .../fulltext-suggestion-snippet.less | 21 +++-- static/css/less/breakpoints.less | 1 + .../images/icons/icon_big-quote-closing.svg | 1 - .../images/icons/icon_big-quote-opening.svg | 1 - 13 files changed, 118 insertions(+), 69 deletions(-) delete mode 100644 static/images/icons/icon_big-quote-closing.svg delete mode 100644 static/images/icons/icon_big-quote-opening.svg diff --git a/bundlesize.config.json b/bundlesize.config.json index 7097775d2fd..6e06baa217a 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -102,7 +102,7 @@ }, { "path": "static/build/page-user.css", - "maxSize": "27KB" + "maxSize": "27.05KB" } ] } diff --git a/conf/openlibrary.yml b/conf/openlibrary.yml index 702065f2f8e..80ec9a05c99 100644 --- a/conf/openlibrary.yml +++ b/conf/openlibrary.yml @@ -15,12 +15,10 @@ smtp_server: localhost dummy_sendmail: True debug: True -# coverstore_url: http://covers:7075 -coverstore_url: https://covers.openlibrary.org +coverstore_url: http://covers:7075 # URL to use inside HTML files; must be publicly accessible from # a client's browser -# coverstore_public_url: http://localhost:7075 -coverstore_public_url: https://covers.openlibrary.org +coverstore_public_url: http://localhost:7075 state_dir: var/run diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index c463ba8c654..1b02f77d596 100644 --- a/openlibrary/i18n/messages.pot +++ b/openlibrary/i18n/messages.pot @@ -1030,17 +1030,13 @@ msgstr "" msgid "Solr Editions" msgstr "" -#: admin/inspect/store.html search/lists.html work_search.html -msgid "No results found." -msgstr "" - -#: search/lists.html work_search.html +#: work_search.html #, python-format -msgid "Search for books containing the phrase \"%s\"?" +msgid "No %(path_id)s directly matched your search" msgstr "" -#: work_search.html -msgid "Add a new book to Open Library?" +#: search/authors.html search/lists.html search/subjects.html work_search.html +msgid "Checking Search Inside matches" msgstr "" #: account/reading_log.html search/authors.html search/subjects.html @@ -1490,8 +1486,8 @@ msgstr "" msgid "Thanks!" msgstr "" -#: BookByline.html SearchResultsWork.html account/notes.html -#: account/observations.html +#: BookByline.html FulltextSearchSuggestionItem.html SearchResultsWork.html +#: account/notes.html account/observations.html msgid "Unknown author" msgstr "" @@ -2668,6 +2664,10 @@ msgstr "" msgid "Json" msgstr "" +#: admin/inspect/store.html +msgid "No results found." +msgstr "" + #: admin/ip/index.html msgid "[Admin Center] IP Addresses" msgstr "" @@ -3688,10 +3688,10 @@ msgstr "" msgid "Links" msgstr "" -#: IABook.html SearchResultsWork.html books/edition-sort.html -#: jsdef/LazyWorkPreview.html lists/list_overview.html lists/preview.html -#: lists/snippet.html lists/widget.html my_books/dropdown_content.html -#: type/work/editions.html +#: FulltextSearchSuggestionItem.html IABook.html SearchResultsWork.html +#: books/edition-sort.html jsdef/LazyWorkPreview.html lists/list_overview.html +#: lists/preview.html lists/snippet.html lists/widget.html +#: my_books/dropdown_content.html type/work/editions.html #, python-format msgid "Cover of: %(title)s" msgstr "" @@ -6050,7 +6050,7 @@ msgid "Merge authors" msgstr "" #: search/authors.html -msgid "No hits" +msgid "No authors directly matched your search" msgstr "" #: search/inside.html @@ -6058,14 +6058,13 @@ msgstr "" msgid "Search Open Library for %s" msgstr "" -#: BookSearchInside.html SearchNavigation.html search/inside.html -#: search/snippets.html +#: BookSearchInside.html FulltextSearchSuggestion.html SearchNavigation.html +#: search/inside.html search/snippets.html msgid "Search Inside" msgstr "" #: search/inside.html -#, python-format -msgid "No hits for: %(query)s" +msgid "No Search Inside text matched your search" msgstr "" #: search/inside.html @@ -6090,6 +6089,10 @@ msgstr "" msgid "Search Lists" msgstr "" +#: search/lists.html +msgid "No lists directly matched your search" +msgstr "" + #: search/publishers.html msgid "Publishers Search" msgstr "" @@ -6155,6 +6158,10 @@ msgstr "" msgid "Search Subjects" msgstr "" +#: search/subjects.html +msgid "No subjects directly matched your search" +msgstr "" + #: search/subjects.html msgid "time" msgstr "" @@ -7325,10 +7332,49 @@ msgstr "" msgid "Expires" msgstr "" +#: FulltextSearchSuggestion.html +msgid "Checking for Search Inside matches" +msgstr "" + +#: FulltextSearchSuggestion.html +msgid "Search Inside Icon" +msgstr "" + +#: FulltextSearchSuggestion.html +msgid "search inside icon" +msgstr "" + +#: FulltextSearchSuggestion.html +#, python-format +msgid "%(book_count)s books found with matching passages" +msgstr "" + +#: FulltextSearchSuggestion.html +#, python-format +msgid "See all %(results_count)s Search Inside Matches" +msgstr "" + +#: FulltextSearchSuggestion.html +msgid "right chevron" +msgstr "" + #: FulltextSnippet.html msgid "See All Results" msgstr "" +#: FulltextSuggestionSnippet.html +msgid "❝" +msgstr "" + +#: FulltextSuggestionSnippet.html +msgid "❞" +msgstr "" + +#: FulltextSuggestionSnippet.html +#, python-format +msgid "Page: %(page)s" +msgstr "" + #: IABook.html #, python-format msgid "Borrowed from Internet Archive: %(title)s" diff --git a/openlibrary/macros/FulltextSearchSuggestion.html b/openlibrary/macros/FulltextSearchSuggestion.html index 8254bf6da20..30fd62fe4e2 100644 --- a/openlibrary/macros/FulltextSearchSuggestion.html +++ b/openlibrary/macros/FulltextSearchSuggestion.html @@ -4,28 +4,28 @@ $:macros.FulltextSuggestionSnippet(query, doc=doc) $if results and results.get('hits'): - $ hits = results['hits'].get('hits', [])[:5] + $ hits = results['hits'].get('hits', [])[:4] $ num_found = commify(results['hits'].get('total', 0)) $ ia_base_url = "https://archive.org" $:macros.LoadingIndicator(_("Checking for Search Inside matches"))
- + $_('search inside icon')

- $:_('Search Inside found these books with matching passages...') + $_("Search Inside") — $_('%(book_count)s books found with matching passages', book_count=num_found)

$for doc in hits: $if doc.get('edition'): $:macros.FulltextSearchSuggestionItem(doc['edition'], snippet=render_snippet(query, doc))

- $_('See all %(results_count)s Search Inside Matches', results_count=num_found) $_('right chevron') diff --git a/openlibrary/macros/FulltextSearchSuggestionItem.html b/openlibrary/macros/FulltextSearchSuggestionItem.html index 2cee03434b4..220c0baa071 100644 --- a/openlibrary/macros/FulltextSearchSuggestionItem.html +++ b/openlibrary/macros/FulltextSearchSuggestionItem.html @@ -45,7 +45,7 @@
$ cover = get_cover_url(selected_ed) or "/images/icons/avatar_book-sm.png" - +

- +

$_('❝')
- + …$:(snippet.replace("<", "«").replace(">", "»").replace("{{{", "").replace("}}}", ""))…  
$_('❞')
$if page:
- $_('Page: %(page)s', page=page) + $_('Page: %(page)s', page=page)
diff --git a/openlibrary/plugins/openlibrary/code.py b/openlibrary/plugins/openlibrary/code.py index a2f05c5b4f2..8ece430c8cd 100644 --- a/openlibrary/plugins/openlibrary/code.py +++ b/openlibrary/plugins/openlibrary/code.py @@ -1159,9 +1159,9 @@ def GET(self): if not hits['hits']: macro = '
' else: - macro = web.template.Template.globals['macros'].FulltextSearchSuggestion( - query, data - ) + macro = web.template.Template.globals[ + 'macros' + ].FulltextSearchSuggestion(query, data) partial = {"partials": str(macro)} return delegate.RawText(json.dumps(partial)) diff --git a/static/css/components/fulltext-search-suggestion-item.less b/static/css/components/fulltext-search-suggestion-item.less index 010ac785364..112a3e68f1f 100644 --- a/static/css/components/fulltext-search-suggestion-item.less +++ b/static/css/components/fulltext-search-suggestion-item.less @@ -52,10 +52,10 @@ flex-direction: column; padding: 5px 3px 0 10px; width: 50%; - @media (min-width: 375px) { + @media (min-width: @width-breakpoint-mobile-s) { width: 70% } - @media (min-width: 425px) { + @media (min-width: @width-breakpoint-mobile-m) { width: 80% } } @@ -67,19 +67,25 @@ overflow: hidden; text-overflow: ellipsis; font-family: @lucida_sans_serif-6; - } + } - &__book-title { + &__book-title { font-size: large; - margin: 0 !important; + margin: 0; display: block; padding: 0; font-weight: 700; line-height: 1.2em; } - &__book-title-link { - text-decoration: none !important; + &__book-title a:link, + &__book-title a:visited { + text-decoration: none; + color: @black; + } + + &__book-title a:hover { + color: @header-nav-hover-color; } &__book-author { diff --git a/static/css/components/fulltext-search-suggestion.less b/static/css/components/fulltext-search-suggestion.less index 6b03361a92b..168b5e06d7e 100644 --- a/static/css/components/fulltext-search-suggestion.less +++ b/static/css/components/fulltext-search-suggestion.less @@ -22,7 +22,8 @@ margin-bottom: 3px; } - img { + &__icon { + margin-top: 5px; min-height: 30px; min-width: 30px; @media (min-width: @width-breakpoint-tablet) { @@ -30,10 +31,6 @@ } } - &__icon { - margin-top: 5px; - } - &__title { display: block; margin: 0; @@ -56,24 +53,28 @@ &__footer { display: flex; - justify-content: flex-end; + justify-content: center; margin: 0; padding: 5px; - font-size: medium; + font-size: small; font-weight: 700; font-family: @lucida_sans_serif-6; + @media (min-width: @width-breakpoint-mobile-m) { + font-size: medium; + } @media (min-width: @width-breakpoint-tablet) { font-size: large; + justify-content: end; } } - &__footer-link { - display: flex; - align-items: center; - } - &__right-chevron { - height: 20px; + max-height: 20px; + max-width: 20px; + display: none; + @media (min-width: @width-breakpoint-mobile-m) { + display: inline; + } } &__retry { diff --git a/static/css/components/fulltext-suggestion-snippet.less b/static/css/components/fulltext-suggestion-snippet.less index 2f47a19bd21..7e8d12be771 100644 --- a/static/css/components/fulltext-suggestion-snippet.less +++ b/static/css/components/fulltext-suggestion-snippet.less @@ -16,18 +16,25 @@ padding: 5px; margin: 0 5px; line-height: 1.6em; + + &__page-num a { + color: @dark-grey; + display: inline; + text-decoration: none; + font-family: @lucida_sans_serif-1; + } + a:link, a:hover, a:visited { text-decoration: none; } + a:link { font-family: @georgia_serif-1; color: @black; } - a:visited { - color: @black; - } + a:hover { color: @link-blue; } @@ -37,12 +44,4 @@ font-size: larger; display: inline; } - - &__page-num { - color: @dark-grey !important; - display: inline; - text-decoration: none !important; - font-family: @lucida_sans_serif-1 !important; - } } - diff --git a/static/css/less/breakpoints.less b/static/css/less/breakpoints.less index 55939ed5b8d..8dea0230664 100644 --- a/static/css/less/breakpoints.less +++ b/static/css/less/breakpoints.less @@ -1,3 +1,4 @@ +@width-breakpoint-mobile-s: 375px; @width-breakpoint-mobile-m: 425px; @width-breakpoint-mobile: 450px; @width-breakpoint-tablet: 768px; // 48em diff --git a/static/images/icons/icon_big-quote-closing.svg b/static/images/icons/icon_big-quote-closing.svg deleted file mode 100644 index 0a9573958d8..00000000000 --- a/static/images/icons/icon_big-quote-closing.svg +++ /dev/null @@ -1 +0,0 @@ - quote \ No newline at end of file diff --git a/static/images/icons/icon_big-quote-opening.svg b/static/images/icons/icon_big-quote-opening.svg deleted file mode 100644 index 9dc49913b15..00000000000 --- a/static/images/icons/icon_big-quote-opening.svg +++ /dev/null @@ -1 +0,0 @@ - quote \ No newline at end of file