From 07c60eaaf4a035183826c5260ec94aa7b08a2f19 Mon Sep 17 00:00:00 2001 From: ananyakaligal Date: Mon, 20 Jan 2025 01:37:42 +0530 Subject: [PATCH 1/5] preview button added --- openlibrary/macros/BookPreview.html | 8 +++++--- openlibrary/macros/SearchResultsWork.html | 4 ++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/openlibrary/macros/BookPreview.html b/openlibrary/macros/BookPreview.html index 24053f3c955..aff43ed6394 100644 --- a/openlibrary/macros/BookPreview.html +++ b/openlibrary/macros/BookPreview.html @@ -1,11 +1,13 @@ -$def with (ocaid, analytics_attr, show_only=False) +$def with (ocaid, analytics_attr=None, show_only=False) $# :param str ocaid: +$ analytics = analytics_attr('Preview') if analytics_attr else "CTAClick|Preview" +
$(_('Preview Only') if show_only else _('Preview')) + data-iframe-link="https://archive.org/details/$ocaid" + $:analytics href="#bookPreview">$(_('Preview Only') if show_only else _('Preview'))
$if render_once('book-preview-floater'): diff --git a/openlibrary/macros/SearchResultsWork.html b/openlibrary/macros/SearchResultsWork.html index 06d3ef850c9..dad6e78ef97 100644 --- a/openlibrary/macros/SearchResultsWork.html +++ b/openlibrary/macros/SearchResultsWork.html @@ -1,5 +1,8 @@ $def with (doc, decorations=None, cta=True, availability=None, extra=None, attrs=None, rating=None, show_librarian_extras=False, include_dropper=False, blur=False, footer=None) +$ availability = (doc.availability or {}) if hasattr(doc, 'availability') else {} +$ ocaid = doc.get('ocaid') or availability.get('identifier') + $code: max_rendered_authors = 9 doc_type = ( @@ -58,6 +61,7 @@ alt="$_('Cover of: %(title)s', title=full_title)" title="$_('Cover of: %(title)s', title=full_title)" /> + $:macros.BookPreview(ocaid,show_only=False)
From 5664b1140b135b67a7c2f9288a9822acadef7df4 Mon Sep 17 00:00:00 2001 From: ananyakaligal Date: Mon, 27 Jan 2025 23:23:38 +0530 Subject: [PATCH 2/5] preview-link not rendering --- openlibrary/macros/BookPreview.html | 5 +-- openlibrary/macros/LoanStatus.html | 4 +-- openlibrary/macros/SearchResultsWork.html | 2 +- static/css/components/read-panel.less | 39 +++++++++++++++++++++++ 4 files changed, 45 insertions(+), 5 deletions(-) diff --git a/openlibrary/macros/BookPreview.html b/openlibrary/macros/BookPreview.html index aff43ed6394..4fabf719505 100644 --- a/openlibrary/macros/BookPreview.html +++ b/openlibrary/macros/BookPreview.html @@ -1,10 +1,11 @@ -$def with (ocaid, analytics_attr=None, show_only=False) +$def with (ocaid, analytics_attr=None, show_only=False, vanilla=True) $# :param str ocaid: $ analytics = analytics_attr('Preview') if analytics_attr else "CTAClick|Preview" +$ button = "cta-btn cta-btn--preview" if vanilla else "cta-btn--preview-link"
- $(_('Preview Only') if show_only else _('Preview')) diff --git a/openlibrary/macros/LoanStatus.html b/openlibrary/macros/LoanStatus.html index 179ae0199e6..2264ffca8b1 100644 --- a/openlibrary/macros/LoanStatus.html +++ b/openlibrary/macros/LoanStatus.html @@ -126,8 +126,8 @@ >$_("Checked Out")
-$elif ocaid and availability.get('is_previewable') and book_provider.short_name == 'ia': - $:macros.BookPreview(ocaid, analytics_attr, show_only=True) +$elif True: + $:macros.BookPreview(ocaid,show_only=True, vanilla=False) $if secondary_action: $:macros.BookSearchInside(ocaid) diff --git a/openlibrary/macros/SearchResultsWork.html b/openlibrary/macros/SearchResultsWork.html index dad6e78ef97..203bd3e8498 100644 --- a/openlibrary/macros/SearchResultsWork.html +++ b/openlibrary/macros/SearchResultsWork.html @@ -61,7 +61,7 @@ alt="$_('Cover of: %(title)s', title=full_title)" title="$_('Cover of: %(title)s', title=full_title)" /> - $:macros.BookPreview(ocaid,show_only=False) + $:macros.BookPreview(ocaid,show_only=False, vanilla=False)
diff --git a/static/css/components/read-panel.less b/static/css/components/read-panel.less index bb035f9ae1d..f491a8d9f0b 100644 --- a/static/css/components/read-panel.less +++ b/static/css/components/read-panel.less @@ -14,6 +14,45 @@ display: none; } +.cta-btn--preview-link { + color: @primary-blue; + text-decoration: none; + position: relative; + margin-top: -15px; // offsets Illustration margin-bottom: 10px + margin-bottom: 5px; + padding: 5px 20px 10px; // Increasing click area for mobile text link + background-color: transparent; + + // When Preview button is a text link, have it take up only the width + // of the content (not full 100% width) + flex-basis: content; + flex-grow: 0; + width: auto; + + /* stylelint-disable selector-max-specificity */ + &:hover { + text-decoration: underline; + } + + &::before { + width: 22px; + height: 18px; + display: inline-block; + margin-right: 6px; + position: relative; + top: 2px; + + // Setting pseudo-element content to book icon; mask is used to allow for a 'fill' color + content: ""; + -webkit-mask: url(../images/icons/open-book.svg); + mask: url(../images/icons/open-book.svg); + -webkit-mask-size: cover; + mask-size: cover; + background-color: @primary-blue; + } + /* stylelint-enable selector-max-specificity */ +} + .read-options, .Tools .btn-notice { font-size: 1em; From c5e9c8f3f477ebfc7e07c598a8c468d00d58d604 Mon Sep 17 00:00:00 2001 From: ananyakaligal Date: Mon, 27 Jan 2025 23:33:30 +0530 Subject: [PATCH 3/5] preview-link not rendering --- openlibrary/macros/BookPreview.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/openlibrary/macros/BookPreview.html b/openlibrary/macros/BookPreview.html index 4fabf719505..d24ffcd87e5 100644 --- a/openlibrary/macros/BookPreview.html +++ b/openlibrary/macros/BookPreview.html @@ -2,10 +2,10 @@ $# :param str ocaid: $ analytics = analytics_attr('Preview') if analytics_attr else "CTAClick|Preview" -$ button = "cta-btn cta-btn--preview" if vanilla else "cta-btn--preview-link" +$ button = "cta-btn--preview" if vanilla else "cta-btn--preview-link"
- $(_('Preview Only') if show_only else _('Preview')) From be8be4f954105ffc0a9ee648936c04f283a0031b Mon Sep 17 00:00:00 2001 From: ananyakaligal Date: Mon, 27 Jan 2025 23:52:54 +0530 Subject: [PATCH 4/5] preview-link not rendering --- openlibrary/plugins/openlibrary/js/dialog.js | 2 +- openlibrary/plugins/openlibrary/js/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/openlibrary/plugins/openlibrary/js/dialog.js b/openlibrary/plugins/openlibrary/js/dialog.js index 2274e9ab912..846b8e0d5cb 100644 --- a/openlibrary/plugins/openlibrary/js/dialog.js +++ b/openlibrary/plugins/openlibrary/js/dialog.js @@ -51,7 +51,7 @@ function initConfirmationDialogs() { export function initPreviewDialogs() { // Colorbox modal + iframe for Book Preview Button - const $buttons = $('.cta-btn--preview'); + const $buttons = $('.cta-btn--preview, .cta-btn--preview-link'); $buttons.each((i, button) => { const $button = $(button); $button.colorbox({ diff --git a/openlibrary/plugins/openlibrary/js/index.js b/openlibrary/plugins/openlibrary/js/index.js index 3a218379a17..0472ff3da7e 100644 --- a/openlibrary/plugins/openlibrary/js/index.js +++ b/openlibrary/plugins/openlibrary/js/index.js @@ -363,7 +363,7 @@ jQuery(function () { } // TODO: Make these selectors a consistent interface - const $dialogs = $('.dialog--open,.dialog--close,#noMaster,#confirmMerge,#leave-waitinglist-dialog,.cta-btn--preview'); + const $dialogs = $('.dialog--open,.dialog--close,#noMaster,#confirmMerge,#leave-waitinglist-dialog,.cta-btn--preview,.cta-btn--preview-link'); if ($dialogs.length) { import(/* webpackChunkName: "dialog" */ './dialog') .then(module => module.initDialogs()) From 7f0dae7dac72a1a696627e1ea7d5d71ed991f066 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 27 Jan 2025 18:23:49 +0000 Subject: [PATCH 5/5] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- openlibrary/macros/BookPreview.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/openlibrary/macros/BookPreview.html b/openlibrary/macros/BookPreview.html index d24ffcd87e5..fef7abe8001 100644 --- a/openlibrary/macros/BookPreview.html +++ b/openlibrary/macros/BookPreview.html @@ -7,7 +7,7 @@
$(_('Preview Only') if show_only else _('Preview'))