Merge pull request #9412 from cdrini/fix/styling

Fixes to lists-showcase styling/code

openlibrary/i18n/messages.pot

@@ -507,9 +507,9 @@ msgstr ""
 msgid "See more books by, and learn about, this author"
 msgstr ""
 
-#: account/loans.html authors/index.html publishers/view.html
-#: search/authors.html search/publishers.html search/subjects.html
-#: subjects.html
+#: account/loans.html authors/index.html lists/showcase.html
+#: publishers/view.html search/authors.html search/publishers.html
+#: search/subjects.html subjects.html
 #, python-format
 msgid "%(count)d book"
 msgid_plural "%(count)d books"
@@ -4481,6 +4481,15 @@ msgstr ""
 msgid "by <a href=\"$owner.key\">You</a>"
 msgstr ""
 
+#: lists/showcase.html
+#, python-format
+msgid "My Lists (%(count)d)"
+msgstr ""
+
+#: lists/showcase.html
+msgid "You have no lists."
+msgstr ""
+
 #: lists/widget.html
 #, python-format
 msgid "%(count)d List"

openlibrary/templates/lists/showcase.html

@@ -1,46 +1,45 @@
-$def with (lists = [], username = "")
+$def with (lists, username)
 
 
-$ default_image_url = "/images/icons/avatar_book-sm.png"
-$ total_lists = lists[0:min(len(lists), 5)]
-$ all_lists_url = "/people/%s/lists" % username
-
-$def showcase(list):
+$def list_card(list):
     $ cached_info = list.get_patron_showcase()
-    $ title = cached_info["title"] if len(cached_info["title"]) < 16 else cached_info["title"][0:16] + "..."
     $ count = cached_info["count"]
-    $ list_url = list.get_url()
-    $ cover_urls = [cover_url if cover_url else default_image_url for cover_url in cached_info["covers"]]
-    <div class="my-list">
-        <a href = $list_url>
-            <div class = "my-lists-item">
-                <div class="my-list-name-tag">
-                    <p class = "my-list-title">$title</p>
-                    $if count == 1:
-                        <p class = "my-list-num-books"> $count book</p>
-                    $else:
-                        <p class = "my-list-num-books"> $count books</p>
-                </div>
-                <div class = "my-list-covers">
-                    $ cover = 0
-                    $for img_url in cover_urls:
-                        <img src = "$img_url" class ="book-cover my-list-cover cover-$cover" loading="lazy">
-                        $ cover +=1
-                </div>
+    <a class="list-card" href="$list.get_url()">
+        <div class="list-card__covers">
+            $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">
+        </div>
+        <div class="list-card__name-tag">
+            <div class="list-card__title">$cached_info["title"]</div>
+            <div class="list-card__num-books">
+                $ungettext("%(count)d book", "%(count)d books", count, count=count)
             </div>
-        </a>
-    </div>
-<div class = "carousel-section">
+        </div>
+    </a>
+
+
+<div class="carousel-section">
     <div class="carousel-section-header">
-        <h2 class = "home-h2">
-                <a href = $all_lists_url> My Lists ($len(lists))</a>
+        <h2 class="home-h2">
+            <a href="/people/$username/lists">$_('My Lists (%(count)d)', count=len(lists))</a>
         </h2>
     </div>
-    <div class="my-lists showcase">
-        $if lists and len(total_lists)>0:
-            $for list in total_lists:
-                $:showcase(list)
+    <div class="list-showcase">
+        $if lists:
+            $ displayed_lists = 5
+            $for list in lists[:displayed_lists]
+                $:list_card(list)
+
+            $if len(lists) > displayed_lists:
+                <a
+                    class="list-showcase__see-all cta-btn cta-btn--vanilla"
+                    href="/people/$username/lists"
+                >$_("See all")</a>
         $else:
-            <p>You have no lists.</p>
+            <p>$_('You have no lists.')</p>
     </div>
 </div>

static/css/components/list-showcase.less

@@ -1,93 +1,112 @@
 @import (less) "../less/colors.less";
+@import (less) "../less/font-families.less";
 @import (less) "components/read-panel.less";
 @import (less) "components/book.less";
 
-@my-lists-item-border: black;
-.my-lists.showcase {
+.list-showcase {
   display: flex;
-  overflow-x: clip;
-  mask-image: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 1) 0%,
-    rgba(0, 0, 0, 1) calc(100% - 100px),
-    rgba(0, 0, 0, 0) 100%
-  );
+  overflow-x: auto;
+  scrollbar-width: thin;
+  padding: 8px 0;
+
+  .list-card {
+    margin-right: 24px;
+    flex-shrink: 0;
+  }
+
+  &__see-all {
+    margin-right: 24px;
+    align-self: center;
+    width: auto;
+  }
 }
 
-.my-lists-item {
+// stylelint-disable-next-line no-descending-specificity
+.list-card {
+  a& {
+    text-decoration: none;
+  }
+
+  display: flex;
+  flex-direction: column;
+
   background-color: @beige;
-  border: 1px solid @black;
+
+  @card-width: 215px;
+  width: @card-width;
+  height: 150px;
+
+  border: 1px solid fade(@black, 25%);
   border-radius: 4px;
-  box-shadow: 2px 2px 5px @gray-a19b9e;
-  width: 160px;
-  height: 120px;
-  position: relative;
-  padding-top: 20px;
-  padding-bottom: 40px;
-  margin: 20px 15px;
-}
+  box-shadow: 2px 2px 4px fade(@black, 15%);
 
-.my-list {
-  @name-tag-layer: 4;
-  &-name-tag {
-    border: 1px solid @black;
-    border-radius: 2px 2px 4px 4px;
-    box-shadow: 2px 2px 5px @gray-a19b9e;
-    background: @white;
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 35%;
-    padding-top: 3px;
-    padding-left: 4px;
-    z-index: @name-tag-layer;
-    overflow: hidden;
-    &>p{
-      text-wrap: nowrap;
-    }
+  &__name-tag {
+    background: @grey-f4f4f4;
+    padding: 7px 10px;
+
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 0 4px fade(@black, 25%);
   }
 
-  &-title {
-    margin: auto;
-    color: @black;
+  &__title {
     font-weight: bold;
+    font-size: @font-size-label-large;
+    color: @black;
+
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  &-num-books {
-    margin: auto;
-    padding: 0;
+  &__num-books {
     color: @grey-555;
-    font-size: .7em;
+    font-size: @font-size-label-medium;
   }
 
-  &-cover {
-    width: 33%;
-    margin-left: -5px;
-    box-shadow: 2.5px 2.5px 4px @gray-a19b9e;
-  }
+  &__covers {
+    @cover-width: 64px;
+    @padding: 20px;
+
+    flex: 1;
+    min-height: 1px; // fallback
+    overflow: clip;
 
-  &-covers {
     display: flex;
-    justify-content: center;
-    width: 80%;
-    margin: auto;
-  }
-}
+    align-items: center;
+    padding: 0 @padding;
 
-@top-cover: 3;
-@mid-cover: 2;
-@bottom-cover: 1;
-.cover-0 {
-  z-index: @top-cover;
-  margin-left: -5px;
-}
+    img {
+      width: @cover-width;
+      border-radius: 4px;
+      box-shadow: 4px 4px 0 fade(@black, 25%);
+    }
 
-.cover-1 {
-  z-index: @mid-cover;
+    @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);
+    }
+  }
 
-.cover-2 {
-  z-index: @bottom-cover;
+  // stylelint-disable-next-line no-descending-specificity
+  img {
+    transition: scale .2s;
+  }
 
+  &:hover img {
+    scale: 1.05;
+  }
 }