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

Wip

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-14 22:01:26 -04:00
committed by Jonathan Bourdon
parent 7794f126d0
commit 66888bee9e
3 changed files with 71 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,12 @@
<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 py-4 px-4 min-h-14" :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
<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()"
@@ -18,20 +19,23 @@
</a>
</div>
</div>
</div>
</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>
<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>
</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="bg-gray-800 py-4 relative shadow-lg min-h-24"
:style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
<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">
@@ -58,18 +62,18 @@
</div>
<!-- Buttons -->
<div 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 ml-">
<CreatePostButton :creator="creator" />
<div
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 ml-">
<AboutYou :creator="creator"></AboutYou>
<button class="text-white py-2 px-4 rounded"
style="background-color: #333; transition: background-color 0.3s ease;"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
S'ABONNER
</button>
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
</button>
<AboutYou :creator="creator"></AboutYou>
<CreatePostButton :creator="creator"/>
</div>
</div>
</div>
@@ -81,35 +85,39 @@ import CreatePostButton from "@/views/creators/CreatePostButton.vue";
import {defineProps, ref} from "vue";
import SeizeIndicator from "@/views/tools/SeizeIndicator.vue";
import AboutYou from "@/views/creators/AboutYou.vue";
const props = defineProps({
creator: { type: Object, required: true },
creator: {type: Object, required: true},
});
function GetActiveSocialNetworkUrls(){
function GetActiveSocialNetworkUrls() {
const socialNetworks = [];
const userSocialNetworks = props.creator.socialNetworks;
if (userSocialNetworks.facebookUrl !== ''){
if (userSocialNetworks.facebookUrl !== '') {
socialNetworks.push({icon: "mdi-facebook", url: props.creator.socialNetworks.facebookUrl})
}
if (userSocialNetworks.facebookUrl !== ''){
if (userSocialNetworks.facebookUrl !== '') {
socialNetworks.push({icon: "mdi-twitter", url: props.creator.socialNetworks.xUrl})
}
if (userSocialNetworks.instagramUrl !== ''){
if (userSocialNetworks.instagramUrl !== '') {
socialNetworks.push({icon: "mdi-instagram", url: props.creator.socialNetworks.instagramUrl})
}
if (userSocialNetworks.tiktokUrl !== ''){
socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.creator.socialNetworks.tikTokUrl})
if (userSocialNetworks.tiktokUrl !== '') {
socialNetworks.push({
icon: "/images/hutopymedia/icons/white/tiktokwhite.png",
url: props.creator.socialNetworks.tikTokUrl
})
}
if (userSocialNetworks.youtubeUrl !== ''){
if (userSocialNetworks.youtubeUrl !== '') {
socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})
}
if (userSocialNetworks.yourWebsiteUrl !== ''){
const websiteIconWithBackup = props.creator.storedDataUrls.websiteIconUrl === '' ? "mdi-web" : props.creator.storedDataUrls.websiteIconUrl;
socialNetworks.push({icon: websiteIconWithBackup, url: props.creator.socialNetworks.yourWebsiteUrl})
}
return socialNetworks;
}
</script>