jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added Goback Button for ContentPage

Browse Source
This commit is contained in:
PascalMarchesseault
2024-08-09 15:50:36 -04:00
parent b575bbc224
commit 6ad0840309
1 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/views/contents/ContentPage.vue
View File

@@ -1,15 +1,21 @@
<template>
<div class="flex h-screen">
<div class="flex h-[calc(100vh-120px)]">
<!-- Section Carousel (gauche) -->
<div class="flex-1 flex items-center justify-center bg-neutral-500 max-h-screen relative">
<!-- Bouton "X" positionné dans le coin supérieur gauche -->
<div class="absolute top-8 left-0">
<v-btn @click="goBack" variant="plain"
class="rounded-full bg-gray-800 text-white w-12 h-12 flex items-center justify-center">
<v-icon class="text-black bg-white rounded-full" size="36">mdi-close</v-icon>
</v-btn>
</div>
<!-- Carousel section (left) -->
<div class="flex-1 flex items-center justify-center bg-neutral-500">
<v-carousel
v-if="data?.urls && data.urls.length > 0"
hide-delimiters
:show-arrows="data.urls.length > 1"
:show-indicators="data.urls.length > 1"
class="w-full h-full flex items-center justify-center"
>
<v-carousel-item
v-for="url in data.urls"
@@ -21,39 +27,32 @@
</v-carousel>
</div>
<!-- Content details section (right) -->
<div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto h-full">
<!-- Content details -->
<!-- Section Détails (droite) -->
<div class="fixed-width border-l-2 p-6 bg-white overflow-y-auto max-h-screen">
<!-- Détails du contenu -->
<div class="border-b-2 p-6 font-sans space-y-2">
<div v-if="data && data.uri">
Uri: {{ data?.uri }}
<!-- Accéder à createdByName -->
<div v-if="data && data.createdByName">
Créé par: {{ data.createdByName }}
</div>
<div v-if="data && data.title" class="font-semibold">
Title: {{ data?.title }}
Titre: {{ data.title }}
</div>
<div v-if="data && data.description">
Description: {{ data?.description }}
</div>
<div v-if="data && data.createdAt">
Date: {{ data?.createdAt }}
</div>
<div v-if="data && data.createdBy">
Creator: {{ data?.createdBy }}
Description: {{ data.description }}
</div>
</div>
<!-- Comments Section -->
<!-- Section Commentaires -->
<div class="border-b-2 p-6">
<h2 class="font-sans font-semibold">Commentaires</h2>
<MessageList :content-id="contentId"></MessageList>
</div>
<!-- Post a new message -->
<!-- Poster un nouveau message -->
<div class="border-b-2 p-6">
<PostMessage :content-id="contentId"></PostMessage>
</div>
</div>
</div>
</template>
@@ -85,6 +84,10 @@ const fetchContentData = async (contentId) => {
}
};
function goBack() {
window.history.go(-1);
}
onMounted(() => {
fetchContentData(contentId.value);
});