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

CreatorHome - Add an Image Fallback and Improve UI

Browse Source
This commit is contained in:
PascalMarchesseault
2025-01-20 00:08:31 -05:00
parent f3589e607a
commit 76f467296b
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/views/creators/CreatorHome.vue
View File

@@ -20,8 +20,9 @@
</div>
<!-- MainPage -->
<div v-if="!isEditMode" class="rounded-2xl flex flex-col">
<div v-if="!isEditMode" class=" flex flex-col" >
<div v-if=" mainTitle || mainImageUrl || mainImageText || videoSubtitleMain || videoUrlMain || mainVideoText || imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText || videoSubtitle || videoUrl || videoText" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }" class="rounded-2xl py-4" >
<!-- Main image -->
<div v-if="mainTitle || mainImageUrl || mainImageText " class="py-4" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
<div v-if="mainTitle">
@@ -33,7 +34,7 @@
v-if="mainImageUrl"
:src="mainImageUrl"
alt="Image principale"
class="rounded-2xl max-w-full h-auto cursor-pointer flex center"
class=" max-w-full h-auto cursor-pointer flex center"
@click="openFullscreen(mainImageUrl)"/>
</div>
@@ -138,7 +139,7 @@
<div v-if="editablePhoneNumber || editableEmail" class="mb-6" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
<!-- mobile-->
<div v-if="smAndDown">
<div class="flex flex-col space-y-10 justify-center items-center">
<div class="flex flex-col space-y-10 mt-12 justify-center items-center">
<!-- Affichage du téléphone -->
<div v-if="editablePhoneNumber" class="flex items-center space-x-2">
<i class="mdi mdi-phone-outline text-2xl"></i>
@@ -159,7 +160,7 @@
<!--pc-->
<div v-if="!smAndDown">
<div class="flex space-x-64 space-y-4 justify-center items-center">
<div class="flex space-x-64 space-y-4 mt-9 justify-center items-center">
<!-- Affichage du téléphone -->
<div v-if="editablePhoneNumber" class="flex items-center space-x-2">
<i class="mdi mdi-phone-outline text-2xl"></i>
@@ -180,8 +181,9 @@
</div>
</div>
</div>
</div>
<!-- Editmode-->
<div v-if="isEditMode" class="space-y-10">
@@ -199,7 +201,7 @@
<input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
<img :src="mainImageUrl || fallbackImage"
alt="Image principale"
class=" max-w-full h-auto cursor-pointer"/>
class=" max-w-full h-auto cursor-pointer max-h-96"/>
</label>
<button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
@@ -215,7 +217,7 @@
<!--Main VideoUrl-->
<div class="rounded-2xl"
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface}">
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
<!--Titre Video-->
<div class="text-2xl pa-4">Vidéo Princpiale</div>
<v-text-field
@@ -246,7 +248,7 @@
<!-- 4 images-->
<div class="rounded-2xl"
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface}">
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
<div v-if="isEditMode">
<div class="text-2xl pa-4">Galerie d'images</div>
@@ -323,7 +325,7 @@
<!-- Second Video -->
<div class="rounded-2xl"
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface }">
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
<div class="text-2xl pa-4">Vidéo Secondaire</div>
<v-text-field
@@ -351,7 +353,7 @@
<!-- Informations de Contact -->
<div class="rounded-2xl"
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface }">
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
<div class="text-2xl pa-4">Informations de Contact</div>
<v-text-field
@@ -408,7 +410,7 @@ watch(smAndDown, (newVal) => {
});
// Image de fallback pour l'éditeur
const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
const fallbackImage = "/medias/emptyimage.png";
// Variables réactives pour les données
const editablePhoneNumber = ref("");