From bce92c219f6fd54b903a2059413d46f3300b5130 Mon Sep 17 00:00:00 2001 From: Drini Cami Date: Fri, 7 Jun 2024 17:42:11 +0200 Subject: [PATCH 1/6] Make list-showcase use BEM notation - DRY up HTML elements - Remove some unused CSS variables --- openlibrary/templates/lists/showcase.html | 48 ++++++++++----------- static/css/components/list-showcase.less | 51 ++++++++++------------- 2 files changed, 45 insertions(+), 54 deletions(-) diff --git a/openlibrary/templates/lists/showcase.html b/openlibrary/templates/lists/showcase.html index 189f06e8c49..b87caaff1fb 100644 --- a/openlibrary/templates/lists/showcase.html +++ b/openlibrary/templates/lists/showcase.html @@ -5,41 +5,37 @@ $ 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"]] -
- -
-
-

$title

- $if count == 1: -

$count book

- $else: -

$count books

-
-
- $ cover = 0 - $for img_url in cover_urls: - - $ cover +=1 -
-
- -
-
+ +
+

$title

+ $if count == 1: +

$count book

+ $else: +

$count books

+
+
+ $for img_url in cover_urls: + +
+ + + +
-

- My Lists ($len(lists)) +

+ My Lists ($len(lists))

-
- $if lists and len(total_lists)>0: +
+ $if total_lists: $for list in total_lists: - $:showcase(list) + $:list_card(list) $else:

You have no lists.

diff --git a/static/css/components/list-showcase.less b/static/css/components/list-showcase.less index de130ad0342..293d7667da1 100644 --- a/static/css/components/list-showcase.less +++ b/static/css/components/list-showcase.less @@ -2,8 +2,7 @@ @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( @@ -14,7 +13,9 @@ ); } -.my-lists-item { +.list-card { + @name-tag-layer: 4; + background-color: @beige; border: 1px solid @black; border-radius: 4px; @@ -25,11 +26,8 @@ padding-top: 20px; padding-bottom: 40px; margin: 20px 15px; -} -.my-list { - @name-tag-layer: 4; - &-name-tag { + &__name-tag { border: 1px solid @black; border-radius: 2px 2px 4px 4px; box-shadow: 2px 2px 5px @gray-a19b9e; @@ -47,47 +45,44 @@ } } - &-title { + &__title { margin: auto; color: @black; font-weight: bold; } - &-num-books { + &__num-books { margin: auto; padding: 0; color: @grey-555; font-size: .7em; } - &-cover { + &__cover { width: 33%; margin-left: -5px; box-shadow: 2.5px 2.5px 4px @gray-a19b9e; } - &-covers { + &__covers { display: flex; justify-content: center; width: 80%; margin: auto; - } -} - -@top-cover: 3; -@mid-cover: 2; -@bottom-cover: 1; -.cover-0 { - z-index: @top-cover; - margin-left: -5px; -} -.cover-1 { - z-index: @mid-cover; - -} - -.cover-2 { - z-index: @bottom-cover; + @top-cover: 3; + @mid-cover: 2; + @bottom-cover: 1; + img:nth-child(1) { + z-index: @top-cover; + margin-left: -5px; + } + img:nth-child(2) { + z-index: @mid-cover; + } + img:nth-child(3) { + z-index: @bottom-cover; + } + } } From b5f371ac71c8dcb7860759d097f64885cf84b5c1 Mon Sep 17 00:00:00 2001 From: Drini Cami Date: Fri, 7 Jun 2024 21:51:15 +0200 Subject: [PATCH 2/6] i18n lists showcase --- openlibrary/i18n/messages.pot | 15 ++++++++++++--- openlibrary/templates/lists/showcase.html | 14 ++++++-------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot index ef7dd136ba2..94e4172a36f 100644 --- a/openlibrary/i18n/messages.pot +++ b/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 You" 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" diff --git a/openlibrary/templates/lists/showcase.html b/openlibrary/templates/lists/showcase.html index b87caaff1fb..f5661caaea6 100644 --- a/openlibrary/templates/lists/showcase.html +++ b/openlibrary/templates/lists/showcase.html @@ -1,9 +1,8 @@ -$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 list_card(list): $ cached_info = list.get_patron_showcase() @@ -14,10 +13,9 @@

$title

- $if count == 1: -

$count book

- $else: -

$count books

+

+ $ungettext("%(count)d book", "%(count)d books", count, count=count) +

$for img_url in cover_urls: @@ -29,7 +27,7 @@

- My Lists ($len(lists)) + $_('My Lists (%(count)d)', count=len(lists))

@@ -37,6 +35,6 @@

$for list in total_lists: $:list_card(list) $else: -

You have no lists.

+

$_('You have no lists.')

From 1b7778324a04d4b8e98a6a448c04b687f8757093 Mon Sep 17 00:00:00 2001 From: Drini Cami Date: Fri, 7 Jun 2024 22:00:12 +0200 Subject: [PATCH 3/6] DRY up lists showcase a bit more --- openlibrary/templates/lists/showcase.html | 19 +++++++------------ static/css/components/list-showcase.less | 15 ++++----------- 2 files changed, 11 insertions(+), 23 deletions(-) diff --git a/openlibrary/templates/lists/showcase.html b/openlibrary/templates/lists/showcase.html index f5661caaea6..fe0054ecfb2 100644 --- a/openlibrary/templates/lists/showcase.html +++ b/openlibrary/templates/lists/showcase.html @@ -1,25 +1,19 @@ $def with (lists, username) -$ default_image_url = "/images/icons/avatar_book-sm.png" -$ total_lists = lists[0:min(len(lists), 5)] - $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"]] - +
-

$title

+

$cached_info["title"]

$ungettext("%(count)d book", "%(count)d books", count, count=count)

- $for img_url in cover_urls: - + $for img_url in cached_info["covers"]: +
@@ -31,8 +25,9 @@

- $if total_lists: - $for list in total_lists: + $if lists: + $ displayed_lists = lists[0:min(len(lists), 5)] + $for list in displayed_lists: $:list_card(list) $else:

$_('You have no lists.')

diff --git a/static/css/components/list-showcase.less b/static/css/components/list-showcase.less index 293d7667da1..dd2f6353145 100644 --- a/static/css/components/list-showcase.less +++ b/static/css/components/list-showcase.less @@ -40,30 +40,23 @@ padding-left: 4px; z-index: @name-tag-layer; overflow: hidden; - &>p{ - text-wrap: nowrap; - } } &__title { margin: auto; color: @black; font-weight: bold; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } &__num-books { - margin: auto; - padding: 0; color: @grey-555; font-size: .7em; } - &__cover { - width: 33%; - margin-left: -5px; - box-shadow: 2.5px 2.5px 4px @gray-a19b9e; - } - &__covers { display: flex; justify-content: center; From f25ceed0a271024a4936c601b6f5d6b5ef1e001b Mon Sep 17 00:00:00 2001 From: Drini Cami Date: Sat, 8 Jun 2024 00:15:00 +0200 Subject: [PATCH 4/6] Make lists showcase more like designs --- openlibrary/templates/lists/showcase.html | 18 ++++-- static/css/components/list-showcase.less | 78 ++++++++++++++--------- 2 files changed, 60 insertions(+), 36 deletions(-) diff --git a/openlibrary/templates/lists/showcase.html b/openlibrary/templates/lists/showcase.html index fe0054ecfb2..5138e79de1f 100644 --- a/openlibrary/templates/lists/showcase.html +++ b/openlibrary/templates/lists/showcase.html @@ -5,15 +5,19 @@ $ cached_info = list.get_patron_showcase() $ count = cached_info["count"] -
-

$cached_info["title"]

-

- $ungettext("%(count)d book", "%(count)d books", count, count=count) -

-
$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' + +
+
+
$cached_info["title"]
+
+ $ungettext("%(count)d book", "%(count)d books", count, count=count) +
diff --git a/static/css/components/list-showcase.less b/static/css/components/list-showcase.less index dd2f6353145..8f9cfe11abe 100644 --- a/static/css/components/list-showcase.less +++ b/static/css/components/list-showcase.less @@ -1,51 +1,55 @@ @import (less) "../less/colors.less"; +@import (less) "../less/font-families.less"; @import (less) "components/read-panel.less"; @import (less) "components/book.less"; .list-showcase { display: flex; - overflow-x: clip; + overflow-x: auto; + 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; + } } +// stylelint-disable-next-line no-descending-specificity .list-card { - @name-tag-layer: 4; + 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%); &__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; + 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; font-weight: bold; + font-size: @font-size-label-large; + color: @black; white-space: nowrap; overflow: hidden; @@ -54,28 +58,44 @@ &__num-books { color: @grey-555; - font-size: .7em; + font-size: @font-size-label-medium; } &__covers { + @cover-width: 64px; + @padding: 20px; + + flex: 1; + min-height: 1px; // fallback + overflow: clip; + display: flex; - justify-content: center; - width: 80%; - margin: auto; + 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; - margin-left: -5px; + 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); } } } From 9908275400ed7772b4b74f9b87c1927d9339ea1e Mon Sep 17 00:00:00 2001 From: Drini Cami Date: Sat, 8 Jun 2024 00:31:30 +0200 Subject: [PATCH 5/6] Add lists showcase hover effect --- static/css/components/list-showcase.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/static/css/components/list-showcase.less b/static/css/components/list-showcase.less index 8f9cfe11abe..ecb913d8fba 100644 --- a/static/css/components/list-showcase.less +++ b/static/css/components/list-showcase.less @@ -98,4 +98,13 @@ transform: translate(-2 * @overlap, @padding); } } + + // stylelint-disable-next-line no-descending-specificity + img { + transition: scale .2s; + } + + &:hover img { + scale: 1.05; + } } From 70e2272ec80d63770fe4d44b7f5a117c7441fa00 Mon Sep 17 00:00:00 2001 From: Drini Cami Date: Sat, 8 Jun 2024 00:39:12 +0200 Subject: [PATCH 6/6] Small tweaks to lists-showcase --- openlibrary/templates/lists/showcase.html | 10 ++++++++-- static/css/components/list-showcase.less | 14 ++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/openlibrary/templates/lists/showcase.html b/openlibrary/templates/lists/showcase.html index 5138e79de1f..cdda94dfc94 100644 --- a/openlibrary/templates/lists/showcase.html +++ b/openlibrary/templates/lists/showcase.html @@ -30,9 +30,15 @@

$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: + $_("See all") $else:

$_('You have no lists.')

diff --git a/static/css/components/list-showcase.less b/static/css/components/list-showcase.less index ecb913d8fba..1e51e67dcd3 100644 --- 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; } }