9509/feature/adding following functionality to lists in book pages (#10926)

Adds followable List cards to book pages

---------

Co-authored-by: jimchamp <28732543+jimchamp@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 3 people

openlibrary/i18n/messages.pot

@@ -522,8 +522,8 @@ msgid "See more books by, and learn about, this author"
 msgstr ""
 
 #: ProlificAuthors.html account/loans.html authors/index.html
-#: lists/showcase.html publishers/view.html search/authors.html
-#: search/publishers.html search/subjects.html
+#: lists/list_follow.html lists/showcase.html publishers/view.html
+#: search/authors.html search/publishers.html search/subjects.html
 #, python-format
 msgid "%(count)d book"
 msgid_plural "%(count)d books"
@@ -3053,8 +3053,7 @@ msgstr ""
 msgid "My lists"
 msgstr ""
 
-#: account/sidebar.html type/edition/view.html type/user/view.html
-#: type/work/view.html
+#: account/sidebar.html type/user/view.html
 msgid "See All"
 msgstr ""
 
@@ -6422,10 +6421,14 @@ msgstr ""
 msgid "No description."
 msgstr ""
 
-#: lists/home.html lists/showcase.html
+#: lists/home.html lists/showcase.html lists/widget.html
 msgid "See all"
 msgstr ""
 
+#: lists/list_follow.html lists/widget.html my_books/dropdown_content.html
+msgid "You"
+msgstr ""
+
 #: lists/list_overview.html lists/widget.html my_books/dropdown_content.html
 msgid "See this list"
 msgstr ""
@@ -6519,10 +6522,6 @@ msgstr[1] ""
 msgid "from"
 msgstr ""
 
-#: lists/widget.html my_books/dropdown_content.html
-msgid "You"
-msgstr ""
-
 #: lists/widget.html
 msgid "Loading<span class=\"loading-ellipsis\">...</span>"
 msgstr ""

openlibrary/macros/Follow.html

@@ -1,15 +1,14 @@
-$def with (publisher, fid='', following=False)
+$def with (publisher, fid='', following=False, request_path='')
 
 $ subscriber = ctx.user and ctx.user.key
-
-
+$ custom_request_path = request_path if request_path != '' else request.fullpath
 <div>
   $if ctx.user:
     <form class="follow-form" id="follow_$fid" method="POST" action="$(subscriber)/follows.json"
           property="follow" typeof="Follows" vocab="http://schema.org/">
       <input type="hidden" value="$following" name="state"/>
       <input type="hidden" value="$publisher" name="publisher"/>
-      <input type="hidden" value="$request.fullpath" name="redir_url"/>
+      <input type="hidden" value="$custom_request_path" name="redir_url"/>
       $ css_treatment = 'delete' if following else 'primary'
       <button type="submit" class="cta-btn cta-btn--$(css_treatment)">$_("Unfollow" if following else "Follow")</button>
     </form>

openlibrary/plugins/openlibrary/lists.py

@@ -238,6 +238,14 @@ def get_user_lists(seed_info):
     return [get_list_data(user_list, seed) for user_list in user_lists]
 
 
+@public
+def convert_list(list):
+    site = web.ctx.site
+    data = site._load(list)
+    newList = List(site, list, data)
+    return newList
+
+
 class lists_partials(delegate.page):
     path = "/lists/partials"
     encoding = "json"

openlibrary/plugins/upstream/utils.py

@@ -1552,6 +1552,12 @@ def handle_endtag(self, tag):
         self.data.append('\n' if tag in ('p', 'li') else ' ')
 
 
+@public
+def get_user_object(username):
+    user = web.ctx.site.get(f'/people/{username}')
+    return user
+
+
 @public
 def reformat_html(html_str: str, max_length: int | None = None) -> str:
     """

openlibrary/templates/lists/list_follow.html

@@ -0,0 +1,61 @@
+$def with(lists, limit, user_key)
+
+$def render_follow_button(owner_username, is_subscribed):
+  $ request = "/people/" + owner_username
+  $:macros.Follow(owner_username, following=is_subscribed, request_path=request)
+
+$def list_card(list, owner, own_list):
+    $ has_owner = owner
+    $ cached_info = list.get_patron_showcase()
+    $ count = cached_info["count"]
+    <div class="list-follow-card">
+        <a class="list-follow-card__header" href="$list.get_url()">
+             <div class="list-follow-card__title">$cached_info["title"]</div>
+             <div class="list-follow-card__num-books">
+                 $ungettext("%(count)d book", "%(count)d books", count, count=count)
+             </div>
+        </a>
+        <a class="list-follow-card__covers" href="$list.get_url()">
+           $for img_url in cached_info["covers"]:
+               $if img_url:
+                   $ img_url = img_url.replace("-S.jpg", "-M.jpg")
+               $else:
+                   $ img_url = '/images/icons/avatar_book-sm.png'
+               <img src="$img_url" loading="lazy" width="80"/>
+        </a>
+        <div class="list-follow-card__bottom">
+            <div class="list-follow-card__user">
+                 <a href="$owner.key">
+                  <img src="$(owner.key)/avatar" />
+                 </a>
+                <div class="list-follow-card__username">
+                    <a class="list-follow-card__username-link" href="$owner.key">
+                      $if not own_list:
+                        $ owner_username = owner.key.split('/')[-1]
+                        $('@' + owner_username)
+                      $else:
+                        $_('You')
+                    </a>
+                </div>
+            </div>
+            <div class="list-follow-card__follow-button">
+               $if not own_list:
+                 $ owner_username = owner.key.split('/')[-1]
+                 $ owner_account = get_user_object(owner_username)
+                 $ is_subscribed = ctx.user and ctx.user.is_subscribed_user(owner_username)
+                 $ settings = owner_account.get_users_settings()
+                 $ is_public = settings and settings.get('public_readlog', 'no') == "yes"
+                 $if is_public:
+                    $:render_follow_button(owner_username, is_subscribed)
+            </div>
+        </div>
+    </div>
+
+$ count = 0
+$for i, list in enumerate(lists):
+    $if count < limit:
+      $ own_list = list.owner and list.owner.key == user_key
+      $ converted = convert_list(list.key)
+      $:list_card(converted, list.owner, own_list)
+      $ count = count + 1
+

openlibrary/templates/lists/widget.html

@@ -26,19 +26,6 @@
         $if list['active']:
             $:render_template('lists/list_overview', list, user_key, seed_info)
 
-$def render_widget_display(lists, limit, user_key, exclude_own_lists):
-    $ count = 0
-    $for i, list in enumerate(lists):
-        $if count < limit:
-            $if exclude_own_lists:
-                $ own_list = list.owner and list.owner.key == user_key
-                $if not own_list:
-                    $:render_template('lists/list_overview', list, user_key, seed_info)
-                    $ count = count + 1
-            $else:
-                $:render_template('lists/list_overview', list, user_key, seed_info)
-                $ count = count + 1
-
 $def render_head(page_lists, page_url):
     <div>
       <h3 class="header">
@@ -67,6 +54,18 @@ <h3 class="header">
     $ }
   <input type="hidden" name="list-i18n-strings" value="$json_encode(show_list_i18n_strings)">
 
+$def render_showcase():
+  <div class="carousel-section">
+    <div class="list-follow-showcase">
+      $:render_template('lists/list_follow', page_lists, 5, user_key)
+      $if len(page_lists) > 5:
+          <a
+            class="list-follow-showcase__see-all cta-btn cta-btn--vanilla"
+             href="$page.url()/lists"
+            >$_("See all")</a>
+    </div>
+  </div>
+
 $if include_widget:
   $if render_once('lists/widget.i18n-strings'):
     $:i18n_input()
@@ -78,14 +77,12 @@ <h3 class="header">
         $if async_load:
           <div class="list-overview-loading-indicator">$:_('Loading<span class="loading-ellipsis">...</span>')</div>
         $else:
-          $:render_already_lists(user_lists, user_key)
+          $:render_showcase()
     </ul>
   $if work and include_rating:
     $:macros.StarRatings(work, edition)
 
 $if include_showcase:
-  <ul id="list-lists" class="listLists">
-    $:render_widget_display(page_lists, 3, user_key, exclude_own_lists)
-  </ul>
+  $:render_showcase()
 
 </div>

openlibrary/templates/type/edition/view.html

@@ -544,7 +544,6 @@ <h4>$:_('Links <span class="gray small sansserif">outside Open Library</span>')<
         <div class="workFooter tab-section lists-section" data-ids="$json_encode(data_ids)">
           <div class="lists-heading">
             <h2 class="lists-title">$_('Lists')</h2>
-            <a class="hidden" href="$page.url()/lists">$_('See All')</a>
           </div>
           <div class="user-book-options">
             <div class="Tools tools-override">

static/css/components/list-follow.less

@@ -0,0 +1,178 @@
+@import (less) "../less/colors.less";
+@import (less) "../less/font-families.less";
+@import (less) "components/read-panel.less";
+@import (less) "components/book.less";
+
+.list-follow-showcase {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  padding: 8px 0;
+
+  .list-follow-card {
+    margin-right: 24px;
+    flex-shrink: 0;
+  }
+
+  &__see-all {
+    margin-right: 24px;
+    align-self: center;
+    width: auto;
+  }
+}
+
+// stylelint-disable-next-line no-descending-specificity
+.list-follow-card {
+  a& {
+    text-decoration: none;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  background-color: @beige;
+
+  @card-width: 215px;
+  width: @card-width;
+  height: 150px;
+
+  border: 1px solid fade(@black, 25%);
+  border-radius: 4px;
+  box-shadow: 2px 2px 4px fade(@black, 15%);
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 7px 10px;
+    border-radius: 0 0 4px 4px;
+    a& {
+      text-decoration: none;
+    }
+  }
+  &__name-avatar {
+    display: flex;
+  }
+  &__bottom {
+    background: @grey-f4f4f4;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 5px;
+    padding-top: 5px;
+  }
+  &__user {
+    display: flex;
+    align-items: center;
+    font-size: @font-size-label-medium;
+    padding-left: 5px;
+
+    img {
+      border-radius: 8px;
+      width: 30px;
+      height: 30px;
+      margin-right: 5px;
+      margin-top: -10px;
+      position: relative;
+      z-index: @z-index-level-3;
+      border: 2px solid @white;
+    }
+  }
+
+  &__username {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    padding-bottom: 5px;
+  }
+  &__username-link {
+    a& {
+      text-decoration: none;
+      color: @dark-grey-two;
+      padding-bottom: 5px;
+    }
+  }
+  &__text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__follow-button {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: 5px;
+    padding-bottom: 3px;
+    .cta-btn {
+      font-size: 12px; // Override base size
+      padding: 1px 10px; // Less padding
+      border-radius: 4px; // Custom radius
+      box-shadow: none; // Remove default shadow if present
+      margin: 0;
+    }
+  }
+  &__title {
+    font-weight: bold;
+    font-size: @font-size-label-large;
+    color: @black;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__num-books {
+    color: @grey-555;
+    font-size: @font-size-label-medium;
+  }
+  &__info {
+    flex: 1;
+    flex-direction: row;
+  }
+  &__covers {
+    @cover-width: 64px;
+    @padding: 20px;
+
+    flex: 1;
+    min-height: 1px; // fallback
+    overflow: clip;
+
+    display: flex;
+    align-items: center;
+    padding: 0 @padding;
+
+    img {
+      width: @cover-width;
+      border-radius: 4px;
+      box-shadow: 4px 4px 0 fade(@black, 25%);
+    }
+
+    @top-cover: 3;
+    @mid-cover: 2;
+    @bottom-cover: 1;
+
+    @overlap: ((3 * @cover-width - (@card-width - 2 * @padding)) / 2);
+
+    img:nth-child(1) {
+      z-index: @top-cover;
+      transform: translate(0, @padding);
+    }
+    img:nth-child(2) {
+      z-index: @mid-cover;
+      transform: translate(-@overlap, @padding);
+    }
+    img:nth-child(3) {
+      z-index: @bottom-cover;
+      transform: translate(-2 * @overlap, @padding);
+    }
+    &:hover img {
+      scale: 1.05;
+    }
+  }
+
+  // stylelint-disable-next-line no-descending-specificity
+  img {
+    transition: scale 0.2s;
+  }
+}