feat: dynamic grid on new collection

components/explore/ExploreGrid.vue

@@ -5,13 +5,13 @@
         <NeoButton
           icon-left="th-large"
           :active="gridLayoutSize === smallGridLayout"
-          @click.native="changeGridLayout(smallGridLayout)" />
+          @click.native="changeGridLayout(smallGridLayout, 'large')" />
       </p>
       <p class="control">
         <NeoButton
           icon-left="th"
           :active="gridLayoutSize === largeGridLayout"
-          @click.native="changeGridLayout(largeGridLayout)" />
+          @click.native="changeGridLayout(largeGridLayout, 'small')" />
       </p>
     </b-field>
   </div>
@@ -30,7 +30,8 @@ const largeGridLayout = ref(
   'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
 )
 
-const changeGridLayout = (layout: string) => {
+const changeGridLayout = (layout: string, grid: string) => {
   $store.dispatch('preferences/setGalleryLayoutClass', layout)
+  $store.dispatch('preferences/setGridSize', grid)
 }
 </script>

components/explore/ExploreIndex.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="explore is-flex is-flex-wrap-wrap">
-    <ExploreTabItem />
+    <ExploreTabs />
     <div class="explore-menu is-flex">
       <ExploreSort />
       <ExploreOffer />
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import ExploreTabItem from './ExploreTabItem.vue'
+import ExploreTabs from './ExploreTabs.vue'
 import ExploreSort from './ExploreSort.vue'
 import ExploreChain from './ExploreChain.vue'
 import ExploreGrid from './ExploreGrid.vue'

components/items/ItemsGrid/ItemsGrid.vue

@@ -3,23 +3,19 @@
     <!-- TODO: breadcrumbs filter here -->
     <p>total: {{ total }}</p>
     <hr />
-    <div
-      class="columns is-multiline is-align-content-flex-start"
-      style="min-height: 100vh">
-      <div
-        v-for="(nft, index) in nfts"
-        :key="`${nft.id}=${index}`"
-        class="column is-3">
+    <DynamicGrid>
+      <div v-for="(nft, index) in nfts" :key="`${nft.id}=${index}`">
         <ItemsGridImage :nft="nft" />
       </div>
-    </div>
+    </DynamicGrid>
     <div ref="reachBottom">bottom</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useIntersectionObserver } from '@vueuse/core'
 
+import DynamicGrid from '@/components/shared/DynamicGrid.vue'
 import ItemsGridImage from './ItemsGridImage.vue'
 import { useFetchSearch } from './useItemsGrid'
 

components/shared/DynamicGrid.vue

@@ -0,0 +1,44 @@
+<template>
+  <div ref="container" :style="gridCols">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+
+const defaultWidth = {
+  small: 16 * 15, // 15rem
+  large: 16 * 20, // 20rem
+}
+
+const { $store } = useNuxtApp()
+
+const cols = ref(5)
+const containerWidth = ref(0)
+const container = ref<HTMLDivElement | null>(null)
+
+const grid = computed(() => $store.getters['preferences/getGridSize'])
+
+const updateColumns = () => {
+  if (containerWidth.value) {
+    cols.value = Math.floor(containerWidth.value / defaultWidth[grid.value])
+  }
+}
+
+useResizeObserver(container, (entries) => {
+  const entry = entries[0]
+  containerWidth.value = entry.contentRect.width
+  updateColumns()
+})
+
+watch(grid, () => {
+  updateColumns()
+})
+
+const gridCols = computed(() => ({
+  display: 'grid',
+  gap: '2rem',
+  gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`,
+}))
+</script>

store/preferences.ts

@@ -19,6 +19,7 @@ export const state = (): {
   replaceBuyNowWithYolo: boolean
   enableAllArtwork: boolean
   enableGyroEffect: boolean
+  gridSize: 'small' | 'large'
   // Minting
   hasSupport: boolean
   hasCarbonOffset: boolean
@@ -45,6 +46,7 @@ export const state = (): {
   arweaveUpload: false,
   enableAllArtwork: true,
   enableGyroEffect: false,
+  gridSize: 'small',
 })
 
 export type PreferencesState = ReturnType<typeof state>
@@ -71,6 +73,7 @@ export const getters: GetterTree<PreferencesState, PreferencesState> = {
   getArweaveUpload: ({ arweaveUpload }) => arweaveUpload,
   getLoadAllArtwork: ({ enableAllArtwork }) => enableAllArtwork,
   getEnableGyroEffect: ({ enableGyroEffect }) => enableGyroEffect,
+  getGridSize: ({ gridSize }) => gridSize,
 }
 
 export const mutations: MutationTree<PreferencesState> = {
@@ -145,6 +148,9 @@ export const mutations: MutationTree<PreferencesState> = {
   SET_ENABLE_GYRO_EFFECT(state: PreferencesState, data) {
     state.enableGyroEffect = data
   },
+  SET_GRID_SIZE(state: PreferencesState, data) {
+    state.gridSize = data
+  },
 }
 
 export const actions: ActionTree<PreferencesState, PreferencesState> = {
@@ -205,4 +211,7 @@ export const actions: ActionTree<PreferencesState, PreferencesState> = {
   setEnableGyroEffect({ commit }: { commit: Commit }, data) {
     commit('SET_ENABLE_GYRO_EFFECT', data)
   },
+  setGridSize({ commit }: { commit: Commit }, data) {
+    commit('SET_GRID_SIZE', data)
+  },
 }