From 03fb650a105240e6508ef03321afc40d9fda5ede Mon Sep 17 00:00:00 2001 From: anna-ayn <19-10096@usb.ve> Date: Thu, 5 Dec 2024 16:38:14 -0400 Subject: [PATCH 01/13] Add methods to get width and height in Image class --- openlibrary/core/models.py | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/openlibrary/core/models.py b/openlibrary/core/models.py index df78d4f407c..7f364ae5362 100644 --- a/openlibrary/core/models.py +++ b/openlibrary/core/models.py @@ -83,6 +83,15 @@ def url(self, size="M"): def __repr__(self): return "" % (self.category, self.id) + def width(self): + """Get the width of the image.""" + info = self.info() + return info["width"] if info else None + + def height(self): + """Get the height of the image.""" + info = self.info() + return info["height"] if info else None ThingKey = str From 932a6f8aed7ba92a34c3d054ecccd8ff5e397c3d Mon Sep 17 00:00:00 2001 From: anna-ayn <19-10096@usb.ve> Date: Thu, 5 Dec 2024 16:40:51 -0400 Subject: [PATCH 02/13] Added width and height to img element for cover images in home template of lists Remove docs for calculating cover image dimensions in home template --- openlibrary/templates/lists/home.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/openlibrary/templates/lists/home.html b/openlibrary/templates/lists/home.html index 1095085c4e4..57572d9d318 100644 --- a/openlibrary/templates/lists/home.html +++ b/openlibrary/templates/lists/home.html @@ -36,7 +36,12 @@

$_('Active Lists')

$ cover = list.get_cover() or list.get_default_cover() $ cover_url = cover and cover.url("S") or "/images/icons/avatar_book-sm.png" - + $ cover_width = cover.width() + $ cover_height = cover.height() + $ cover_aspect_ratio = cover_width and cover_height and cover_width / cover_height + $ cover_width_for_58px_height = cover_aspect_ratio and int(58 * cover_aspect_ratio) + $ cover_height_for_25px_width = cover_width_for_58px_height and round(1450 / cover_width_for_58px_height) +
$list.name From ff001c367c09e06220e0aa86a40df03b9d6c0c76 Mon Sep 17 00:00:00 2001 From: anna-ayn <19-10096@usb.ve> Date: Thu, 5 Dec 2024 21:58:38 -0400 Subject: [PATCH 03/13] Add desiredHeight parameter to createActiveShowcaseItem function and adjust image height to covers in already-lists --- .../openlibrary/js/lists/ShowcaseItem.js | 5 +++-- .../plugins/openlibrary/js/my-books/index.js | 18 ++++++++++++++---- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js b/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js index f20a633ec3c..6d5be09c7f8 100644 --- a/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js +++ b/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js @@ -231,9 +231,10 @@ function getSeedType(seed) { * @param {string} seedKey * @param {string} listTitle * @param {string} [coverUrl] + * @param {string} desiredHeight * @returns {HTMLLIElement} */ -export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = DEFAULT_COVER_URL) { +export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = DEFAULT_COVER_URL, desiredHeight = "") { if (!i18nStrings) { const i18nInput = document.querySelector('input[name=list-i18n-strings]') i18nStrings = JSON.parse(i18nInput.value) @@ -244,7 +245,7 @@ export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = const seedType = getSeedType(seedKey) const itemMarkUp = ` - ${i18nStrings['cover_of']}${listTitle} + ${i18nStrings['cover_of']}${listTitle} diff --git a/openlibrary/plugins/openlibrary/js/my-books/index.js b/openlibrary/plugins/openlibrary/js/my-books/index.js index 1640be09742..e36a8348aea 100644 --- a/openlibrary/plugins/openlibrary/js/my-books/index.js +++ b/openlibrary/plugins/openlibrary/js/my-books/index.js @@ -7,7 +7,7 @@ import { removeChildren } from '../utils' // XXX : jsdoc // XXX : decompose -export function initMyBooksAffordances(dropperElements, showcaseElements) { +export async function initMyBooksAffordances(dropperElements, showcaseElements) { const showcases = [] for (const elem of showcaseElements) { const showcase = new ShowcaseItem(elem) @@ -42,7 +42,7 @@ export function initMyBooksAffordances(dropperElements, showcaseElements) { getListPartials() .then(response => response.json()) - .then((data) => { + .then(async (data) => { // XXX : convert this block to one or two function calls const listData = data.listData const activeShowcaseItems = [] @@ -55,8 +55,18 @@ export function initMyBooksAffordances(dropperElements, showcaseElements) { const key = listData[listKey].members[0] const coverID = key.slice(key.indexOf('OL')) const cover = `https://covers.openlibrary.org/b/olid/${coverID}-S.jpg` - - activeShowcaseItems.push(createActiveShowcaseItem(listKey, seedKey, listData[listKey].listName, cover)) + + const img = new Image() + img.src = cover + + await new Promise((resolve) => { + img.onload = () => { + let desiredHeight = 22 * img.height / img.width + desiredHeight = desiredHeight.toFixed(2) + activeShowcaseItems.push(createActiveShowcaseItem(listKey, seedKey, listData[listKey].listName, cover, desiredHeight)) + resolve() + } + }) } } } From 4d9d777252ae7c9174d76d5085246cc6dec1797c Mon Sep 17 00:00:00 2001 From: anna-ayn <19-10096@usb.ve> Date: Thu, 5 Dec 2024 22:17:53 -0400 Subject: [PATCH 04/13] Remove max-width constraint for images in already-lists --- static/css/components/listLists.less | 2 +- static/css/layout/index.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/css/components/listLists.less b/static/css/components/listLists.less index 9437246b408..6d0e946a6aa 100644 --- a/static/css/components/listLists.less +++ b/static/css/components/listLists.less @@ -29,7 +29,7 @@ ul.listLists { /* stylelint-disable max-nesting-depth */ img { width: 32px; - max-width: 100%; + // max-width: 100%; } /* stylelint-enable max-nesting-depth */ } diff --git a/static/css/layout/index.less b/static/css/layout/index.less index dfe060103cb..55f9f90bdf5 100644 --- a/static/css/layout/index.less +++ b/static/css/layout/index.less @@ -13,7 +13,7 @@ div.contentBody, div#contentBody { padding: 0 @contentBody-padding @contentBody-padding; img { - max-width: 100%; + // max-width: 100%; } pre { overflow-x: auto; From f9820eb4848508b56caadf1383d5e97e489fd84e Mon Sep 17 00:00:00 2001 From: anna-ayn <19-10096@usb.ve> Date: Thu, 5 Dec 2024 22:23:55 -0400 Subject: [PATCH 05/13] Reduce image width in listLists component from 32px to 22px fix trailing spaces Remove unnecessary blank lines in initMyBooksAffordances function --- openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js | 4 ++-- openlibrary/plugins/openlibrary/js/my-books/index.js | 4 ++-- static/css/components/listLists.less | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js b/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js index 6d5be09c7f8..f579363ca87 100644 --- a/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js +++ b/openlibrary/plugins/openlibrary/js/lists/ShowcaseItem.js @@ -231,10 +231,10 @@ function getSeedType(seed) { * @param {string} seedKey * @param {string} listTitle * @param {string} [coverUrl] - * @param {string} desiredHeight + * @param {string} desiredHeight * @returns {HTMLLIElement} */ -export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = DEFAULT_COVER_URL, desiredHeight = "") { +export function createActiveShowcaseItem(listKey, seedKey, listTitle, coverUrl = DEFAULT_COVER_URL, desiredHeight = '') { if (!i18nStrings) { const i18nInput = document.querySelector('input[name=list-i18n-strings]') i18nStrings = JSON.parse(i18nInput.value) diff --git a/openlibrary/plugins/openlibrary/js/my-books/index.js b/openlibrary/plugins/openlibrary/js/my-books/index.js index e36a8348aea..77df11cb854 100644 --- a/openlibrary/plugins/openlibrary/js/my-books/index.js +++ b/openlibrary/plugins/openlibrary/js/my-books/index.js @@ -55,10 +55,10 @@ export async function initMyBooksAffordances(dropperElements, showcaseElements) const key = listData[listKey].members[0] const coverID = key.slice(key.indexOf('OL')) const cover = `https://covers.openlibrary.org/b/olid/${coverID}-S.jpg` - + const img = new Image() img.src = cover - + await new Promise((resolve) => { img.onload = () => { let desiredHeight = 22 * img.height / img.width diff --git a/static/css/components/listLists.less b/static/css/components/listLists.less index 6d0e946a6aa..c35ae2e5f43 100644 --- a/static/css/components/listLists.less +++ b/static/css/components/listLists.less @@ -28,7 +28,7 @@ ul.listLists { padding: 0 10px; /* stylelint-disable max-nesting-depth */ img { - width: 32px; + width: 22px; // max-width: 100%; } /* stylelint-enable max-nesting-depth */ From 5dce01150272ba658a61cca5f230ebed0ea5ad84 Mon Sep 17 00:00:00 2001 From: ChuyB Date: Thu, 12 Dec 2024 12:34:14 -0400 Subject: [PATCH 06/13] feat:fixes the height of the cover --- openlibrary/templates/covers/book_cover.html | 22 +++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/openlibrary/templates/covers/book_cover.html b/openlibrary/templates/covers/book_cover.html index 3b8843e8965..c3c4784e708 100644 --- a/openlibrary/templates/covers/book_cover.html +++ b/openlibrary/templates/covers/book_cover.html @@ -13,10 +13,30 @@ $ src = cover_url or '/images/icons/avatar_book.png' $ srcset = '%s 2x' % (cover_lg or '/images/icons/avatar_book-lg.png') +$ cover_height = None +$ cover_width = 180 # Fixed width of the image +$ aspect_ratio = 1 +$ cover = book.get_cover() +$if cover: + $ cover_height = cover.height() + $ cover_width = cover.width() + $ aspect_ratio = cover.width() / cover.height() +$else: + $ ia_cover_url = book.get_ia_cover(book.ocaid, "M") + $ parts = ia_cover_url.split('_h') + $ cover_height_str = parts[1].split('.')[0] + $ cover_height = int(cover_height_str) + $ cover_width_str = parts[0].split('_w')[1] + $ cover_width = int(cover_width_str) + $ aspect_ratio = cover_width / cover_height + +$ fixed_width = 180 # Fixed width of the container +$ calculated_height = fixed_width / aspect_ratio + $if preload: $add_metatag(tag="link", **{'rel': 'preload', 'as': 'image', 'href': src, 'imagesrcset': srcset}) -
+
Date: Thu, 12 Dec 2024 13:52:59 -0400 Subject: [PATCH 07/13] =?UTF-8?q?Estandarizaci=C3=B3n=20de=20tama=C3=B1os?= =?UTF-8?q?=20de=20las=20portadas=20de=20libros=20en=20carruseles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/css/components/book.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/css/components/book.less b/static/css/components/book.less index 1997fd8b06f..53d56585809 100644 --- a/static/css/components/book.less +++ b/static/css/components/book.less @@ -29,7 +29,7 @@ margin: 0 auto; box-shadow: 1px 2px 5px 0 @book-cover-shadow-color; border-radius: 3px; - max-width: 100%; - max-height: 200px; + width: 100%; + height: 12rem; } } From cab1bb43cd5c2470ae6ab14faa9850ab822960aa Mon Sep 17 00:00:00 2001 From: oliebueno Date: Thu, 12 Dec 2024 18:31:54 -0400 Subject: [PATCH 08/13] A new container is added and the size of the covers is standardized A new container is added and the size of the covers is standardized A new container is added and the size of the covers is standardized --- .../LibraryExplorer/components/OLCarousel.vue | 45 ++++++++++++++++++- 1 file changed, 43 insertions(+), 2 deletions(-) diff --git a/openlibrary/components/LibraryExplorer/components/OLCarousel.vue b/openlibrary/components/LibraryExplorer/components/OLCarousel.vue index a2a43dab9b0..71f6c5447f7 100644 --- a/openlibrary/components/LibraryExplorer/components/OLCarousel.vue +++ b/openlibrary/components/LibraryExplorer/components/OLCarousel.vue @@ -6,7 +6,11 @@