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

Fixe images width

Browse Source
This commit is contained in:
PascalMarchesseault
2024-11-29 19:37:42 -05:00
parent 7dd2b266e6
commit 25ffbbfe56
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/views/creators/CreatorHome.vue
View File

@@ -3,15 +3,24 @@
:style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
<!-- Bouton Edit -->
<div class="flex justify-end">
<div class="flex justify-end space-x-2">
<button
v-if="isLoggedIn"
@click="toggleEditMode"
class="px-4 py-2 rounded-md hover:opacity-90"
:style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
{{ isEditMode ? 'Terminer' : 'Éditer' }}
{{ isEditMode ? 'Enregistrer' : 'Éditer' }}
</button>
<div v-if="isEditMode">
<button
v-if="isLoggedIn"
class="px-4 py-2 rounded-md hover:opacity-90"
:style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }">
Annuler
</button>
</div>
</div>
<!-- Titre principal -->
<div v-if="isEditMode">
@@ -105,14 +114,13 @@
{{ imagesSubtitle }}
</h2>
<!-- Deux images côte à côte -->
<!-- 4 images côte à côte -->
<div>
<div v-if="isEditMode" class="text-2xl py-2"> Images</div>
<div class="flex justify-center space-x-4">
<!-- Première image -->
<div v-if="image1Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
<!-- Première image -->
<div v-if="image1Url || isEditMode" :class="image1Url" class="relative w-1/2">
<label v-if="isEditMode">
<input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
<img :src="image1Url || fallbackImage"
@@ -128,9 +136,8 @@
</button>
</div>
<!-- Deuxième image -->
<div v-if="image2Url || isEditMode" :class="image1Url ? 'w-1/2' : 'w-full'" class="relative">
<div v-if="image2Url || isEditMode" :class="image1Url" class="relative w-1/2">
<label v-if="isEditMode">
<input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
<img :src="image2Url || fallbackImage"
@@ -147,7 +154,7 @@
</div>
<!-- Troisième image -->
<div v-if="image3Url || isEditMode" :class="image3Url ? 'w-1/2' : 'w-full'" class="relative">
<div v-if="image3Url || isEditMode" :class="image3Url" class="relative w-1/2">
<label v-if="isEditMode">
<input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
<img :src="image3Url || fallbackImage"
@@ -164,7 +171,7 @@
</div>
<!-- Quatrième image -->
<div v-if="image4Url || isEditMode" :class="image4Url ? 'w-1/2' : 'w-full'" class="relative">
<div v-if="image4Url || isEditMode" :class="image4Url " class="relative w-1/2">
<label v-if="isEditMode">
<input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
<img :src="image4Url || fallbackImage"
@@ -279,8 +286,14 @@
<!-- Affichage de l'email -->
<div v-if="email" class="flex items-center space-x-2">
<i class="mdi mdi-email-outline text-2xl"></i>
<span>{{ email }}</span>
<a
:href="`mailto:${email}`"
class="no-underline text-current"
>
{{ email }}
</a>
</div>
</div>
</div>