Added grid

src/views/contents/ContentList.vue

@@ -1,12 +1,14 @@
 <template>
-  
   <div>
-    
-    <v-infinite-scroll :items="contents"
-                       :onLoad="fetchContents">
-
-      <!-- TODO: the -mt-4 is necessary because the v-infinite-scroll has some 'top' panel offsetting the list -->
-      <div class="flex flex-column gap-4 -mt-4">
+    <v-infinite-scroll :items="contents" :onLoad="fetchContents">      
+      <div class="grid gap-2 -mt-4"
+           :class="{
+             'grid-cols-1': isExtraSmallScreen,
+             'grid-cols-2': isSmallScreen,
+             'grid-cols-3': isMediumScreen,
+             'grid-cols-4': isLargeScreen,
+             'grid-cols-5': isExtraLargeScreen
+           }">
         <template v-for="content in contents" :key="content.id">
           <component
               :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
@@ -15,7 +17,7 @@
           ></component>
         </template>
       </div>
-     
+
       <template v-slot:empty>
         Il n'y a pas plus de contenus
       </template>
@@ -23,22 +25,15 @@
       <template v-slot:error>
         <v-alert type="error">{{ errorMessage }}</v-alert>
       </template>
-
     </v-infinite-scroll>
-    
   </div>
-  
 </template>
 
-<style>
-
-</style>
-
 <script setup>
-import {useClient} from '@/plugins/api.js';
-import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
 import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
+import { useClient } from '@/plugins/api.js';
 
 const props = defineProps({
   creatorId: {
@@ -47,15 +42,24 @@ const props = defineProps({
   }
 });
 
-const client = useClient()
-const contents = ref([])
-const errorMessage = ref()
-let last_id = null
+const client = useClient();
+const contents = ref([]);
+const errorMessage = ref();
+let last_id = null;
 
+
+const isExtraSmallScreen = ref(false);
 const isSmallScreen = ref(false);
+const isMediumScreen = ref(false);
+const isLargeScreen = ref(false);
+const isExtraLargeScreen = ref(false);
 
 const updateScreenSize = () => {
-  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
+  isExtraSmallScreen.value = window.matchMedia('(max-width: 640px)').matches;
+  isSmallScreen.value = window.matchMedia('(min-width: 641px) and (max-width: 768px)').matches;
+  isMediumScreen.value = window.matchMedia('(min-width: 769px) and (max-width: 1024px)').matches;
+  isLargeScreen.value = window.matchMedia('(min-width: 1025px) and (max-width: 1280px)').matches;
+  isExtraLargeScreen.value = window.matchMedia('(min-width: 1281px)').matches;
 };
 
 onMounted(() => {
@@ -67,51 +71,49 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', updateScreenSize);
 });
 
+
 async function onContentDeleted(contentId) {
-  contents.value = contents.value.filter(c => c.id !== contentId)
+  contents.value = contents.value.filter(c => c.id !== contentId);
 }
 
 const creatorIdWatcher = watch(
     () => props.creatorId,
     (newCreatorId) => {
       if (newCreatorId) {
-        contents.value = []
-        last_id = null
-        fetchContents({
-          done: () => {
-          }
-        });
+        contents.value = [];
+        last_id = null;
+        fetchContents({ done: () => {} });
       }
-    })
+    }
+);
 
-async function fetchContents({done, page_size = 10}) {
-  if (props.creatorId == null) return
+async function fetchContents({ done, page_size = 10 }) {
+  if (props.creatorId == null) return;
 
   try {
-    let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
-    if (last_id !== null) uri = uri + `&last_id=${last_id}`
+    let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`;
+    if (last_id !== null) uri = uri + `&last_id=${last_id}`;
 
-    const response = await client.get(uri)
+    const response = await client.get(uri);
 
     if (response.status >= 200 && response.status < 300) {
-
-      const contentCount = response.data.length
+      const contentCount = response.data.length;
 
       if (contentCount > 0) {
-        contents.value.push(...response.data)
-        const [last_content] = response.data.slice(-1)
-        last_id = last_content.id
+        contents.value.push(...response.data);
+        const [last_content] = response.data.slice(-1);
+        last_id = last_content.id;
       }
 
       if (contentCount < page_size)
-        done('empty')
+        done('empty');
       else
-        done('ok')
+        done('ok');
     }
   } catch (error) {
     console.error("Failed to fetch posts", error);
     errorMessage.value = error.message || "Failed to fetch contents";
-    done('error')
+    done('error');
   }
 }