Update collection header

Signed-off-by: Olga Bulat <obulat@gmail.com>
WordPress · Mar 11, 2024 · 40c7f7f · 40c7f7f
1 parent bef4821
commit 40c7f7f
Show file tree

Hide file tree

Showing 6 changed files with 396 additions and 303 deletions.
diff --git a/frontend/src/components/VCollectionHeader/VCollectionHeader.vue b/frontend/src/components/VCollectionHeader/VCollectionHeader.vue
@@ -1,13 +1,18 @@
 <template>
   <div
-    class="collection-header grid grid-cols-[1.5rem,1fr] gap-x-2 gap-y-4 md:grid-rows-[auto,auto] md:gap-y-8"
-    :class="
+    class="collection-header -m-1 grid auto-rows-auto gap-x-2 gap-y-2 overflow-hidden p-1 md:grid-rows-[auto,auto] md:gap-y-8"
+    :class="[
+      `collection-${collection}`,
       collection === 'tag'
-        ? 'tags grid-rows-[auto,auto] md:grid-cols-[2.5rem,1fr]'
-        : 'grid-rows-[auto,auto,auto] md:grid-cols-[2.5rem,1fr,auto]'
-    "
+        ? 'md:grid-cols-[2.5rem,1fr]'
+        : 'md:grid-cols-[2.5rem,1fr,auto]',
+    ]"
   >
-    <VIcon :name="iconName" :size="isMd ? 10 : 6" class="icon" />
+    <VIcon :name="iconName" :size="isMd ? 10 : 6" class="icon hidden md:flex" />
+    <span
+      class="collection-name label-regular flex text-dark-charcoal-70 md:hidden"
+      >{{ $t(`collection.heading.${collection}`) }}</span
+    >
     <h1 class="title text-3xl font-semibold leading-snug md:text-6xl">
       {{ title }}
     </h1>
@@ -16,53 +21,57 @@
       as="VLink"
       variant="filled-dark"
       size="medium"
-      class="button label-bold !flex-none md:ms-4 md:mt-1"
+      class="link label-bold !flex-none md:ms-4"
       has-icon-end
       show-external-icon
       :external-icon-size="6"
       :href="url"
       @click="sendAnalyticsEvent"
       >{{ $t(`collection.link.${collection}`) }}</VButton
     >
-    <p
-      v-if="collectionParams.collection !== 'creator'"
-      class="results caption-regular md:label-regular mt-2 text-dark-charcoal-70 md:mt-0"
-    >
-      {{ resultsLabel }}
-    </p>
-
-    <p
-      v-else-if="
-        collectionParams.collection === 'creator' && resultsLabel.length === 2
-      "
-      class="results caption-regular md:label-regular mt-2 text-dark-charcoal-70 md:mt-0"
+    <div
+      class="results mt-6 flex flex-col gap-1 md:mt-0 md:flex-row md:items-center"
     >
-      {{ resultsLabel[0]
-      }}<VLink :href="source.link" class="!gap-x-1" show-external-icon>{{
-        source.name
-      }}</VLink
-      ><span v-if="resultsLabel[1]">{{ resultsLabel[1] }}</span>
-    </p>
+      <p class="label-regular w-max text-dark-charcoal-70 md:whitespace-nowrap">
+        {{ resultsLabel }}
+      </p>
+      <VScrollableLine
+        v-if="collection === 'creator'"
+        class="-mx-2 -my-1.5px w-[calc(100%-theme(space.2))]"
+      >
+        <VButton
+          as="VLink"
+          size="disabled"
+          variant="transparent-gray"
+          class="label-bold m-1.5px h-8 w-max gap-x-1 whitespace-nowrap p-1"
+          :href="sourceCollectionLink"
+          has-icon-start
+          ><VIcon name="institution" /><span class="w-max whitespace-nowrap">{{
+            source.name
+          }}</span></VButton
+        >
+      </VScrollableLine>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from "vue"
+import { computed, defineComponent, type PropType } from "vue"
 
-import { useUiStore } from "~/stores/ui"
-import type { CollectionParams } from "~/types/search"
 import { useAnalytics } from "~/composables/use-analytics"
 
+import { useMediaStore } from "~/stores/media"
 import { useProviderStore } from "~/stores/provider"
-import { SupportedMediaType } from "~/constants/media"
+import { useSearchStore } from "~/stores/search"
+import { useUiStore } from "~/stores/ui"
+import type { CollectionParams } from "~/types/search"
+import type { SupportedMediaType } from "~/constants/media"
 
 import { useI18nResultsCount } from "~/composables/use-i18n-utilities"
 
-import { useMediaStore } from "~/stores/media"
-
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VButton from "~/components/VButton.vue"
-import VLink from "~/components/VLink.vue"
+import VScrollableLine from "~/components/VScrollableLine.vue"
 
 const icons = {
   tag: "tag",
@@ -75,7 +84,7 @@ const icons = {
  */
 export default defineComponent({
   name: "VCollectionHeader",
-  components: { VLink, VIcon, VButton },
+  components: { VScrollableLine, VIcon, VButton },
   props: {
     collectionParams: {
       type: Object as PropType<CollectionParams>,
@@ -92,6 +101,7 @@ export default defineComponent({
   setup(props) {
     const mediaStore = useMediaStore()
     const providerStore = useProviderStore()
+    const searchStore = useSearchStore()
     const uiStore = useUiStore()
 
     const iconName = computed(() => icons[props.collectionParams.collection])
@@ -133,29 +143,33 @@ export default defineComponent({
       }
       return source.value.link
     })
+
+    const sourceCollectionLink = computed(() => {
+      if (props.collectionParams.collection !== "creator") {
+        return ""
+      }
+      return searchStore.getCollectionPath({
+        type: props.mediaType,
+        collectionParams: {
+          collection: "source",
+          source: props.collectionParams.source,
+        },
+      })
+    })
+
     const { getI18nCollectionResultCountLabel } = useI18nResultsCount()
 
     const resultsLabel = computed(() => {
       if (mediaStore.resultCount === 0 && mediaStore.fetchState.isFetching) {
         return ""
       }
       const resultsCount = mediaStore.results[props.mediaType].count
-      const params =
-        props.collectionParams.collection === "creator"
-          ? { source: source.value.name }
-          : undefined
 
-      const label = getI18nCollectionResultCountLabel(
+      return getI18nCollectionResultCountLabel(
         resultsCount,
         props.mediaType,
-        props.collectionParams.collection,
-        params
+        props.collectionParams.collection
       )
-      if (props.collectionParams.collection === "creator") {
-        const splitLabel = label.split(source.value.name)
-        return splitLabel.length === 2 ? splitLabel : ["", ""]
-      }
-      return label
     })
 
     const isMd = computed(() => uiStore.isBreakpoint("md"))
@@ -183,6 +197,7 @@ export default defineComponent({
       resultsLabel,
       source,
       url,
+      sourceCollectionLink,
       iconName,
       isMd,
       sendAnalyticsEvent,
@@ -193,18 +208,26 @@ export default defineComponent({
 
 <style scoped>
 .collection-header {
-  grid-template-areas: "icon title" "button button" "results results";
+  @apply auto-rows-auto;
 }
-@screen md {
-  .collection-header {
-    grid-template-areas: "icon title button" "results results results";
-  }
+.collection-source {
+  grid-template-areas: "collection-name" "title" "link" "results";
+}
+.collection-creator {
+  grid-template-areas: "collection-name" "title" "link" "results";
 }
-.collection-header.tags {
-  grid-template-areas: "icon title" "results results";
+.collection-tag {
+  grid-template-areas: "collection-name" "title" "results";
 }
+
 @screen md {
-  .collection-header.tags {
+  .collection-source {
+    grid-template-areas: "icon title link" "results results results";
+  }
+  .collection-creator {
+    grid-template-areas: "icon title link" "results results results";
+  }
+  .collection-tag {
     grid-template-areas: "icon title" "results results";
   }
 }
@@ -214,8 +237,8 @@ export default defineComponent({
 .title {
   grid-area: title;
 }
-.button {
-  grid-area: button;
+.link {
+  grid-area: link;
 }
 .results {
   grid-area: results;

diff --git a/frontend/src/components/VCollectionPage.vue b/frontend/src/components/VCollectionPage.vue
@@ -5,7 +5,7 @@
       :collection-params="collectionParams"
       :creator-url="creatorUrl"
       :media-type="mediaType"
-      :class="mediaType === 'image' ? 'mb-4' : 'mb-2'"
+      :class="mediaType === 'image' ? 'mb-0 md:mb-4' : 'mb-2'"
     />
     <VAudioList
       v-if="results.type === 'audio'"