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

I have repositioned the user information and also added a tool to determine the screen size on the creator's page to facilitate development.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-13 01:34:28 -04:00
committed by Jonathan Bourdon
parent aba12d921b
commit 098104404c
3 changed files with 64 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/creators/CreatorBanner.vue
View File

@@ -1,17 +1,17 @@
<template>
<seize-indicator></seize-indicator>
<!-- Bannière-->
<div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col">
<!-- Social Network-->
<div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
<div class="text-lg">1000+ Abonnés</div>
<div class="text-sm">500 Contacts en commun</div>
</div>
<div class="grid grid-cols-6 md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
<div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
<div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
<a
v-for="socialNetwork in GetActiveSocialNetworkUrls()"
:href="socialNetwork.url" target="_blank"
:href="socialNetwork.url"
target="_blank"
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
<v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
<img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9" alt="Tiktok">
@@ -22,40 +22,46 @@
</div>
<!--Banner & user info-->
<div class="relative">
<!--Banner-->
<div>
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'" alt="Profile Banner" style="max-height: 550px">
</div>
<!--User info -->
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
<div class="text-white">
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }}</p>
</div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: creator.profileColors.accent }">{{ creator.lastName }}</p>
</div>
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
<p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- Actions Button & image profile -->
<div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg min-h-24" :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
<div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
<!-- Profile Image Wrapper -->
<div class="relative flex justify-center lg:w-auto lg:justify-start">
<!-- Profile Image -->
<div class="absolute lg:ml-72 transform -translate-y-1/2 lg:-translate-y-1/2 z-20">
<img
class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
:src="creator.storedDataUrls.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'"
alt="Profile Picture"
:style="{ borderColor: creator.profileColors.accent || '#A30E79', maxWidth: '250px', width: '100%' }"
>
<div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
:style="{ borderColor: creator.profileColors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
/>
</div>
</div>
<!-- User Info -->
<div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
<div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24">
<p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }} {{ creator.lastName }}</p>
</div>
<div class="text-2xl text-center lg:text-left">
<p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
</div>
<div class="text-lg" :style="{ color: creator.profileColors.accent }">1000+ Abonnés</div>
</div>
<!-- Buttons -->
<div v-if="creator.id === userStore.getCurrentUser().id" class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
@click="isDialogActive = true">
@@ -79,6 +85,12 @@
</div>
</div>
<!--Post-modale-->
<v-dialog v-model="isDialogActive" max-width="500">
<template v-slot:default="{ isActive }">
@@ -120,6 +132,7 @@
import {defineProps, ref} from "vue";
import {useUserStore} from "@/stores/user.js";
import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
const props = defineProps({
creator: { type: Object, required: true },

2
src/views/main/DonationPopup.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="fixed z-50 bottom-10 right-10 flex flex-column">
<div class="fixed z-50 bottom-6 right-6 flex flex-column">
<div
v-if="showPopup"
ref="popup"

16
src/views/tools/SeizeIndicator.vue Normal file
View File

@@ -0,0 +1,16 @@
<template>
<div class="fixed bottom-0 left-0 m-4 z-50">
<div class="hidden sm:block md:hidden bg-blue-500 text-white p-2 rounded">
sm
</div>
<div class="hidden md:block lg:hidden bg-green-500 text-white p-2 rounded">
md
</div>
<div class="hidden lg:block xl:hidden bg-yellow-500 text-black p-2 rounded">
lg
</div>
<div class="hidden xl:block bg-red-500 text-white p-2 rounded">
xl
</div>
</div>
</template>