tweaking Post Ui card

This commit is contained in:
PascalMarchesseault
2024-08-07 12:07:58 -04:00
parent c67b83d367
commit 38df1039d9
3 changed files with 9 additions and 6 deletions

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="shadow-md rounded-2xl bg-gray-50 px-6 "> <div class="shadow-md rounded-2xl bg-gray-50 border custom-border">
<div> <div>
<v-card-title> <v-card-title>
{{ props.content.title }} {{ props.content.title }}
@@ -15,14 +15,14 @@
<v-carousel-item <v-carousel-item
v-for="url in props.content.urls" v-for="url in props.content.urls"
:key="url" :key="url"
class="image-container rounded-2xl" class="image-container"
> >
<component :is="getComponent(url)" :src="url"></component> <component :is="getComponent(url)" :src="url"></component>
</v-carousel-item> </v-carousel-item>
</v-carousel> </v-carousel>
</div> </div>
<div> <div class="p-4">
<div> <div>
<h2 class="font-sans font-semibold mt-4">Commentaires</h2> <h2 class="font-sans font-semibold mt-4">Commentaires</h2>
<message-list :subject-id="props.content.id" :messages="messages"></message-list> <message-list :subject-id="props.content.id" :messages="messages"></message-list>
@@ -80,4 +80,8 @@ function getComponent(url) {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.custom-border {
border-color: #EAEBEC;
}
</style> </style>

View File

@@ -5,7 +5,7 @@
<template v-for="content in contents"> <template v-for="content in contents">
<content-card :content="content" <content-card :content="content"
class="w-full p-2 my-2" class="w-full my-2"
></content-card> ></content-card>
</template> </template>

View File

@@ -5,13 +5,12 @@
<donation-popup :creator-id="creator.id"></donation-popup> <donation-popup :creator-id="creator.id"></donation-popup>
<div class="max-w-[1000px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 "> <div class="max-w-[850px] mx-auto flex flex-row justify-center border-l-2 border-r-2 -mt-6 ">
<div class="w-full h-full mx-1"> <div class="w-full h-full mx-1">
<content-list :creator-id="creator.id"> <content-list :creator-id="creator.id">
</content-list> </content-list>
</div> </div>
</div> </div>
</div> </div>
<!-- Fallback when user try to access a non-existing creator --> <!-- Fallback when user try to access a non-existing creator -->