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

Merged with new stuff for CreatorPage

Browse Source
This commit is contained in:
Dominic Villemure
2024-07-05 23:50:45 -04:00
parent 4f2fa68daf
commit 97dcd419bb
4 changed files with 168 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/main/CreatorBanner.vue
View File

@@ -1,118 +0,0 @@
<template>
<!-- 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: user.profileColors.bannerTop }">
<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 ">
<a
v-for="socialNetwork in GetActiveSocialNetworkUrls()"
: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="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
</a>
</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="user.storedDataUrls.bannerPictureUrl" 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: user.profileColors.accent }">{{ user.firstName }}</p>
</div>
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">
<p :style="{ color: user.profileColors.accent }">{{ user.lastName }}</p>
</div>
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">
<p :style="{ color: user.profileColors.accent }">{{ user.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" :style="{ backgroundColor: user.profileColors.bannerBottom }">
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
<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"
:src="user.storedDataUrls.profilePictureUrl"
alt="Profile Picture"
:style="{ borderColor: user.profileColors.accent, maxWidth: '250px', width: '100%' }"
>
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm: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">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button>
<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>
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {defineProps, ref} from "vue";
const props = defineProps({
user: { type: Object, required: true },
});
const isDialogActive = ref(false);
function GetActiveSocialNetworkUrls(){
const socialNetworks = [];
const userSocialNetworks = props.user.socialNetworks;
if (userSocialNetworks.facebookUrl !== ''){
socialNetworks.push({icon: "mdi-facebook", url: props.user.socialNetworks.facebookUrl})
}
if (userSocialNetworks.facebookUrl !== ''){
socialNetworks.push({icon: "mdi-twitter", url: props.user.socialNetworks.xUrl})
}
if (userSocialNetworks.instagramUrl !== ''){
socialNetworks.push({icon: "mdi-instagram", url: props.user.socialNetworks.instagramUrl})
}
if (userSocialNetworks.tiktokUrl !== ''){
socialNetworks.push({icon: "/images/hutopymedia/icons/white/tiktokwhite.png", url: props.user.socialNetworks.tikTokUrl})
}
if (userSocialNetworks.youtubeUrl !== ''){
socialNetworks.push({icon: "mdi-youtube", url: props.user.socialNetworks.youtubeUrl})
}
if (userSocialNetworks.yourWebsiteUrl !== ''){
socialNetworks.push({icon: "mdi-web", url: props.user.socialNetworks.yourWebsiteUrl})
}
return socialNetworks;
}
</script>

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

@@ -10,7 +10,7 @@
</div>
<div class="bg-gray-100 rounded-b-2xl p-4">
<div class="mx-2">
<StripePayment></StripePayment>
<StripePayment :creator-id="creatorId"></StripePayment>
</div>
</div>
</div>
@@ -27,13 +27,18 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import {ref, onMounted, onUnmounted, defineProps} from 'vue';
import StripePayment from "@/views/StripePayment.vue";
const showPopup = ref(false);
const popup = ref(null);
const popupButton = ref(null);
const props = defineProps({
creatorId: { type: String, required: true },
});
const togglePopup = () => {
showPopup.value = !showPopup.value;
};