Refactored for DRY avg code and conditional stats and styling

internetarchive · Aug 30, 2024 · 173c1b3 · 173c1b3
1 parent 0993b96
commit 173c1b3
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 55 deletions.
diff --git a/openlibrary/macros/SearchResultsWork.html b/openlibrary/macros/SearchResultsWork.html
@@ -61,12 +61,10 @@
     </span>
 
     <div class="details">
-        <div class="resultTitle">
-          <h3 itemprop="name" class="booktitle">
-            <a itemprop="url" href="$work_edition_url" class="results">$full_title</a>
-          </h3>
-        </div>
-        <span itemprop="author" itemscope itemtype="https://schema.org/Organization" class="bookauthor">
+        <h3 itemprop="name">
+          <a itemprop="url" href="$work_edition_url" class="results">$full_title</a>
+        </h3>
+        <span class="resultAuthor" itemprop="author" itemscope itemtype="https://schema.org/Organization" class="bookauthor">
           $ authors = None
           $if doc_type == 'infogami_work':
             $ authors = doc.get_authors()
@@ -88,23 +86,14 @@ <h3 itemprop="name" class="booktitle">
                 }
                 for a in authors
               ]
-            $:macros.BookByline(author_data, limit=max_rendered_authors, overflow_url=work_edition_url, attrs='class="results"')
+            $:macros.BookByline(author_data, limit=max_rendered_authors, overflow_url=work_edition_url)
         </span>
-        <span class="resultPublisher">
-          $if doc.get('ratings_count') and doc.get('ratings_average') and doc.get('want_to_read_count'):
-            $:macros.StarRatingsByline(doc)
-          $if doc.get('first_publish_year'):
-            <span class="publishedYear">
-              $_('First published in %(year)s', year=doc.first_publish_year)
-            </span>
-          $if doc.get('edition_count'):
-            <a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>
-          $if doc.get('languages'):
-            <span class="languages">
-              $:ungettext('in <a class="hoverlink" title="%(langs)s">%(count)d language</a>', 'in <a class="hoverlink" title="%(langs)s">%(count)d languages</a>', len(doc.languages), count=len(doc.languages), langs=commify_list([get_language_name('/languages/' + lang) for lang in doc.languages]))
-            </span>
+        <span class="resultStats">
+          $ ratings_count = doc.get('ratings_count', None)
+          $ ratings_avg = doc.get('ratings_average', None)
+          $ want_to_read_count = doc.get('want_to_read_count', None)
+          $:macros.StarRatingsByline(ratings_count, ratings_avg, want_to_read_count)
           $if doc.get('ia'):
-            &mdash; $_('%s previewable', len(doc.get('ia')))
             $if len(doc.get('ia')) > 1:
               $ blur_preview = "preview-covers--blur" if blur else ""
               <span class="preview-covers $blur_preview">
@@ -113,6 +102,20 @@ <h3 itemprop="name" class="booktitle">
                     <img width="30" height="45" loading="lazy" src="//archive.org/services/img/$i" alt="$_('Cover of edition %(id)s', id=i)">
                   </a>
               </span>
+          <span class="resultDetails">
+            $if doc.get('first_publish_year'):
+              <span>
+                $_('First published in %(year)s', year=doc.first_publish_year)
+              </span>&mdash;
+            $if doc.get('edition_count'):
+              <span>
+                <a href="$work_edition_all_url#editions-list">$ungettext('%(count)s edition', '%(count)s editions', doc.edition_count, count=doc.edition_count)</a>
+              </span>
+            $if doc.get('languages'):
+              <span class="languages">
+                $:ungettext('in <a class="hoverlink" title="%(langs)s">%(count)d language</a>', 'in <a class="hoverlink" title="%(langs)s">%(count)d languages</a>', len(doc.languages), count=len(doc.languages), langs=commify_list([get_language_name('/languages/' + lang) for lang in doc.languages]))
+              </span>
+          </span>
         </span>
         $if show_librarian_extras:
           <div class="searchResultItem__librarian-extras" title="$_('This is only visible to librarians.')">

diff --git a/openlibrary/macros/StarRatingsByline.html b/openlibrary/macros/StarRatingsByline.html
@@ -1,17 +1,13 @@
-$def with(doc)
+$def with(ratings_count, ratings_average, want_to_read_count)
 
-$ ratings_count = doc.get('ratings_count', None)
-$ ratings_average = doc.get('ratings_average', None)
+$ formatted_want_to_read_count = "{:,}".format(want_to_read_count)
 $ ratings_label = _('rating') if ratings_count == 1 else _('ratings')
-$ want_to_read_count = doc.get('want_to_read_count', None)
 
-<span class="publishedYear--ratings itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+<span class="ratingsByline itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   $if ratings_count:
-    $ stats_decimal = (float(ratings_average))-(int(ratings_average))
-    $:('<span class="reader-stats__star readers-stats__star--byline">★</span>' * int(ratings_average))
-    $if (stats_decimal >= 0.5) and (stats_decimal < 1):
-      $:('<span class="readers-stats__star--half reader-stats__star--byline">★</span>')
-    <span itemprop="ratingValue">$:_('%(ratings_avg)s (%(ratings_count)s %(ratings_label)s)', ratings_avg=ratings_average, ratings_count=ratings_count, ratings_label=ratings_label)</span>
-    <span class="dot">·</span>
-    <span itemprop="reviewCount">$_('%(want_to_read_count)s Want to read', want_to_read_count=want_to_read_count)</span>
-</span>
+    $:macros.StarRatingsComponent(ratings_count, ratings_average, 'results_page')
+</span>
+$if want_to_read_count > 0 and ratings_count > 0:
+  <span class="dot">·</span>
+$if want_to_read_count > 0:
+  <span class="ratingsByline" itemprop="reviewCount">$_('%(want_to_read_count)s Want to read', want_to_read_count=formatted_want_to_read_count)</span>
diff --git a/openlibrary/macros/StarRatingsComponent.html b/openlibrary/macros/StarRatingsComponent.html
@@ -0,0 +1,14 @@
+$def with(ratings_count, ratings_average, page_type)
+
+$ rounded_avg = "%.1f" % ratings_average
+$ formatted_ratings_count = "{:,}".format(ratings_count)
+$ ratings_label = _('rating') if ratings_count == 1 else _('ratings')
+$ star_class = 'readers-stats__star' if page_type == 'book_page' else 'readers-stats__star--byline'
+$ half_star_class = 'readers-stats__star--half' if page_type == 'book_page' else 'readers-stats__star--byline-half'
+
+$if ratings_average:
+  $ stats_decimal = (float(ratings_average) - int(ratings_average))
+    $:('<span class="{}">★</span>'.format(star_class) * int(ratings_average))
+    $if (stats_decimal >= 0.5) and (stats_decimal < 1):
+      $:('<span class="{}">★</span>'.format(half_star_class))
+    <span itemprop="ratingValue">$:_('%(ratings_avg)s (%(ratings_count)s %(ratings_label)s)', ratings_avg=rounded_avg, ratings_count=formatted_ratings_count, ratings_label=ratings_label)</span>
diff --git a/openlibrary/macros/StarRatingsStats.html b/openlibrary/macros/StarRatingsStats.html
@@ -4,11 +4,13 @@
 $ 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 ''
+$ want_to_read_count = "{:,}".format(stats_by_bookshelf.get('want-to-read', 0))
+$ currently_reading_count = "{:,}".format(stats_by_bookshelf.get('currently-reading', 0))
+$ already_read_count = "{:,}".format(stats_by_bookshelf.get('already-read', 0))
 $ 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$id';" data-ol-link-track="StarRating|StatsComponentClick">
+  <li class="avg-ratings" onclick="location.href='#starRatingSection';" data-ol-link-track="StarRating|StatsComponentClick">
     $if avg:
       $ stats_decimal = (float(avg))-(int(avg))
       $:('<span class="readers-stats__star">★</span>' * int(avg))
@@ -17,11 +19,10 @@
       <span itemprop="ratingValue">$avg</span>
       <span class="dot">·</span>
   </li>
-
-  <li class="readers-stats__review-count">
-    <span itemprop="reviewCount">$ratings_count</span> $ungettext("Rating", "Ratings", ratings_count, count=ratings_count)
-  </li>
-  <li class="reading-log-stat"><span class="readers-stats__stat">$stats_by_bookshelf.get('want-to-read', 0)</span> <span class="readers-stats__label">$_("Want to read")</span></li>
-  <li class="reading-log-stat"><span class="readers-stats__stat">$stats_by_bookshelf.get('currently-reading', 0)</span> <span class="readers-stats__label">$_("Currently reading")</span></li>
-  <li class="reading-log-stat"><span class="readers-stats__stat">$stats_by_bookshelf.get('already-read', 0)</span> <span class="readers-stats__label">$_("Have read")</span></li>
+  $if want_to_read_count > 0:
+    <li class="reading-log-stat"><span class="readers-stats__stat">$want_to_read_count</span> <span class="readers-stats__label">$_("Want to read")</span></li>
+  $if currently_reading_count > 0:
+    <li class="reading-log-stat"><span class="readers-stats__stat">$currently_reading_count</span> <span class="readers-stats__label">$_("Currently reading")</span></li>
+  $if already_read_count > 0:
+    <li class="reading-log-stat"><span class="readers-stats__stat">$already_read_count</span> <span class="readers-stats__label">$_("Have read")</span></li>
 </ul>
diff --git a/static/css/components/readerStats.less b/static/css/components/readerStats.less
@@ -12,7 +12,7 @@
     display: inline-block;
     padding-bottom: 10px;
 
-    &:not(:first-child,:last-child):after {
+    &:not(:last-child):after {
       content: "·";
       margin: 0 4px;
     }
@@ -35,6 +35,11 @@
     -webkit-text-fill-color: transparent;
   }
   &__star--byline {
+    color: @gold;
+    font-size: 1em;
+  }
+  &__star--byline-half {
+    color: @gold;
     font-size: 1em;
   }
 }
diff --git a/static/css/components/search-result-item.less b/static/css/components/search-result-item.less
@@ -40,9 +40,10 @@
     margin: 0;
     padding: 0;
     color: @dark-grey;
-    font-size: 1.0em;
+    font-size: 1.1em;
     font-weight: 700;
-    font-family: @lucida_sans_serif-6;
+    font-family: @georgia_serif-1;
+    overflow: auto;
   }
   .details {
     overflow: auto;
@@ -51,13 +52,8 @@
     padding: 5px;
     margin: 0;
   }
-  .resultTitle {
-    overflow: auto;
-    margin: 0 !important;
-    font-family: @lucida_sans_serif-1;
-    color: @grey;
-  }
-  span.resultPublisher {
+
+  span.resultStats {
     font-size: .75em;
     color: @grey;
     font-family: @lucida_sans_serif-6;
@@ -66,16 +62,18 @@
   span.resultType {
     font-size: .6875em;
   }
-  .publishedYear {
+  .resultDetails {
     display: block;
   }
-  .publishedYear--ratings {
+  .ratingsByline {
     color: @black;
   }
   .preview-covers {
     display: block;
     height: 45px;
     overflow: hidden;
+    margin-top: 10px;
+    margin-bottom: 5px;
   }
   .preview-covers img {
     border-radius: 4px;