Improved Card Component for Community Lists (internetarchive#11104)

* New lists render for community
* Added alt text to openlibrary avatar

Author: krishnaGauss

openlibrary/i18n/messages.pot

@@ -6300,6 +6300,14 @@ msgstr ""
 msgid "You"
 msgstr ""
 
+#: lists/list_follow.html
+msgid "OpenLibrary Logo"
+msgstr ""
+
+#: lists/list_follow.html
+msgid "Community List"
+msgstr ""
+
 #: lists/list_overview.html lists/widget.html my_books/dropdown_content.html
 msgid "See this list"
 msgstr ""

openlibrary/templates/lists/list_follow.html

@@ -55,9 +55,12 @@
                 </div>
             </div>
         $else:
-            <div class="list-follow-card__bottom">
-                <div class="list-follow-card__community-label">
-                    <i>Community List</i>
+            <div class="list-follow-card__bottom-community">
+                <div class="list-follow-card__user">
+                    <img src="/static/images/openlibrary-128x128.png" alt="$_('OpenLibrary Logo')"/>
+                    <div class="list-follow-card__community-label">
+                        <i>$_("Community List")</i>
+                    </div>
                 </div>
             </div>
     </div>

static/css/components/list-follow.less

@@ -136,6 +136,24 @@
     text-overflow: ellipsis;
   }
 
+  &__bottom-community {
+    background: @grey-f4f4f4;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    margin-bottom: -3px;
+    border-radius: 0 0 3px 3px;
+  }
+  &__community-label {
+    font-weight: normal;
+    font-size: @font-size-label-large;
+    color: @black;
+
+    white-space: nowrap;
+    overflow: hidden;
+    padding-bottom: 2px;
+  }
   &__num-books {
     color: @grey-555;
     font-size: @font-size-label-medium;