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>
<div class="flex flex-col md:flex-row">
<!-- Left Menu -->
<div class="w-full md:max-w-xs">
<div class="flex justify-center mt-8 md:mt-0 md:justify-start md:pl-4">
<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">
<!-- Navigation buttons for small screens -->
<button @click="scrollLeftFunc" class="rounded p-1 absolute left-2 z-10 md:hidden text-white bg-fuchsia-800">
<v-icon>mdi-chevron-left-box</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-hidden md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px]">
<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 = 'PersonnalInfo'">
<v-icon class="mr-2">mdi-information</v-icon>
Informations personnelles
</v-btn>
<v-btn variant="text" @click="currentComponent = 'PageInformations'">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
Informations de votre page
</v-btn>
<v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
<v-icon class="mr-2">mdi-security</v-icon>
Sécurité
</v-btn>
<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 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-white bg-fuchsia-800">
<v-icon>mdi-chevron-left-box</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 = 'ManageAccount'">
<v-icon class="mr-2">mdi-account</v-icon>
Gestion de Comptes
</v-btn>
<v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
<v-icon class="mr-2">mdi-information</v-icon>
Informations personnelles
</v-btn>
<v-btn variant="text" @click="currentComponent = 'PageInformations'">
<v-icon class="mr-2">mdi-file-edit-outline</v-icon>
Informations de votre page
</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-white bg-fuchsia-800">
<v-icon>mdi-chevron-right-box</v-icon>
</button>
</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>
<!-- 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'">
<ManageAccount />
</template>
@@ -59,7 +62,6 @@
<SizeIndicator></SizeIndicator>
</template>
<script setup>
import { ref, onBeforeMount, onMounted } from "vue";
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 container = document.querySelector('.custom-scroll');
container.scrollBy({left: -100, behavior: 'smooth'});