Merge pull request kodadot#5137 from kodadot/feat/dynamic-grid-on-col…

…lection-list

feat: use dynamic grid on existing explorer

components/collection/CollectionList.vue

@@ -9,18 +9,19 @@
       :distance="prefetchDistance"
       direction="top"
       @infinite="reachTopHandler" />
-    <div
+    <DynamicGrid
       :id="scrollContainerId"
-      class="columns is-multiline"
+      :default-width="{ small: 16 * 20, large: 16 * 25 }"
+      :mobile-variant="false"
       @scroll="onScroll">
       <div
         v-for="(collection, index) in results"
         :key="collection.id"
-        :class="`column ${classLayout} ${scrollItemClassName}`"
+        :class="scrollItemClassName"
         :data-cy="`collection-index-${index}`">
         <CollectionCard :is-loading="isLoading" :collection="collection" />
       </div>
-    </div>
+    </DynamicGrid>
     <InfiniteLoading
       v-if="canLoadNextPage && !isLoading && total > 0"
       :distance="prefetchDistance"
@@ -61,6 +62,7 @@ const components = {
   ScrollTopButton: () => import('@/components/shared/ScrollTopButton.vue'),
   CollectionCard: () => import('@/components/collection/CollectionCard.vue'),
   EmptyResult: () => import('@/components/common/EmptyResult.vue'),
+  DynamicGrid: () => import('@/components/shared/DynamicGrid.vue'),
 }
 
 @Component<CollectionList>({
@@ -94,10 +96,6 @@ export default class CollectionList extends mixins(
     return this.currentPage
   }
 
-  get classLayout() {
-    return this.$store.getters['preferences/getLayoutClass']
-  }
-
   @Debounce(500)
   private resetPage() {
     this.gotoPage(1)

components/shared/DynamicGrid.vue

@@ -1,16 +1,28 @@
 <template>
   <div ref="container" :style="gridCols">
-    <slot />
+    <slot :is-mobile-variant="isMobileVariant" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useResizeObserver } from '@vueuse/core'
 
-const defaultWidth = {
-  small: 16 * 15, // 15rem
-  large: 16 * 20, // 20rem
-}
+const props = withDefaults(
+  defineProps<{
+    defaultWidth: {
+      small: number
+      large: number
+    }
+    mobileVariant: boolean
+  }>(),
+  {
+    defaultWidth: () => ({
+      small: 16 * 15, // 15rem
+      large: 16 * 20, // 20rem
+    }),
+    mobileVariant: true,
+  }
+)
 
 const { $store } = useNuxtApp()
 
@@ -19,10 +31,17 @@ const containerWidth = ref(0)
 const container = ref<HTMLDivElement | null>(null)
 
 const grid = computed(() => $store.getters['preferences/getGridSize'])
+const isMobileVariant = computed(
+  () => props.mobileVariant && containerWidth.value <= 768
+)
 
 const updateColumns = () => {
   if (containerWidth.value) {
-    cols.value = Math.floor(containerWidth.value / defaultWidth[grid.value])
+    const getCols = Math.floor(
+      containerWidth.value / props.defaultWidth[grid.value]
+    )
+
+    cols.value = isMobileVariant.value ? 2 : getCols
   }
 }
 

components/shared/gallery/Gallery.vue

@@ -17,29 +17,17 @@
           @click="fetchPreviousPage">
           <b-icon icon="chevron-up" />
         </a>
-        <div
-          :id="scrollContainerId"
-          class="columns is-multiline is-hidden-mobile">
-          <div
-            v-for="(nft, index) in results"
-            :key="`${nft.id}-${index}`"
-            :class="`column ${classLayout} ${scrollItemClassName}`">
-            <NftCard :nft="nft" :data-cy="`item-index-${index}`" />
-          </div>
-        </div>
-        <div
-          :id="scrollContainerId"
-          class="columns is-mobile is-multiline is-hidden-tablet">
+        <DynamicGrid :id="scrollContainerId" v-slot="slotProps">
           <div
             v-for="(nft, index) in results"
             :key="`${nft.id}-${index}`"
-            :class="`column ${classLayout} ${scrollItemClassName}`">
+            :class="scrollItemClassName">
             <NftCard
-              variant="minimal"
               :nft="nft"
-              :data-cy="`item-index-${index}`" />
+              :data-cy="`item-index-${index}`"
+              :variant="slotProps.isMobileVariant && 'minimal'" />
           </div>
-        </div>
+        </DynamicGrid>
         <InfiniteLoading
           v-if="canLoadNextPage && !isLoading && total > 0"
           :distance="prefetchDistance"
@@ -101,6 +89,7 @@ const components = {
   SidebarFilter: () => import('@/components/explore/SidebarFilter.vue'),
   BreadcrumbsFilter: () => import('./BreadcrumbsFilter.vue'),
   EmptyResult: () => import('@/components/common/EmptyResult.vue'),
+  DynamicGrid: () => import('@/components/shared/DynamicGrid.vue'),
 }
 
 @Component<Gallery>({