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

Update Profile - fixe tailwind values

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-26 13:20:16 -04:00
parent 81d2ae4fda
commit 705aa50d39
1 changed files with 67 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,46 +1,49 @@
<template> <template>
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<!-- Left Menu --> <!-- Left Menu -->
<div class="w-full md:max-w-xs"> <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-0 z-30 bg-[#f4f4f4]">
<div class="flex justify-center mt-8 md:mt-0 md:justify-start md:pl-4"> <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> <h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
</div> <div class="relative flex items-center md:mt-0 w-full">
<!-- Navigation buttons for small screens -->
<div class="relative flex items-center"> <button @click="scrollLeftFunc" class="rounded p-1 absolute left-2 z-10 md:hidden text-white bg-fuchsia-800">
<!-- Navigation buttons for small screens --> <v-icon>mdi-chevron-left-box</v-icon>
<button @click="scrollLeftFunc" class="rounded p-1 absolute left-2 z-10 md:hidden text-white bg-fuchsia-800"> </button>
<v-icon>mdi-chevron-left-box</v-icon> <div
</button> ref="scrollContainer"
<div 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"
ref="scrollContainer" @mousedown="mouseDown"
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-hidden md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px]"> @mouseleave="mouseLeave"
<v-btn variant="text" @click="currentComponent = 'ManageAccount'"> @mouseup="mouseUp"
<v-icon class="mr-2">mdi-account</v-icon> @mousemove="mouseMove">
Gestion de Comptes <v-btn variant="text" @click="currentComponent = 'ManageAccount'">
</v-btn> <v-icon class="mr-2">mdi-account</v-icon>
<v-btn variant="text" @click="currentComponent = 'PersonnalInfo'"> Gestion de Comptes
<v-icon class="mr-2">mdi-information</v-icon> </v-btn>
Informations personnelles <v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
</v-btn> <v-icon class="mr-2">mdi-information</v-icon>
<v-btn variant="text" @click="currentComponent = 'PageInformations'"> Informations personnelles
<v-icon class="mr-2">mdi-file-edit-outline</v-icon> </v-btn>
Informations de votre page <v-btn variant="text" @click="currentComponent = 'PageInformations'">
</v-btn> <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
<v-btn variant="text" @click="currentComponent = 'AccountSecurity'"> Informations de votre page
<v-icon class="mr-2">mdi-security</v-icon> </v-btn>
Sécurité <v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
</v-btn> <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-white bg-fuchsia-800">
<v-icon>mdi-chevron-right-box</v-icon>
</button>
</div>
</div> </div>
<button @click="scrollRightFunc" class="rounded p-1 absolute right-2 z-10 md:hidden text-white bg-fuchsia-800">
<v-icon>mdi-chevron-right-box</v-icon>
</button>
</div> </div>
</div> </div>
<!-- Mid Content --> <!-- Mid Content -->
<div class="flex flex-col flex-1 align-center py-12 p-3"> <div class="flex flex-col flex-1 align-center py-12 p-3 mt-48 md:mt-0">
<template v-if="currentComponent === 'ManageAccount'"> <template v-if="currentComponent === 'ManageAccount'">
<ManageAccount /> <ManageAccount />
</template> </template>
@@ -59,7 +62,6 @@
<SizeIndicator></SizeIndicator> <SizeIndicator></SizeIndicator>
</template> </template>
<script setup> <script setup>
import { ref, onBeforeMount, onMounted } from "vue"; import { ref, onBeforeMount, onMounted } from "vue";
import { useUserStore } from "@/stores/user.js"; import { useUserStore } from "@/stores/user.js";
@@ -116,6 +118,35 @@ onMounted(() => {
}); });
}); });
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 scrollLeftFunc = () => {
const container = document.querySelector('.custom-scroll'); const container = document.querySelector('.custom-scroll');
container.scrollBy({left: -100, behavior: 'smooth'}); container.scrollBy({left: -100, behavior: 'smooth'});