Pass in mobile parameter to conditionally render star ratings form

openlibrary/macros/StarRatings.html

@@ -6,7 +6,7 @@
 $ edition_key = edition.key if edition else ""
 $ form_id = "ratingsForm%s" % id
 
-<form class="star-rating-form" id="$form_id" method="POST" action="$(work.key)/ratings.json"
+<form class="star-rating-form $('mobile' if id == '--mobile' else 'desktop')" id="$form_id" method="POST" action="$(work.key)/ratings.json"
       property="reviewRating" typeof="Rating" vocab="http://schema.org/" data-work-key="$work.key">
   <meta property="worstRating" content="1"/>
   <meta property="bestRating" content="5"/>
@@ -17,7 +17,7 @@
     $if safeint(page) > 1:
       <input type="hidden" value="$page" name="page"/>
     <input type="hidden" value="$redir_url" name="redir_url"/>
-  <div class="review" id="starRatingSection">
+  <div class="review" id="starRatingSection$id">
     <div class="stars" data-ol-link-track="StarRating|BookRated">
       $ NUM_STARS = 5
       $for star in range(1, NUM_STARS + 1)

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 ''
 
 <ul class="readers-stats  $review_count_class" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
-  <li class="avg-ratings" onclick="location.href='#starRatingSection';" data-ol-link-track="StarRating|StatsComponentClick">
+  <li class="avg-ratings" onclick="location.href='#starRatingSection$id';" data-ol-link-track="StarRating|StatsComponentClick">
     $if avg:
       $ stats_decimal = (float(avg))-(int(avg))
       $:('<span class="readers-stats__star">★</span>' * int(avg))

openlibrary/macros/databarWork.html

@@ -47,12 +47,12 @@ <h3 class="header">
         $ render_times['databarWork: Modal Links - Desktop'] = time() - render_times['databarWork: Modal Links - Desktop']
 
         <div class="readers-stats__wrapper mobile">
-          $ star_ratings_stats = macros.StarRatingsStats(work)
+          $ star_ratings_stats = macros.StarRatingsStats(work, mobile=True)
           $:star_ratings_stats
 
           <hr>
           $ 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']
         </div>
 

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:;'
@@ -13,12 +13,13 @@
     <div class="icon-link__text">$link_text</div>
   </a>
 
-<div class="modal-links">
+<div class="modal-links $('mobile' if mobile else 'desktop')">
   $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')
 
-    $: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')

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 @@
     <!-- (mobile only) -->
     $:macros.EditionNavBar(reader_observations, work.edition_count, show_observations)
     <a id="overview-mobile" name="overview-mobile" class="section-anchor section-anchor--no-height"></a>
-    $: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)
     <div class="editionCover">
       $:macros.databarWork(edition or work, worldcat_links, affiliate_links, editions_page=True, render_times=component_times)
     </div>

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 {