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

Big cleanup for styling

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-12 16:41:22 -05:00
parent 574c0e1dc6
commit a1c8d34332
6 changed files with 58 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,10 +28,10 @@
<div>
<!-- Main image Bloc D'information-->
<div class="py-4" >
<div class="py-4">
<div v-if="!isEditMode">
<p class="py-4 text-justify" v-if="mainImageText ">
<p v-if="mainImageText ">
{{ mainImageText }}
</p>
</div>
@@ -45,11 +45,10 @@
v-if="mainImageUrl"
:src="mainImageUrl"
alt="Image principale"
class="max-w-full h-auto cursor-pointer"
@click="openFullscreen(mainImageUrl)" />
class="max-w-full h-auto cursor-pointer"/>
</div>
<div v-if="isEditMode" class="relative flex justify-center">
<label >
<label>
<input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
<img :src="mainImageUrl || fallbackImage"
alt="Image principale"
@@ -68,7 +67,7 @@
</h2>
<div v-if="!isEditMode">
<p v-if="mainVideoText" class="text-lg text-justify mt-5 mb-4">
<p v-if="mainVideoText">
{{ mainVideoText }}
</p>
</div>
@@ -85,7 +84,7 @@
</div>
</div>
<div >
<div>
<div v-if="!isEditMode" class="py-5 text-lg font-bold">
{{ videoSubtitle }}
</div>
@@ -98,10 +97,15 @@
></v-text-field>
</div>
<v-textarea v-if="isEditMode" rows="10" variant="outlined" v-model="editableImagesText" class="w-full p-2 border rounded-md"></v-textarea>
<v-textarea v-if="isEditMode"
v-model="editableImagesText"
class="w-full p-2 border rounded-md"
rows="10"
variant="outlined">
</v-textarea>
<div v-if="!isEditMode">
<p v-if="imagesText " class="text-lg text-justify">
<p v-if="imagesText ">
{{ imagesText }}
</p>
</div>
@@ -135,7 +139,7 @@
<!-- Images -->
<div v-if="!isEditMode">
<div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText " >
<div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
<!-- images-->
<div class="py-2">
<FullscreenImage ref="fullscreenImage" :image-url="currentImage"/>
@@ -143,27 +147,31 @@
<!-- Affichage des images -->
<div class="flex gap-2">
<!-- Première image -->
<div class="relative w-full sm:flex-1 " v-if="image1Url"
@click="openFullscreen(image1Url)">
<img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer"/>
<div v-if="image1Url" class="relative w-full sm:flex-1 ">
<img :src="image1Url"
alt="Image 1"
class="rounded-md max-w-full h-auto cursor-pointer"/>
</div>
<!-- Deuxième image -->
<div class="relative w-full sm:flex-1 " v-if="image2Url"
@click="openFullscreen(image2Url)">
<img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer"/>
<div v-if="image2Url" class="relative w-full sm:flex-1 ">
<img :src="image2Url"
alt="Image 2"
class="rounded-md max-w-full h-auto cursor-pointer"/>
</div>
<!-- Troisième image -->
<div class="relative w-full sm:flex-1 " v-if="image3Url"
@click="openFullscreen(image3Url)">
<img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer"/>
<div v-if="image3Url" class="relative w-full sm:flex-1 ">
<img :src="image3Url"
alt="Image 3"
class="rounded-md max-w-full h-auto cursor-pointer"/>
</div>
<!-- Quatrième image -->
<div class="relative w-full sm:flex-1 " v-if="image4Url"
@click="openFullscreen(image4Url)">
<img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer"/>
<div v-if="image4Url" class="relative w-full sm:flex-1 ">
<img :src="image4Url"
alt="Image 4"
class="rounded-md max-w-full h-auto cursor-pointer"/>
</div>
</div>
</div>
@@ -255,7 +263,7 @@
<!-- Contact Info-->
<div v-if="!isEditMode">
<div v-if="phoneNumber || email" class="mb-6" >
<div v-if="phoneNumber || email" class="mb-6">
<!-- mobile-->
<div v-if="smAndDown">
<div class="flex flex-col space-y-10 mt-12 justify-center items-center">
@@ -302,12 +310,11 @@
</template>
<script setup>
import {onMounted, ref, watch} from "vue";
import {onMounted, ref} from "vue";
import {useClient} from "@/plugins/api.js";
import {useBrandingStore} from "@/stores/brandingStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useDisplay} from "vuetify";
import FullscreenImage from "@/views/creators/FullscreenImage.vue";
const {smAndDown} = useDisplay();
@@ -353,13 +360,6 @@ const editableEmail = ref("");
const editableImages = ref([null, null, null, null]);
function openFullscreen(imageUrl) {
currentImage.value = imageUrl;
fullscreenImage.value.open();
}
watch(smAndDown, () => {});
// Activer/désactiver le mode édition
function toggleEditMode() {
isEditMode.value = !isEditMode.value;