Tweaking Post UI

src/views/contents/ContentCard.vue

@@ -1,15 +1,47 @@
-<script setup>
+<template>
+  <div class="shadow-md rounded-2xl bg-gray-50 px-6 ">
+    <div>
+      <v-card-title>
+        {{ props.content.title }}
+        <span class="text-subtitle-2">
+          {{ time_ago(props.content.createdAt) }}
+        </span>
+        <v-card-text>
+          {{ props.content.description }}
+        </v-card-text>
+      </v-card-title>
 
-import {computed, reactive, onMounted} from 'vue';
+      <v-carousel v-if="hasUrls" hide-delimiter-background show-arrows="hover">
+        <v-carousel-item
+            v-for="url in props.content.urls"
+            :key="url"
+            class="image-container rounded-2xl"
+        >
+          <component :is="getComponent(url)" :src="url"></component>
+        </v-carousel-item>
+      </v-carousel>
+    </div>
+
+    <div>
+      <div>
+        <h2 class="font-sans font-semibold mt-4">Commentaires</h2>
+        <message-list :subject-id="props.content.id" :messages="messages"></message-list>
+      </div>
+
+      <div class="py-2">
+        <post-message :subject-id="props.content.id" @message-posted="addMessage"></post-message>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed, reactive} from 'vue';
 import {time_ago} from "@/internal_time_ago.js";
 import MessageList from "@/views/messages/MessageList.vue";
 import PostMessage from "@/views/messages/PostMessage.vue";
-
 import YoutubePlayer from './YoutubePlayer.vue';
 import ImageViewer from './ImageViewer.vue';
-// import VimeoPlayer from '@/components/VimeoPlayer.vue';
-// import AudioPlayer from '@/components/AudioPlayer.vue';
-// import BlogViewer from '@/components/BlogViewer.vue';
 
 const props = defineProps({
   content: {
@@ -20,81 +52,32 @@ const props = defineProps({
 
 const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);
 
-
 const messages = reactive([]);
 
 function addMessage(newMessage) {
-  messages.unshift(newMessage)
+  messages.unshift(newMessage);
 }
 
 function getComponent(url) {
   if (url.includes('youtube.com') || url.includes('youtu.be')) {
     return YoutubePlayer;
-    // } else if (url.includes('vimeo.com')) {
-    //   return VimeoPlayer;
   } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
     return ImageViewer;
-    // } else if (url.match(/\.(mp3|wav|ogg)$/)) {
-    //   return 'AudioPlayer';
-    // } else {
-    //   return 'BlogViewer';
   }
 }
-
 </script>
 
-<template>
-  <div class="shadow-md rounded-lg bg-gray-50 px-10">
-    <v-card
-        outlined
-        tile
-    >
-      <v-card-title>
-        {{ props.content.title }}
-        <span class="text-subtitle-2">
-          {{ time_ago(props.content.createdAt) }}
-        </span>
-      </v-card-title>
+<style>
+.image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
 
-      <v-carousel v-if="hasUrls">
-
-        <v-carousel-item
-            v-for="url in props.content.urls"
-            :key="url"
-        >
-          <component :is="getComponent(url)"
-                     :src="url"
-          ></component>
-        </v-carousel-item>
-
-      </v-carousel>
-
-      <v-card-text>
-        {{ props.content.description }}
-      </v-card-text>
-
-      <v-card-actions>
-        <router-link :to="'content/' + content.id">
-          <div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
-        </router-link>
-      </v-card-actions>
-
-    </v-card>
-
-    <div>
-      <div>
-        <h2 class="font-sans font-semibold mt-4">Commentaires</h2>
-        <message-list :subject-id="props.content.id" :messages="messages">
-        </message-list>
-      </div>
-
-      <div class="py-2">
-        <post-message :subject-id="props.content.id" @message-posted="addMessage">
-        </post-message>
-      </div>
-
-    </div>
-
-  </div>
-
-</template>
+.image-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

src/views/contents/ImageViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="image-container">
-    <img :src="src" alt="Image" class="image" />
+    <img :src="src" alt="Image" class="full-size-image" />
   </div>
 </template>