Image cell focus state improvements (#1006)

* Explicitly set VImageCell license icon color * Switch ImageCell to tailwind; fix hover state * Rename components * add eslint rules and eliminate unnecessary license icon props * Offset audio box layout focus ring to match images * Update POT file * Increase focus ring and offset size to 3px * Fix e2e test selector
WordPress · Mar 1, 2022 · e0ac241 · e0ac241
1 parent 3ab0347
commit e0ac241
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 170 deletions.
diff --git a/src/components/VAllResultsGrid/VAllResultsGrid.vue b/src/components/VAllResultsGrid/VAllResultsGrid.vue
@@ -22,7 +22,7 @@
       class="results-grid grid grid-cols-2 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
     >
       <div v-for="item in allMedia" :key="item.id">
-        <VImageCell
+        <VImageCellSquare
           v-if="item.frontendMediaType === 'image'"
           :key="item.id"
           :image="item"
@@ -53,7 +53,7 @@
 <script>
 import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
 
-import VImageCell from '~/components/VAllResultsGrid/VImageCell.vue'
+import VImageCellSquare from '~/components/VAllResultsGrid/VImageCellSquare.vue'
 import VAudioCell from '~/components/VAllResultsGrid/VAudioCell.vue'
 import VLoadMore from '~/components/VLoadMore.vue'
 import VContentLink from '~/components/VContentLink/VContentLink.vue'
@@ -64,7 +64,7 @@ import srand from '~/utils/srand'
 export default defineComponent({
   name: 'VAllResultsGrid',
   components: {
-    VImageCell,
+    VImageCellSquare,
     VAudioCell,
     VLoadMore,
     VGridSkeleton,

diff --git a/...components/VAllResultsGrid/VImageCell.vue → ...ents/VAllResultsGrid/VImageCellSquare.vue b/...components/VAllResultsGrid/VImageCell.vue → ...ents/VAllResultsGrid/VImageCellSquare.vue
@@ -3,7 +3,7 @@
     itemprop="contentUrl"
     :title="image.title"
     :href="'/image/' + image.id"
-    class="group block focus:bg-white focus:ring focus:ring-pink focus:outline-none focus:shadow-ring focus:text-black rounded-sm"
+    class="group block focus:ring-[3px] focus:ring-pink focus:ring-offset-[3px] focus:outline-none rounded-sm"
   >
     <figure
       itemprop="image"
@@ -23,21 +23,18 @@
         @error="onImageLoadError($event, image)"
       />
       <figcaption
-        class="absolute left-0 bottom-0 invisible group-hover:visible group-focus:visible bg-white p-1"
+        class="absolute left-0 bottom-0 invisible group-hover:visible group-focus:visible bg-white p-1 text-dark-charcoal"
       >
         <span class="sr-only">{{ image.title }}</span>
-        <VLicense
-          :license="image.license"
-          :bg-filled="true"
-          :hide-name="true"
-        />
+        <VLicense :license="image.license" :hide-name="true" />
       </figcaption>
     </figure>
   </VLink>
 </template>
 
 <script>
 import VLicense from '~/components/License/VLicense.vue'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const errorImage = require('~/assets/image_not_available_placeholder.png')
 
 const toAbsolutePath = (url, prefix = 'https://') => {

diff --git a/src/components/VAudioTrack/VAudioTrack.vue b/src/components/VAudioTrack/VAudioTrack.vue
@@ -387,7 +387,7 @@ export default defineComponent({
       return {
         tabindex: isBoxed.value ? 0 : -1,
         class:
-          'block focus:bg-white focus:border-tx focus:ring focus:ring-pink focus:outline-none focus:shadow-ring rounded-sm overflow-hidden cursor-pointer',
+          'block focus:bg-white focus:border-tx focus:ring-[3px] focus:ring-pink focus:ring-offset-[3px] focus:outline-none rounded-sm overflow-hidden cursor-pointer',
       }
     })
     const layoutBasedListeners = computed(() => {

diff --git a/src/components/VImageDetails/VRelatedImages.vue b/src/components/VImageDetails/VRelatedImages.vue
@@ -3,8 +3,7 @@
     <h3 class="text-2xl md:text-3xl mb-6">
       {{ $t('image-details.related-images') }}
     </h3>
-    <!-- TODO: use a image grid with correct margins and items gaps -->
-    <ImageGrid
+    <VImageGrid
       :images="images"
       :can-load-more="false"
       :fetch-state="{
@@ -19,11 +18,11 @@
 import { ref } from '@nuxtjs/composition-api'
 import useRelated from '~/composables/use-related'
 import { IMAGE } from '~/constants/media'
-import ImageGrid from '~/components/ImageGrid/ImageGrid.vue'
+import VImageGrid from '~/components/VImageGrid/VImageGrid.vue'
 
 export default {
   name: 'VRelatedImages',
-  components: { ImageGrid },
+  components: { VImageGrid },
   props: {
     imageId: {
       type: String,

diff --git a/src/components/ImageGrid/ImageCell.vue → src/components/VImageGrid/VImageCell.vue b/src/components/ImageGrid/ImageCell.vue → src/components/VImageGrid/VImageCell.vue
@@ -1,49 +1,42 @@
 <template>
-  <div
+  <VLink
+    :href="'/image/' + image.id"
+    class="w-full block group relative overflow-hidden rounded-sm focus:ring-[3px] focus:ring-pink focus:ring-offset-[3px] focus:outline-none"
     :aria-label="image.title"
-    class="search-grid_item-container"
-    :style="`width: ${containerAspect * widthBasis}px;
-    flex-grow: ${containerAspect * widthBasis}`"
+    :style="`width: ${containerAspect * widthBasis}px;flex-grow: ${
+      containerAspect * widthBasis
+    }`"
+    @click="onGotoDetailPage($event, image)"
   >
-    <figure class="search-grid_item">
-      <i :style="`padding-bottom:${iPadding}%`" />
-      <VLink
-        :href="'/image/' + image.id"
-        class="search-grid_image-ctr"
-        :style="`width: ${imageWidth}%; top: ${imageTop}%; left:${imageLeft}%;`"
-        @click="onGotoDetailPage($event, image)"
+    <figure
+      class="absolute w-full"
+      :style="`width: ${imageWidth}%; top: ${imageTop}%; left:${imageLeft}%;`"
+    >
+      <img
+        ref="img"
+        loading="lazy"
+        class="margin-auto block w-full"
+        :alt="image.title"
+        :src="getImageUrl(image)"
+        @load="getImgDimension"
+        @error="onImageLoadError($event, image)"
+      />
+      <figcaption
+        class="absolute left-0 bottom-0 invisible group-hover:visible group-focus:visible bg-white p-1 text-dark-charcoal"
       >
-        <img
-          ref="img"
-          loading="lazy"
-          :class="{
-            'search-grid_image': true,
-            'w-full': !shouldContainImage,
-          }"
-          :alt="image.title"
-          :src="getImageUrl(image)"
-          @load="getImgDimension"
-          @error="onImageLoadError($event, image)"
-        />
-      </VLink>
-      <figcaption class="overlay overlay__top p-2">
-        <VLicense
-          :license="image.license"
-          :bg-filled="true"
-          :hide-name="true"
-        />
-      </figcaption>
-      <figcaption class="overlay overlay__bottom py-2 px-4">
-        <span class="caption font-semibold">{{ image.title }}</span>
+        <span class="sr-only">{{ image.title }}</span>
+        <VLicense :license="image.license" :hide-name="true" />
       </figcaption>
     </figure>
-  </div>
+    <i :style="`padding-bottom:${iPadding}%`" class="block" aria-hidden />
+  </VLink>
 </template>
 
 <script>
 import VLicense from '~/components/License/VLicense.vue'
 import VLink from '~/components/VLink.vue'
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const errorImage = require('~/assets/image_not_available_placeholder.png')
 
 const minAspect = 3 / 4
@@ -59,9 +52,9 @@ const toAbsolutePath = (url, prefix = 'https://') => {
 }
 
 export default {
-  name: 'ImageCell',
+  name: 'VImageCell',
   components: { VLicense, VLink },
-  props: ['image', 'shouldContainImage'],
+  props: ['image'],
   data() {
     return {
       widthBasis: minRowWidth / maxAspect,
@@ -137,86 +130,3 @@ export default {
   },
 }
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped>
-.search-grid_image-ctr {
-  background: #ebece4;
-  display: block;
-  width: 100%;
-}
-
-.search-grid_item-container {
-  margin: 0.6rem;
-}
-
-.search-grid_item {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-  i {
-    display: block;
-  }
-
-  a {
-    position: absolute;
-    vertical-align: bottom;
-    img {
-      width: 100%;
-    }
-  }
-
-  &:hover .overlay {
-    opacity: 1;
-    bottom: 0;
-  }
-}
-
-.overlay {
-  position: absolute;
-  opacity: 0;
-  transition: all 0.4s ease;
-  color: #fff;
-  display: block;
-  top: -100%;
-
-  &__top {
-    top: 0;
-    width: 100%;
-    height: 2rem;
-  }
-
-  &__bottom {
-    background-color: #000;
-    bottom: -100%;
-    top: auto;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 100%;
-  }
-
-  // Show on touch devices
-  @media (hover: none) {
-    position: absolute;
-    opacity: 1;
-    bottom: 0;
-  }
-}
-
-.search-grid_item {
-  width: 100%;
-  position: relative;
-  display: block;
-  float: left;
-  flex: 0 0 auto;
-  flex-grow: 1;
-  cursor: pointer;
-}
-
-.search-grid_image {
-  margin: auto;
-  display: block;
-}
-</style>
diff --git a/src/components/ImageGrid/ImageGrid.vue → src/components/VImageGrid/VImageGrid.vue b/src/components/ImageGrid/ImageGrid.vue → src/components/VImageGrid/VImageGrid.vue
@@ -1,15 +1,16 @@
 <template>
-  <section class="image-grid -mx-2">
-    <div class="image-grid__cells">
-      <ImageCell v-for="(image, index) in images" :key="index" :image="image" />
+  <section>
+    <div class="image-grid flex flex-wrap gap-4">
+      <VImageCell
+        v-for="(image, index) in images"
+        :key="index"
+        :image="image"
+      />
     </div>
-    <h5
-      v-if="isError && !fetchState.isFinished"
-      class="image-grid__notification py-4"
-    >
+    <h5 v-if="isError && !fetchState.isFinished" class="py-4">
       {{ fetchState.fetchingError }}
     </h5>
-    <footer class="px-2">
+    <footer class="pt-4">
       <VLoadMore
         v-if="canLoadMore && !fetchState.isFinished"
         :is-fetching="fetchState.isFetching"
@@ -22,18 +23,18 @@
 
 <script>
 /**
- * This component receives an array of images as prop, and
+ * This component receives an array of images as a prop, and
  * is responsible for displaying them as a grid.
  * It can also fetch more images when 'Load More' clicked,
  * or display 'No More Media'.
  * Used to display both image search results, and related images.
  */
 import VLoadMore from '~/components/VLoadMore'
-import ImageCell from '~/components/ImageGrid/ImageCell'
+import VImageCell from '~/components/VImageGrid/VImageCell'
 
 export default {
   name: 'ImageGrid',
-  components: { VLoadMore, ImageCell },
+  components: { VLoadMore, VImageCell },
   props: {
     images: {
       default: () => [],
@@ -65,21 +66,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.image-grid {
-  &__notification {
-    display: flex;
-    justify-content: center;
-  }
-  &__cells {
-    display: flex;
-    flex-wrap: wrap;
-
-    @include tablet {
-      &:after {
-        content: '';
-        flex-grow: 999999999;
-      }
-    }
+.image-grid:after {
+  /**
+   * This keeps the last item in the results from expanding to fill
+   * all avaliable space, which can result in a final row with a
+   * single, 100% wide image.
+   */
+  @screen md {
+    content: '';
+    flex-grow: 999999999;
   }
 }
 </style>
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-02-24T14:41:46+00:00\n"
+"POT-Creation-Date: 2022-02-25T18:43:12+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -711,7 +711,7 @@ msgid "Load more results"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/ImageGrid/ImageGrid.vue:56
+#: src/components/VAllResultsGrid/VAllResultsGrid.vue:147
 msgctxt "browse-page.fetching-error"
 msgid "Error fetching ###type###:"
 msgstr ""
@@ -787,7 +787,7 @@ msgctxt "browse-page.search-form.placeholder"
 msgid "Search all ###type###"
 msgstr ""
 
-#: src/components/ImageGrid/ImageGrid.vue:55
+#: src/components/VImageGrid/VImageGrid.vue:56
 msgctxt "browse-page.search-form.image"
 msgid "images"
 msgstr ""

diff --git a/src/pages/search/image.vue b/src/pages/search/image.vue
@@ -1,5 +1,5 @@
 <template>
-  <ImageGrid
+  <VImageGrid
     :images="results"
     :can-load-more="canLoadMore"
     :fetch-state="fetchState"