feat: added hidden columns prop

components/Card.vue

@@ -3,6 +3,7 @@ import type { ProjectRating, ProjectShallow } from '~/types'
 
 const props = defineProps<{
   project: ProjectShallow
+  hiddenColumns?: string[]
 }>()
 const { switcher, ecosystems, filter } = storeToRefs(useData())
 
@@ -11,6 +12,14 @@ const isLargeScreen = useMediaQuery('(min-width: 1024px)')
 const ratings: { label: string, type: string, rating: ProjectRating }[] = (props.project.ratings || []).map(rating => ({ label: rating.name, type: 'rating', rating: rating }))
 const ecosystem: { label: string[], type: string } = { label: ecosystems.value.filter(e => (props.project.ecosystem || []).includes(e.id)).map(e => e.icon!), type: 'ecosystem' }
 const projectItems: { label: string | string[], type: string, rating?: ProjectRating }[] = [{ label: props.project.usecases || [], type: 'array' }, ...ratings, ecosystem, { label: [props.project.website || '', props.project.github || '', props.project.twitter || ''], type: 'links' }]
+
+const { width } = useWindowSize()
+const visibleColumnsCount = computed(() => {
+  if (width.value >= 1024)
+    return projectItems.filter(item => item.rating?.type ? !props.hiddenColumns?.includes(item.rating.type) : true).length + 4
+  else
+    return 2
+})
 </script>
 
 <template>
@@ -25,7 +34,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
   >
     <div
       grid
-      grid-cols="2 lg:10"
+      :style="`grid-template-columns: repeat(${visibleColumnsCount}, 1fr)`"
       w-full
     >
 
@@ -89,7 +98,7 @@ const projectItems: { label: string | string[], type: string, rating?: ProjectRa
         </div>
       </div>
       <div
-        v-for="(projectItem, index) of projectItems"
+        v-for="(projectItem, index) of projectItems.filter((item) => item.rating?.type ? !hiddenColumns?.includes(item.rating.type): true)"
         :key="projectItem.label.toString()"
         hidden
         lg:flex

components/Project/ProjectGridGroup.vue

@@ -46,7 +46,18 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
         @click="groupCollapsed = !groupCollapsed"
       />
     </div>
-    <ProjectGridGroupSort v-if="!groupCollapsed" />
+    <ClientOnly>
+      <ProjectGridGroupSort
+        v-if="!groupCollapsed"
+        :hidden-columns="group.title === 'Social & Communications' ? ['technology'] : []"
+      />
+      <template #fallback>
+        <div
+          h-48px
+          w-full
+        />
+      </template>
+    </ClientOnly>
     <div
       v-if="!groupCollapsed"
       grid
@@ -61,6 +72,7 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
         <Card
           v-for="project in group.projects.slice(0, shownProjectsCount)"
           :key="project.id"
+          :hidden-columns="group.title === 'Social & Communications' ? ['technology'] : []"
           :project="project"
         />
 
@@ -79,9 +91,11 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
         text="12px lg:14px"
         leading="24px lg:32px"
         font-bold
-        pt-16px
-        pb-24px
+        mt-24px
+        px-16px
+        py-4px
         text-app-text-grey
+        border="2px white/50"
         @click="shownProjectsCount += 15"
       >
         LOAD MORE

components/Project/ProjectGridGroupSort.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+const props = defineProps<{
+  hiddenColumns?: string[]
+}>()
+
 const { filter } = storeToRefs(useData())
 
 function onChangeSort(sortKey: string) {
@@ -15,6 +19,10 @@ function onChangeSort(sortKey: string) {
   filter.value.sortDirection = sortKey === 'score' ? 'desc' : 'asc'
 }
 
+watch(filter, () => {
+  console.log(filter.value)
+}, { deep: true })
+
 const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[]>([
   { label: 'Usecase', sortKey: 'usecase' },
   { label: 'Openess', sortKey: 'openess', togglable: true },
@@ -24,12 +32,21 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
   { label: 'Links', sortKey: 'links' },
   { label: 'W3PN Score', sortKey: 'score', togglable: true },
 ])
+
+const { width } = useWindowSize()
+const visibleColumnsCount = computed(() => {
+  if (width.value >= 1024)
+    return cardTitles.value.filter(title => !props.hiddenColumns?.includes(title.sortKey)).length + 3
+  else {
+    return 2
+  }
+})
 </script>
 
 <template>
   <div
     grid
-    grid-cols="2 lg:10"
+    :style="`grid-template-columns: repeat(${visibleColumnsCount}, 1fr)`"
     w-full
     mb-16px
   >
@@ -76,7 +93,7 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
       />
     </div>
     <div
-      v-for="(title, index) in cardTitles"
+      v-for="(title, index) in cardTitles.filter((title) => !hiddenColumns?.includes(title.sortKey))"
       :key="title.label"
       lg:flex
       items-center
@@ -100,8 +117,8 @@ const cardTitles = ref< { label: string, sortKey: string, togglable?: boolean }[
       <button
         v-if="title.togglable"
         type="button"
-        :class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-up'
-          : 'i-ic-baseline-arrow-drop-down'
+        :class="[title.sortKey === filter.sortby ? filter.sortDirection === 'desc' ? 'i-ic-baseline-arrow-drop-down'
+          : 'i-ic-baseline-arrow-drop-up'
           : 'i-ic-baseline-arrow-drop-down']"
         text-24px
       />