Refactored for DRY avg code and conditional stats and styling

internetarchive · Aug 28, 2024 · 51edb5c · 51edb5c
1 parent 8e3602c
commit 51edb5c
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 59 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()
@@ -90,21 +88,12 @@ <h3 itemprop="name" class="booktitle">
               ]
             $:macros.BookByline(author_data, limit=max_rendered_authors, overflow_url=work_edition_url, attrs='class="results"')
         </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,8 @@
-$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)
 $ 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>
+    $:macros.StarRatingsGeneral(ratings_count, ratings_average, want_to_read_count, 'results_page')
 </span>
diff --git a/openlibrary/macros/StarRatingsGeneral.html b/openlibrary/macros/StarRatingsGeneral.html
@@ -0,0 +1,20 @@
+$def with(ratings_count, ratings_average, want_to_read_count, page_type)
+
+$ formatted_ratings_count = "{:,}".format(ratings_count)
+$ formatted_want_to_read_count = "{:,}".format(want_to_read_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 = round(float(ratings_average) - int(ratings_average), 1)
+    $:('<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=ratings_average, ratings_count=formatted_ratings_count, ratings_label=ratings_label)</span>
+    $if want_to_read_count > 0 and ratings_count > 0:
+      <span class="dot">·</span>
+    $if want_to_read_count > 0:
+      <span 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/StarRatingsStats.html b/openlibrary/macros/StarRatingsStats.html
@@ -4,23 +4,16 @@
 $ 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 = 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))
 
-<ul class="readers-stats  $review_count_class" itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+<ul class="readers-stats itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   <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))
-      $if (stats_decimal >= 0.5) and (stats_decimal < 1):
-        $:('<span class="readers-stats__star--half">★</span>')
-      <span itemprop="ratingValue">$avg</span>
-      <span class="dot">·</span>
+    $:macros.StarRatingsGeneral(ratings_count, avg, want_to_read_count, 'book_page')
   </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 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
@@ -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,10 +62,10 @@
   span.resultType {
     font-size: .6875em;
   }
-  .publishedYear {
+  .resultDetails {
     display: block;
   }
-  .publishedYear--ratings {
+  .ratingsByline {
     color: @black;
   }
   .preview-covers {
@@ -159,6 +155,10 @@
   }
 }
 
+.resultAuthor a {
+  color: @link-blue
+}
+
 @media only screen and (min-width: @width-breakpoint-tablet) {
   .list-books {
     .searchResultItem {