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

Side menu interaction added, condition of use moved.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-26 02:43:10 -04:00
parent 3d17e163e6
commit e734f0f839
6 changed files with 277 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/App.vue
View File

@@ -1,55 +1,54 @@
<template> <template>
<v-app> <v-app>
<div class="m-0 flex flex-column h-screen"> <div class="m-0 flex flex-column h-screen">
<Header @toggle-sidebar="toggleSidebar" class="fixed w-full z-50 top-0 p-2"></Header>
<Header class="fixed w-full z-40 top-0 p-2"> <div class="flex flex-row relative">
</Header> <div
@mouseenter="openSidebar"
<div class="flex flex-row justify-center"> class="fixed left-0 top-0 h-full w-12 z-20"
style="background: transparent;"
<div class="w-48 fixed left-0 top-16 h-full border-r-2 bg-purple z-30"> ></div>
<SideBar v-if="!hideSideBar"> <transition name="slide-fade">
</SideBar> <div v-show="!hideSideBar"
@mouseleave="startCloseSidebarTimer"
</div> @mouseenter="clearCloseSidebarTimer"
class="w-48 fixed left-0 top-14 h-full border-r-2 bg-purple z-30 transition-transform duration-700">
<!-- TODO: Put this #F4F4F4 color into a style somewhere as SystemDefaultBackground or something similar --> <SideBar></SideBar>
<div class="flex flex-col p-2 ml-48 mt-16 bg-amber-50"> </div>
</transition>
<div class="flex flex-col mt-16 bg-amber-50 w-full md:ml-1">
<RouterView></RouterView> <RouterView></RouterView>
<Footer></Footer> <Footer></Footer>
</div> </div>
</div> </div>
<div class="fixed z-50 bottom-10 right-10 flex flex-column"> <div class="fixed z-50 bottom-10 right-10 flex flex-column">
<div
<div v-if="showPopup" v-if="showPopup"
ref="popup" ref="popup"
class="z-50 shadow-md shadow-gray-500 rounded-2xl"> class="z-50 shadow-md shadow-gray-500 rounded-2xl"
>
<div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center"> <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
Je Soutiens! Je Soutiens!
</div> </div>
<div class="bg-gray-100 rounded-b-2xl p-4"> <div class="bg-gray-100 rounded-b-2xl p-4">
<div class="mx-2"> <div class="mx-2">
<StripePayment></StripePayment> <StripePayment></StripePayment>
</div> </div>
</div> </div>
</div> </div>
<div @click="togglePopup" <div
ref="popupButton" @click="togglePopup"
class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer" ref="popupButton"
style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white; "> class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
>
<v-icon class="text-2xl">mdi-gift-outline</v-icon> <v-icon class="text-2xl">mdi-gift-outline</v-icon>
</div> </div>
</div> </div>
</div> </div>
</v-app> </v-app>
</template> </template>
@@ -58,40 +57,76 @@
import Header from "@/views/main/Header.vue"; import Header from "@/views/main/Header.vue";
import Footer from "@/views/main/Footer.vue"; import Footer from "@/views/main/Footer.vue";
import SideBar from "@/views/main/SideBar.vue"; import SideBar from "@/views/main/SideBar.vue";
import {useRoute} from 'vue-router' import {ref, onMounted, onUnmounted} from 'vue';
import {ref, onMounted, onUnmounted, computed} from 'vue';
import StripePayment from "@/views/StripePayment.vue"; import StripePayment from "@/views/StripePayment.vue";
import {eventBus} from '@/eventBus.js';
const route = useRoute() const hideSideBar = ref(false);
const hideSideBar = computed(() => route.meta.hideSideBar === true)
// Reactive variable to control the visibility of the popup
const showPopup = ref(false); const showPopup = ref(false);
const popup = ref(null); const popup = ref(null);
const popupButton = ref(null); const popupButton = ref(null);
let closeSidebarTimer = null;
// Function to toggle the popup visibility const toggleSidebar = () => {
const togglePopup = () => { hideSideBar.value = !hideSideBar.value;
showPopup.value = !showPopup.value };
const openSidebar = () => {
clearCloseSidebarTimer();
hideSideBar.value = false;
};
const startCloseSidebarTimer = () => {
closeSidebarTimer = setTimeout(() => {
hideSideBar.value = true;
}, 500);
};
const clearCloseSidebarTimer = () => {
clearTimeout(closeSidebarTimer);
};
const togglePopup = () => {
showPopup.value = !showPopup.value;
}; };
// Function to handle clicks outside the popup
const handleClickOutside = (event) => { const handleClickOutside = (event) => {
if (popup.value if (
&& !popup.value.contains(event.target) popup.value &&
&& !popupButton.value.contains(event.target)) { !popup.value.contains(event.target) &&
!popupButton.value.contains(event.target) &&
!event.target.closest('.bg-purple')
) {
showPopup.value = false; showPopup.value = false;
} }
if (
!event.target.closest('.w-48') &&
!event.target.closest('.v-app-bar-nav-icon')
) {
hideSideBar.value = true;
}
}; };
// Add event listener for clicks outside the popup when component is mounted
onMounted(() => { onMounted(() => {
document.addEventListener('click', handleClickOutside); document.addEventListener('click', handleClickOutside);
eventBus.value.toggleSidebar = toggleSidebar;
}); });
// Remove event listener when component is unmounted
onUnmounted(() => { onUnmounted(() => {
document.removeEventListener('click', handleClickOutside); document.removeEventListener('click', handleClickOutside);
eventBus.value.toggleSidebar = null;
}); });
</script> </script>
<style scoped>
/* Do not remove. Used for animation */
.slide-fade-enter-active, .slide-fade-leave-active {
transition: transform 0.7s ease, opacity 0.7s ease;
}
.slide-fade-enter, .slide-fade-leave-to
{
transform: translateX(-100%);
opacity: 0;
}
</style>

3
src/eventBus.js Normal file
View File

@@ -0,0 +1,3 @@
import { ref } from 'vue';
export const eventBus = ref({});

121
src/views/main/Header.vue
View File

@@ -1,129 +1,74 @@
<template> <template>
<header
<header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20"> class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20"
@click.stop
<div v-if="showPopup" >
ref="popupRef"
class="bg-white shadow-md shadow-gray-700 top-14 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
@mouseleave="handleMouseLeave"
@mouseenter="handleMouseEnter">
<SiteMenu></SiteMenu>
</div>
<div class="flex items-center"> <div class="flex items-center">
<v-app-bar-nav-icon @click.stop="drawer = !drawer"> <v-app-bar-nav-icon @click.stop="toggleSidebar">
</v-app-bar-nav-icon> </v-app-bar-nav-icon>
<RouterLink to="/"> <RouterLink to="/">
<v-img src="/medias/hutopy.png" <v-img
ref="popupButtonRef" src="/medias/hutopy.png"
alt="Hutopy Logo" ref="popupButtonRef"
class="mr-2 h-10 w-20" alt="Hutopy Logo"
@mouseenter="togglePopup(true)"> class="mr-2 h-10 w-20"
</v-img> ></v-img>
</RouterLink> </RouterLink>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<v-text-field <v-text-field
density=compact density="compact"
rounded rounded
variant="outlined" variant="outlined"
v-model="searchQuery" v-model="searchQuery"
placeholder="Search" placeholder="Search"
hide-details hide-details
clearable clearable
class="rounded-full mx-2 w-80 " class="rounded-full mx-2 w-80"
append-inner-icon="mdi-magnify" append-inner-icon="mdi-magnify"
@click:append-inner="onSearch"> @click:append-inner="onSearch"
</v-text-field> ></v-text-field>
<v-icon class="mx-2">mdi-bell-outline</v-icon> <v-icon class="mx-2">mdi-bell-outline</v-icon>
<span class="flex items-center mx-2"> <span class="flex items-center mx-2">
<span class="text-black text-base font-sans font-medium mr-3">
<span class="text-black text-base font-sans font-medium mr-3"> {{ currentUserName }}
{{ currentUserName }} </span>
</span>
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="rounded-circle h-10 w-10"
alt="Logo"/>
</span>
<img
src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="rounded-circle h-10 w-10"
alt="Logo"
/>
</span>
</div> </div>
</header> </header>
</template> </template>
<script setup> <script setup>
import {ref, onMounted, onUnmounted} from 'vue'; import { ref } from "vue";
import {useRouter} from 'vue-router'; import { eventBus } from '@/eventBus.js';
import SiteMenu from "@/views/main/SiteMenu.vue";
const currentUserName = "Jo Bumble";
const searchQuery = ref("");
const showPopup = ref(false); const toggleSidebar = () => {
const popupRef = ref(null); eventBus.value.toggleSidebar();
const popupButtonRef = ref(null);
let mouseLeaveTimeout = null;
const togglePopup = (state) => {
clearTimeout(mouseLeaveTimeout)
showPopup.value = state
}; };
// Function to handle mouse enter event
const handleMouseEnter = () => {
clearTimeout(mouseLeaveTimeout);
};
// Function to handle mouse leave event
const handleMouseLeave = () => {
mouseLeaveTimeout = setTimeout(() => {
showPopup.value = false;
}, 200);
};
// Add event listener for clicks outside the popup when component is mounted
onMounted(() => {
document.addEventListener('click', handleClickOutside);
});
// Remove event listener when component is unmounted
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside);
});
// Function to handle clicks outside the popup
const handleClickOutside = (event) => {
if (popupRef.value
&& !popupRef.value.contains(event.target)
&& popupButtonRef.value
&& !popupButtonRef.value.contains(event.target)) {
showPopup.value = false;
}
};
const currentUserName = 'Jo Bumble'
const searchQuery = ref('');
const router = useRouter();
const onSearch = () => { const onSearch = () => {
const query = searchQuery.value.trim(); const query = searchQuery.value.trim();
if (!query) { if (!query) {
router.push('/browse'); router.push("/browse");
} else { } else {
const words = query.split(' '); const words = query.split(" ");
if (words.length === 1) { if (words.length === 1) {
router.push(`/@${words[0]}`); router.push(`/@${words[0]}`);
} else { } else {
router.push({name: 'browse', query: {q: query}}); router.push({ name: "browse", query: { q: query } });
} }
} }
}; };

111
src/views/main/SideBar.vue
View File

@@ -1,78 +1,85 @@
<template> <template>
<aside class="relative">
<aside> <nav class="flex items-center justify-between pt-3">
<nav>
<h2>Subscriptions</h2>
<ul class="space-y-32"> <div>
<li> <h2 class="text-center">Subscriptions</h2>
<RouterLink to="/@hutopy">
<div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon>
Hutopy
</div>
</RouterLink>
<RouterLink to="/@leffet"> <ul class="space-y-32">
<div class="nav-button"> <li>
<v-icon class="mx-2">mdi-home</v-icon> <RouterLink to="/@hutopy">
L'Effet <div class="nav-button">
</div> <v-icon class="mx-2">mdi-home</v-icon>
</RouterLink> Hutopy
</div>
</RouterLink>
<RouterLink to="/@chloebeaugrand"> <RouterLink to="/@leffet">
<div class="nav-button"> <div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon> <v-icon class="mx-2">mdi-home</v-icon>
Chloe Beaugrand L'Effet
</div> </div>
</RouterLink> </RouterLink>
<RouterLink to="/@guillaumeaime"> <RouterLink to="/@chloebeaugrand">
<div class="nav-button"> <div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon> <v-icon class="mx-2">mdi-home</v-icon>
Guillaume Aime Chloe Beaugrand
</div> </div>
</RouterLink> </RouterLink>
<RouterLink to="/@mathieucaron"> <RouterLink to="/@guillaumeaime">
<div class="nav-button"> <div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon> <v-icon class="mx-2">mdi-home</v-icon>
Mathieu Caron Guillaume Aime
</div> </div>
</RouterLink> </RouterLink>
<RouterLink to="/@mathieucaron">
<div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon>
Mathieu Caron
</div>
</RouterLink>
<RouterLink to="/@arps">
<div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon>
ARPS
</div>
</RouterLink>
</li>
</ul>
<SiteMenu></SiteMenu>
</div>
<RouterLink to="/@arps">
<div class="nav-button">
<v-icon class="mx-2">mdi-home</v-icon>
ARPS
</div>
</RouterLink>
</li>
</ul>
</nav> </nav>
</aside>
</aside>
</template> </template>
<style scoped> <style scoped>
.nav-button { .nav-button {
@apply bg-purple-800 rounded p-1 m-2 @apply bg-purple-800 rounded p-1 m-2;
} }
.nav-button:hover { .nav-button:hover {
@apply bg-purple-400 @apply bg-purple-400;
} }
h2 { h2 {
@apply font-sans font-bold ml-2 @apply font-sans font-bold ml-2;
} }
aside {
@apply relative;
}
</style> </style>
<script setup lang="ts"> <script setup lang="ts">
</script> import SiteMenu from "@/views/main/SiteMenu.vue";
</script>

81
src/views/main/SiteMenu.vue
View File

@@ -1,81 +1,50 @@
<template> <template>
<div class="flex flex-col min-h-screen bg-white py-4 px-8">
<div class="flex flex-column py-4 px-8"> <RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
<div class="flex flex-row justify-center pb-4 pt-2">
<div class="flex flex-row self-center pb-4 pt-2">
<!-- Facebook --> <!-- Facebook -->
<a href="https://www.facebook.com/profile.php?id=61556819217561"> <a href="https://www.facebook.com/profile.php?id=61556819217561">
<img src="/images/hutopymedia/icons/pink/facebookpink.png" <img src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook Logo">
alt="Facebook Logo">
</a> </a>
<!-- Instagram --> <!-- Instagram -->
<a href="https://www.instagram.com/hutopy.inc/"> <a href="https://www.instagram.com/hutopy.inc/">
<img src="/images/hutopymedia/icons/pink/instagrampink.png" <img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Instagram Logo">
alt="Instagram Logo">
</a> </a>
<!-- X / Twitter --> <!-- X / Twitter -->
<a href="https://twitter.com/Hutopyinc"> <a href="https://twitter.com/Hutopyinc">
<img src="/images/hutopymedia/icons/pink/xpink.png" <img src="/images/hutopymedia/icons/pink/xpink.png" alt="X Logo">
alt="X Logo">
</a> </a>
</div> </div>
<div class="absolute mt-44 text-center extra-small-text p-2">
<div class="grid grid-cols-1"> <RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
<RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
<RouterLink class="nav-button" to="/join"> <RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
Aidez-nous <RouterLink class="nav-button" to="/termsandconditions">Conditions générales</RouterLink>
</RouterLink> <RouterLink class="nav-button" to="/contentpolicy">Politique de Contenu</RouterLink>
<RouterLink class="nav-button" to="/about">À Propos</RouterLink>
<RouterLink class="nav-button" to="/helpandcontact"> <RouterLink class="nav-button" to="/pricing">Frais</RouterLink>
Aide & Contact
</RouterLink>
<RouterLink class="nav-button" to="/faq">
FAQ
</RouterLink>
<RouterLink class="nav-button" to="/guideforcreators">
Guide pour les créateurs
</RouterLink>
<RouterLink class="nav-button" to="/termsandconditions">
Conditions générales
</RouterLink>
<RouterLink class="nav-button" to="/contentpolicy">
Politique de Contenu
</RouterLink>
<RouterLink class="nav-button" to="/about">
À Propos
</RouterLink>
<RouterLink class="nav-button" to="/pricing">
Frais
</RouterLink>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.nav-button { .nav-button {
@apply rounded m-1 flex justify-center font-sans @apply rounded flex justify-center font-sans text-gray-800 py-1;
} }
.nav-button:hover { .nav-button:hover {
@apply text-purple-800 bg-gray-50 @apply text-purple-800 bg-gray-50;
} }
img { img {
@apply m-2 w-10 h-10 @apply m-2 w-10 h-10;
} }
</style> .extra-small-text {
font-size: 0.6rem; /* Ajustez cette valeur selon vos besoins */
}
</style>
<script setup lang="ts">
</script>

91
src/views/manualusers/ARPS.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<!-- Bannière--> <!-- Bannière-->
<div class="z-20"> <div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col"> <div class="relative flex flex-col">
<!-- Social Network--> <!-- Social Network-->
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4"> <div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block"> <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-lg">1000+ Abonnés</div>
<div class="text-sm">500 Contacts en commun</div> <div class="text-sm">500 Contacts en commun</div>
@@ -35,13 +35,14 @@
</a> </a>
</div> </div>
</div> </div>
</div>
</div>
<!--Banner & user info--> <!--Banner & user info-->
<div class="relative"> <div class="relative">
<!--Banner--> <!--Banner-->
<div> <div>
<img class="w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner"> <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
</div> </div>
<!--User info --> <!--User info -->
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2"> <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
@@ -55,17 +56,18 @@
</div> </div>
<!-- Actions Button & image profile --> <!-- Actions Button & image profile -->
<div class="w-full "> <div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E"> <div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
<div class=" flex flex-col sm:flex-row items-center sm:justify-between"> <div class="flex flex-col sm:flex-row items-center sm:justify-between">
<img <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-30" 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="profilePicture" :src="profilePicture"
alt="Profile Picture" alt="Profile Picture"
style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;"> style="border-color: rgb(70, 37, 24); max-width: 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"> <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 <button
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"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon> <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button> </button>
<button class="text-white py-2 px-4 rounded" <button class="text-white py-2 px-4 rounded"
@@ -88,22 +90,81 @@
<CreatorFeed></CreatorFeed> <CreatorFeed></CreatorFeed>
<!--Post-modale-->
<v-dialog v-model="isDialogActive" max-width="500">
<template v-slot:default="{ isActive }">
<v-card class="text-center rounded-xl">
<div class="text-white p-4 rounded-t" style="background-color: #110E0F">
<h2>Publication</h2>
</div>
<v-card-text class="bg">
<v-row class="justify-center mb-4">
<v-col class="d-flex align-center justify-end">
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
</v-col>
<v-col class="d-flex align-center justify-start">
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
</v-col>
</v-row>
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
<v-file-input
label="Ajoutez des fichiers"
v-model="files"
outlined
multiple
dropzone
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
></v-file-input>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn color="primary" @click="publishPost">Publier</v-btn>
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template> </template>
<script setup> <script setup>
import CreatorFeed from "@/views/main/CreatorFeed.vue"; import CreatorFeed from "@/views/main/CreatorFeed.vue";
import {ref} from 'vue';
let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png'; let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png'; let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
let isDialogActive = ref(false);
let message = ref('');
let files = ref([]);
let isArticle = ref(false);
const publishPost = () => {
// Logic to publish post
console.log('Post published:', message.value, files.value);
isDialogActive.value = false;
resetPostForm();
};
const cancelPost = () => {
isDialogActive.value = false;
resetPostForm();
};
const resetPostForm = () => {
message.value = '';
files.value = [];
};
const togglePostType = (article) => {
isArticle.value = article;
};
</script> </script>
<style scoped> <style scoped>
.shadow-lg { .shadow-lg {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
} }
</style>
.v-btn--active {
background-color: #1976D2;
color: white;
}
</style>