Small tweaks to lists-showcase

internetarchive · Jun 7, 2024 · 70e2272 · 70e2272
1 parent 9908275
commit 70e2272
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/openlibrary/templates/lists/showcase.html b/openlibrary/templates/lists/showcase.html
@@ -30,9 +30,15 @@ <h2 class="home-h2">
     </div>
     <div class="list-showcase">
         $if lists:
-            $ displayed_lists = lists[0:min(len(lists), 5)]
-            $for list in displayed_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>
     </div>

diff --git a/static/css/components/list-showcase.less b/static/css/components/list-showcase.less
@@ -6,16 +6,18 @@
 .list-showcase {
   display: flex;
   overflow-x: auto;
+  scrollbar-width: thin;
   padding: 8px 0;
-  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%
-  );
 
   .list-card {
     margin-right: 24px;
+    flex-shrink: 0;
+  }
+
+  &__see-all {
+    margin-right: 24px;
+    align-self: center;
+    width: auto;
   }
 }