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

54
src/views/creators/AboutYou.vue
View File

@@ -12,7 +12,7 @@
<v-card-title>
À propos
<br><br>
<div class="flex justify-center"> {{ creator.about }}</div>
<div class="flex justify-center">{{ creator.about }}</div>
<br>
</v-card-title>
<v-card-text class="scrollable-content">
@@ -28,40 +28,62 @@
</template>
<script setup>
import {ref} from 'vue';
import {useUserStore} from "@/stores/user.js";
import { ref, onMounted } from 'vue';
const AboutUs = ref(false);
const props = defineProps({
creator: {type: Object, required: true},
creator: { type: Object, required: true },
});
onMounted(() => {
const style = document.createElement('style');
style.innerHTML = `
.scrollable-content::-webkit-scrollbar-thumb {
background-color: ${props.creator.profileColors.menu};
border-radius: 10px;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
background-color: ${shadeColor(props.creator.profileColors.accent, -10)};
}
`;
document.head.appendChild(style);
});
function shadeColor(color, percent) {
const f = parseInt(color.slice(1), 16),
t = percent < 0 ? 0 : 255,
p = percent < 0 ? percent * -1 : percent,
R = f >> 16,
G = (f >> 8) & 0x00ff,
B = f & 0x0000ff;
return (
"#" +
(
0x1000000 +
(Math.round((t - R) * p) + R) * 0x10000 +
(Math.round((t - G) * p) + G) * 0x100 +
(Math.round((t - B) * p) + B)
)
.toString(16)
.slice(1)
);
}
</script>
<style scoped>
.scrollable-content {
max-height: 600px;
overflow-y: auto;
}
.scrollable-content::-webkit-scrollbar {
width: 6px;
}
.scrollable-content::-webkit-scrollbar-thumb {
background-color: #A30E79;
border-radius: 10px;
}
.scrollable-content::-webkit-scrollbar-thumb:hover {
background-color: #a21caf;
}
.transparent-btn {
background-color: transparent;
color: inherit;
box-shadow: none;
}
</style>
</style>

2
src/views/creators/CreatePostButton.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<button v-if="creator.id === userStore.getCurrentUser().id"
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button>

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>