From fb032c6b36f022af21ef7956cc5fb445a9323b69 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Thu, 21 Sep 2023 05:24:30 +0300 Subject: [PATCH] Improve image grid (#2891) * Improve image grid * Update tests * Update snapshots * Fix image cell storybook test --- .../src/components/VImageCell/VImageCell.vue | 51 +++++++---- .../VImageCell/meta/VImageCell.stories.mdx | 10 +-- .../VSearchResultsGrid/VImageGrid.vue | 2 +- .../src/composables/use-image-cell-size.ts | 50 ++++------- frontend/tailwind.config.ts | 1 + frontend/test/playwright/utils/breakpoints.ts | 3 + ...mage-ltr-from-search-results-2xl-linux.png | Bin 569644 -> 560646 bytes ...image-ltr-from-search-results-lg-linux.png | Bin 551663 -> 544786 bytes ...image-ltr-from-search-results-md-linux.png | Bin 538271 -> 531163 bytes ...image-ltr-from-search-results-sm-linux.png | Bin 454721 -> 443300 bytes ...image-ltr-from-search-results-xl-linux.png | Bin 560770 -> 552841 bytes ...image-ltr-from-search-results-xs-linux.png | Bin 175425 -> 187327 bytes ...mage-rtl-from-search-results-2xl-linux.png | Bin 559008 -> 550241 bytes ...image-rtl-from-search-results-lg-linux.png | Bin 541002 -> 534253 bytes ...image-rtl-from-search-results-md-linux.png | Bin 529220 -> 522340 bytes ...image-rtl-from-search-results-sm-linux.png | Bin 446828 -> 435139 bytes ...image-rtl-from-search-results-xl-linux.png | Bin 550446 -> 542644 bytes ...image-rtl-from-search-results-xs-linux.png | Bin 166246 -> 178450 bytes .../visual-regression/v-image-cell.spec.ts | 80 ++++++++++-------- ...e-cell-intrinsic-focused-hovered-linux.png | Bin 778121 -> 0 bytes ...ell-intrinsic-focused-hovered-xl-linux.png | Bin 0 -> 786160 bytes ...ell-intrinsic-focused-hovered-xs-linux.png | Bin 0 -> 104436 bytes .../v-image-cell-intrinsic-focused-linux.png | Bin 778121 -> 0 bytes ...-image-cell-intrinsic-focused-xl-linux.png | Bin 0 -> 786160 bytes ...-image-cell-intrinsic-focused-xs-linux.png | Bin 0 -> 104436 bytes ...image-cell-intrinsic-hovered-xl-linux.png} | Bin ...-image-cell-intrinsic-hovered-xs-linux.png | Bin 0 -> 103631 bytes ...-image-cell-intrinsic-loaded-xl-linux.png} | Bin ...v-image-cell-intrinsic-loaded-xs-linux.png | Bin 0 -> 103798 bytes ...mage-cell-square-focused-hovered-linux.png | Bin 357877 -> 0 bytes ...e-cell-square-focused-hovered-xl-linux.png | Bin 0 -> 998954 bytes ...e-cell-square-focused-hovered-xs-linux.png | Bin 0 -> 130350 bytes .../v-image-cell-square-focused-linux.png | Bin 357877 -> 0 bytes .../v-image-cell-square-focused-xl-linux.png | Bin 0 -> 998954 bytes .../v-image-cell-square-focused-xs-linux.png | Bin 0 -> 130350 bytes .../v-image-cell-square-hovered-linux.png | Bin 364402 -> 0 bytes .../v-image-cell-square-hovered-xl-linux.png | Bin 0 -> 998221 bytes .../v-image-cell-square-hovered-xs-linux.png | Bin 0 -> 129765 bytes .../v-image-cell-square-loaded-linux.png | Bin 365746 -> 0 bytes .../v-image-cell-square-loaded-xl-linux.png | Bin 0 -> 999080 bytes .../v-image-cell-square-loaded-xs-linux.png | Bin 0 -> 132004 bytes .../composables/use-image-cell-size.spec.js | 20 ++--- 42 files changed, 116 insertions(+), 101 deletions(-) delete mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-focused-hovered-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-focused-hovered-xl-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-focused-hovered-xs-linux.png delete mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-focused-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-focused-xl-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-focused-xs-linux.png rename frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/{v-image-cell-intrinsic-hovered-linux.png => v-image-cell-intrinsic-hovered-xl-linux.png} (100%) create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-hovered-xs-linux.png rename frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/{v-image-cell-intrinsic-loaded-linux.png => v-image-cell-intrinsic-loaded-xl-linux.png} (100%) create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-intrinsic-loaded-xs-linux.png delete mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-focused-hovered-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-focused-hovered-xl-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-focused-hovered-xs-linux.png delete mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-focused-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-focused-xl-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-focused-xs-linux.png delete mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-hovered-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-hovered-xl-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-hovered-xs-linux.png delete mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-loaded-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-loaded-xl-linux.png create mode 100644 frontend/test/storybook/visual-regression/v-image-cell.spec.ts-snapshots/v-image-cell-square-loaded-xs-linux.png diff --git a/frontend/src/components/VImageCell/VImageCell.vue b/frontend/src/components/VImageCell/VImageCell.vue index fab2eea00c9..b041940ab9f 100644 --- a/frontend/src/components/VImageCell/VImageCell.vue +++ b/frontend/src/components/VImageCell/VImageCell.vue @@ -1,10 +1,14 @@ @@ -116,6 +122,7 @@ export default defineComponent({ const imageUrl = computed(() => { // TODO: check if we have blurry panorama thumbnails + // Use the main image file and not the thumbnails for panorama images to // fix for blurry panorama thumbnails, introduced in // https://github.com/cc-archive/cccatalog-frontend/commit/4c9bdac5 if (isPanorama.value) { @@ -199,3 +206,15 @@ export default defineComponent({ }, }) + + diff --git a/frontend/src/components/VImageCell/meta/VImageCell.stories.mdx b/frontend/src/components/VImageCell/meta/VImageCell.stories.mdx index f47b4c2783d..cbecc80d03a 100644 --- a/frontend/src/components/VImageCell/meta/VImageCell.stories.mdx +++ b/frontend/src/components/VImageCell/meta/VImageCell.stories.mdx @@ -17,7 +17,7 @@ export const Template = (args, { argTypes }) => ({ template: `
    ({ parameters={{ viewport: { defaultViewport: "sm" }, }} - args={{ - aspectRatio: "intrinsic", - image: image, - }} argTypes={{ aspectRatio: { options: ["square", "intrinsic"], @@ -51,6 +47,10 @@ export const Template = (args, { argTypes }) => ({ control: { type: "object" }, }, }} + args={{ + aspectRatio: "intrinsic", + image: { ...image, url: base64Image }, + }} > {Template.bind({})} diff --git a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue b/frontend/src/components/VSearchResultsGrid/VImageGrid.vue index e1623710275..4d24a918a4b 100644 --- a/frontend/src/components/VSearchResultsGrid/VImageGrid.vue +++ b/frontend/src/components/VSearchResultsGrid/VImageGrid.vue @@ -1,5 +1,5 @@