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

Move all pages and components for Profile together. Update router accordingly

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-15 22:44:58 -04:00
parent 684f716494
commit ebdc40cd85
3 changed files with 3 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/views/Profile/ManageAccount.vue
View File

@@ -1,76 +0,0 @@
<template>
<div class="flex flex-col items-center w-full">
<h1 class="uppercase pb-5 text-2xl"> <v-icon class="mr-2 text">mdi-account</v-icon> Gestion des comptes</h1>
<div class="border rounded-2xl w-full max-w-[800px]">
<div class="py-5 uppercase ml-4">Comptes</div>
<div class="flex flex-col w-full">
<button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="min-w-32 text-left">Id de la page</span>
<span class="flex-auto pr-6 text-left">Nom de la page / utilisateur </span>
<span class="flex-none">
<img
:src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
alt="Profile Image"
class="ml-2 rounded-full"
width="48"
height="48">
</span>
</button>
<button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
<span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
<span class="flex-none text-fuchsia-800">
<v-icon>mdi-plus-circle</v-icon>
</span>
</button>
</div>
</div>
<div class="border rounded-2xl w-full max-w-[800px] mt-10">
<div class="py-5 uppercase ml-4">Autorisations accordées</div>
<div class="flex flex-col w-full">
<button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="min-w-32 text-left">Id de la page</span>
<span class="flex-auto pr-6 text-left">Nom de utilisateur </span>
<span class="flex-none">
<img
:src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
alt="Profile Image"
class="ml-2 rounded-full"
width="48"
height="48">
</span>
</button>
<button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
<span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
<span class="flex-none text-fuchsia-800">
<v-icon>mdi-plus-circle</v-icon>
</span>
</button>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style>
.HoverBtn:hover {
@apply bg-[#A6147D] text-white;
@apply hover:opacity-90; /* Réduire l'opacité au survol */
}
</style>

167
src/views/main/Profile.vue
View File

@@ -1,167 +0,0 @@
<template>
<div class="flex flex-col md:flex-row">
<!-- Left Menu -->
<div class="bg-[#f4f4f4] z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
<div class="sticky top-20 z-30 bg-[#f4f4f4]">
<div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
<h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
<div class="relative flex items-center md:mt-0 w-full">
<!-- Navigation buttons for small screens -->
<button @click="scrollLeftFunc"
class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl ">
<v-icon>mdi-chevron-left</v-icon>
</button>
<div
ref="scrollContainer"
class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
@mousedown="mouseDown"
@mouseleave="mouseLeave"
@mouseup="mouseUp"
@mousemove="mouseMove">
<v-btn variant="text" @click="currentComponent = 'CreatorPage'">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
Créateur
</v-btn>
<v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
<v-icon class="mr-2">mdi-information</v-icon>
Utilisateur
</v-btn>
<v-btn variant="text" @click="currentComponent = 'ManageAccount'">
<v-icon class="mr-2">mdi-account</v-icon>
Gestion de Comptes
</v-btn>
<v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
<v-icon class="mr-2">mdi-security</v-icon>
Sécurité
</v-btn>
</div>
<button @click="scrollRightFunc"
class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
<v-icon>mdi-chevron-right</v-icon>
</button>
</div>
</div>
</div>
</div>
<!-- Mid Content -->
<div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
<template v-if="currentComponent === 'ManageAccount'">
<manage-account></manage-account>
</template>
<template v-else-if="currentComponent === 'CreatorPage'">
<creator-page></creator-page>
</template>
<template v-else-if="currentComponent === 'PersonnalInfo'">
<personnal-info></personnal-info>
</template>
<template v-else-if="currentComponent === 'AccountSecurity'">
<account-security></account-security>
</template>
</div>
</div>
</template>
<script setup>
import {ref, onMounted} from "vue";
import ManageAccount from "@/views/profile/ManageAccount.vue";
import CreatorPage from "@/views/profile/creators/CreatorPage.vue";
import PersonnalInfo from "@/views/profile/account/PersonnalInfo.vue";
import AccountSecurity from "@/views/profile/security/AccountSecurity.vue";
const currentComponent = ref('PersonnalInfo'); // Default component
const isDown = ref(false);
const startX = ref(0);
const scrollLeft = ref(0);
onMounted(() => {
const slider = document.querySelector('.custom-scroll');
slider.addEventListener('mousedown', (e) => {
isDown.value = true;
slider.classList.add('active');
startX.value = e.pageX - slider.offsetLeft;
scrollLeft.value = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown.value = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown.value = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown.value) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX.value) * 3; // scroll-fast
slider.scrollLeft = scrollLeft.value - walk;
});
});
const mouseDown = (e) => {
const slider = document.querySelector('.custom-scroll');
isDown.value = true;
slider.classList.add('active');
startX.value = e.pageX - slider.offsetLeft;
scrollLeft.value = slider.scrollLeft;
};
const mouseLeave = () => {
isDown.value = false;
const slider = document.querySelector('.custom-scroll');
slider.classList.remove('active');
};
const mouseUp = () => {
isDown.value = false;
const slider = document.querySelector('.custom-scroll');
slider.classList.remove('active');
};
const mouseMove = (e) => {
if (!isDown.value) return;
e.preventDefault();
const slider = document.querySelector('.custom-scroll');
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX.value) * 3; // scroll-fast
slider.scrollLeft = scrollLeft.value - walk;
};
const scrollLeftFunc = () => {
const container = document.querySelector('.custom-scroll');
container.scrollBy({left: -100, behavior: 'smooth'});
};
const scrollRightFunc = () => {
const container = document.querySelector('.custom-scroll');
container.scrollBy({left: 100, behavior: 'smooth'});
};
</script>
<style scoped>
.custom-scroll {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.custom-scroll::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
</style>