Update Cards UI

src/views/contents/ContentList.vue

@@ -2,12 +2,18 @@
 
   <v-infinite-scroll :items="contents"
                      :onLoad="fetchContents"
-                     class="gap-2">
+                     class="md:gap-2">
 
-    <template v-for="content in contents" :key="content">
-      <content-card :content="content"               
-                    @content-deleted="onContentDeleted"
-      ></content-card>
+    <template v-for="content in contents" :key="content.id">
+
+      <div class="d-sm-none mb-1">
+        <content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
+      </div>
+
+     
+      <div class="d-none d-sm-flex">
+        <content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
+      </div>
     </template>
 
     <template v-slot:empty>
@@ -22,11 +28,12 @@
 
 </template>
 
-<script setup>
 
+<script setup>
 import {useClient} from '@/plugins/api.js';
 import {ref, watch} from 'vue';
-import ContentCard from "./ContentCard.vue";
+import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
+import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 
 const props = defineProps({
   creatorId: {
@@ -52,10 +59,8 @@ const creatorIdWatcher = watch(
     () => props.creatorId,
     (newCreatorId) => {
       if (newCreatorId) {
-        // Reset contents and last_id when the creatorId changes
         contents.value = []
         last_id = null
-        // Fetch contents for the new creator
         fetchContents({
           done: () => {
           }
@@ -65,7 +70,7 @@ const creatorIdWatcher = watch(
 
 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}`
@@ -94,4 +99,4 @@ async function fetchContents({done, page_size = 10}) {
   }
 }
 
-</script>
+</script>