From bcd7b9a8c6b9a93fb453248542314faf44e8524c Mon Sep 17 00:00:00 2001 From: Rebecca Shoptaw Date: Mon, 26 Aug 2024 12:10:39 -0400 Subject: [PATCH 1/3] Pass in mobile parameter for star ratings form --- openlibrary/macros/StarRatings.html | 2 +- openlibrary/macros/StarRatingsStats.html | 5 +++-- openlibrary/macros/databarWork.html | 4 ++-- openlibrary/templates/type/edition/modal_links.html | 5 +++-- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/openlibrary/macros/StarRatings.html b/openlibrary/macros/StarRatings.html index 5e2de9d652b..2b50ab067db 100644 --- a/openlibrary/macros/StarRatings.html +++ b/openlibrary/macros/StarRatings.html @@ -17,7 +17,7 @@ $if safeint(page) > 1: -
+
$ NUM_STARS = 5 $for star in range(1, NUM_STARS + 1) diff --git a/openlibrary/macros/StarRatingsStats.html b/openlibrary/macros/StarRatingsStats.html index ca843f893b0..9c45d561b3b 100644 --- a/openlibrary/macros/StarRatingsStats.html +++ b/openlibrary/macros/StarRatingsStats.html @@ -1,13 +1,14 @@ -$def with(work) +$def with(work, mobile=False) $ rating_stats = work and work.get_rating_stats() or {} $ stats_by_bookshelf = work and work.get_num_users_by_bookshelf() or {} $ avg = rating_stats.get('avg_rating') $ ratings_count = rating_stats.get('num_ratings', 0) $ review_count_class = 'readers-stats__review-count--none' if ratings_count == 0 else '' +$ id = '--mobile' if mobile else ''
    -
  • +
  • $if avg: $ stats_decimal = (float(avg))-(int(avg)) $:('★' * int(avg)) diff --git a/openlibrary/macros/databarWork.html b/openlibrary/macros/databarWork.html index d419991b2bf..1e4a0899d24 100644 --- a/openlibrary/macros/databarWork.html +++ b/openlibrary/macros/databarWork.html @@ -47,12 +47,12 @@

    $ render_times['databarWork: Modal Links - Desktop'] = time() - render_times['databarWork: Modal Links - Desktop']
    - $ star_ratings_stats = macros.StarRatingsStats(work) + $ star_ratings_stats = macros.StarRatingsStats(work, mobile=True) $:star_ratings_stats
    $ render_times['databarWork: Modal Links - Mobile'] = time() - $:render_template("type/edition/modal_links", work, edition, share_url) + $:render_template("type/edition/modal_links", work, edition, share_url, mobile=True) $ render_times['databarWork: Modal Links - Mobile'] = time() - render_times['databarWork: Modal Links - Mobile']
    diff --git a/openlibrary/templates/type/edition/modal_links.html b/openlibrary/templates/type/edition/modal_links.html index fa647aff971..03d71bdca6b 100644 --- a/openlibrary/templates/type/edition/modal_links.html +++ b/openlibrary/templates/type/edition/modal_links.html @@ -1,4 +1,4 @@ -$def with (work, edition, page_url) +$def with (work, edition, page_url, mobile=False) $def icon_link(link_class, img_src, link_text, login_redirect=True, ga_data=None): $ href = 'javascript:;' @@ -18,7 +18,8 @@ $ review_content = icon_link("observations-modal-link", "/static/images/icons/reviews.svg", _("Review"), ga_data="ModalLinkClick|ReviewIcon") $:macros.ObservationsModal(work, review_content, 'sidebar-review') - $:macros.StarRatings(work, edition) + $if mobile: + $:macros.StarRatings(work, edition, id="--mobile") $ notes_content = icon_link("notes-modal-link", "/static/images/icons/notes.svg", _("Notes"), ga_data="ModalLinkClick|NoteIcon") $:macros.NotesModal(work, edition, notes_content, 'sidebar-notes') From bf11a7aa075b35a1394b0e404c09130a15bc988c Mon Sep 17 00:00:00 2001 From: rebecca shoptaw Date: Mon, 26 Aug 2024 18:03:32 +0000 Subject: [PATCH 2/3] Add another mobile parameter to ensure links work --- openlibrary/templates/type/edition/view.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/openlibrary/templates/type/edition/view.html b/openlibrary/templates/type/edition/view.html index 72193c4ae7d..d726ec2a2cf 100644 --- a/openlibrary/templates/type/edition/view.html +++ b/openlibrary/templates/type/edition/view.html @@ -171,6 +171,7 @@ $ component_times['ReadlogStats'] = time() $ star_ratings_stats = macros.StarRatingsStats(work) +$ star_ratings_stats_mobile = macros.StarRatingsStats(work, mobile=True) $ component_times['ReadlogStats'] = time() - component_times['ReadlogStats'] $ component_times['get_observation_metrics'] = time() @@ -205,7 +206,7 @@ $:macros.EditionNavBar(reader_observations, work.edition_count, show_observations) - $:render_template("type/edition/title_and_author", page, work, edition, ocaid, work_title, star_ratings_stats, for_desktop=False) + $:render_template("type/edition/title_and_author", page, work, edition, ocaid, work_title, star_ratings_stats_mobile, for_desktop=False)
    $:macros.databarWork(edition or work, worldcat_links, affiliate_links, editions_page=True, render_times=component_times)
    From 88926947e56148335ed7e52bc3495cce08ef5ea8 Mon Sep 17 00:00:00 2001 From: rebecca shoptaw Date: Mon, 26 Aug 2024 18:08:38 +0000 Subject: [PATCH 3/3] Use new mobile params to tidy up CSS --- openlibrary/macros/StarRatings.html | 2 +- .../templates/type/edition/modal_links.html | 2 +- static/css/components/read-panel.less | 14 ++++++-------- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/openlibrary/macros/StarRatings.html b/openlibrary/macros/StarRatings.html index 2b50ab067db..55f429a3c3e 100644 --- a/openlibrary/macros/StarRatings.html +++ b/openlibrary/macros/StarRatings.html @@ -6,7 +6,7 @@ $ edition_key = edition.key if edition else "" $ form_id = "ratingsForm%s" % id -
    diff --git a/openlibrary/templates/type/edition/modal_links.html b/openlibrary/templates/type/edition/modal_links.html index 03d71bdca6b..0fa39702a83 100644 --- a/openlibrary/templates/type/edition/modal_links.html +++ b/openlibrary/templates/type/edition/modal_links.html @@ -13,7 +13,7 @@
    $link_text
    -
    +
    $if work and work.get('key', ''): $ review_content = icon_link("observations-modal-link", "/static/images/icons/reviews.svg", _("Review"), ga_data="ModalLinkClick|ReviewIcon") $:macros.ObservationsModal(work, review_content, 'sidebar-review') diff --git a/static/css/components/read-panel.less b/static/css/components/read-panel.less index 6854212955e..3424edb2c88 100644 --- a/static/css/components/read-panel.less +++ b/static/css/components/read-panel.less @@ -166,8 +166,6 @@ /* stylelint-disable selector-max-specificity */ .mobile-vendor, .cta-button-group.mobile, - #read-options > .modal-links > .star-rating-form, - .lists-widget-container > #ratingsForm > .star-rating__not-rated, .readers-stats__wrapper.mobile { display: none; } @@ -192,16 +190,16 @@ .Tools .btn-notice, .read-options { border: none; - // Hide desktop version of modal links and ratings form on mobile - /* stylelint-disable selector-max-specificity */ + // Hide border for desktop version of modal links and ratings form on mobile /* stylelint-disable no-descending-specificity */ - &> hr, - &> .lists-widget-container > #ratingsForm, - &> .modal-links { + &> hr { display: none; } /* stylelint-enable no-descending-specificity */ - /* stylelint-enable selector-max-specificity */ + } + + .star-rating-form.desktop, .modal-links.desktop { + display: none; } .cta-button-group.mobile {