heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsived

Browse Source
This commit is contained in:
Mamalizz
2025-04-16 22:57:07 +03:30
parent 67796d139b
commit 3014edfd3f
1 changed files with 57 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/profile/index/ProfilePictureModal.vue
+57 -50
View File
@@ -84,7 +84,13 @@ onFileDialogChange((files: any) => {
</script>
<template>
<Modal v-model="visible" title="عکس پروفایل" icon="bi:image" iconSize="20">
<Modal
v-model="visible"
title="عکس پروفایل"
icon="bi:image"
iconSize="20"
contectClass="w-full max-lg:container lg:!w-[30vw]"
>
<template #trigger>
<button
class="bg-black text-slate-100 rounded-full p-2 flex-center absolute -bottom-0 -right-0"
@@ -93,61 +99,62 @@ onFileDialogChange((files: any) => {
</button>
</template>
<template #content>
<div class="w-max">
<div
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
>
<div
class="w-full flex flex-col-reverse items-center justify-between py-10 gap-10 px-4"
class="flex items-center justify-center w-full flex-wrap gap-4 max-w-[500px]"
>
<div
class="flex items-center justify-between w-full flex-wrap gap-4 max-w-[500px]"
<button
v-for="(avatar, index) in avatars"
:key="index"
class="size-16 lg:size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
>
<button
v-for="(avatar, index) in avatars"
:key="index"
class="size-20 rounded-full focus:ring-2 focus:ring-offset-1 focus:ring-black transition-all"
>
<Avatar
:src="avatar"
:alt="`avatar-${index}`"
class="size-full"
/>
</button>
</div>
<Avatar
:src="avatar"
:alt="`avatar-${index}`"
class="size-full"
/>
</button>
</div>
<div
class="w-full flex-center gap-4 max-w-[500px] flex-wrap"
<div class="w-full flex-center gap-4 max-w-[500px] flex-wrap">
<button
class="size-6 lg:size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-6 lg:size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
</div>
<div class="w-full flex-col-center gap-5">
<Avatar
:src="currentProfile"
alt=""
class="!size-24 lg:!size-32"
iconClass="!text-xl lg:!text-2xl"
/>
<Button
class="rounded-full w-[8rem]"
@click="openFileDialog"
:loading="updateAccountIsPending"
size="md"
>
<button
class="size-8 rounded-full bg-orange-100 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
<Icon
v-if="updateAccountIsPending"
name="svg-spinners:3-dots-bounce"
/>
<button
class="size-8 rounded-full bg-orange-200 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-600 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-700 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
<button
class="size-8 rounded-full bg-amber-800 whitespace-nowrap ring-2 hover:ring-black ring-slate-200 ring-offset-3"
/>
</div>
<div class="w-full flex-col-center gap-5">
<Avatar :src="currentProfile" alt="" class="!size-32" />
<Button
class="rounded-full w-[8rem]"
@click="openFileDialog"
:loading="updateAccountIsPending"
size="md"
>
<Icon
v-if="updateAccountIsPending"
name="svg-spinners:3-dots-bounce"
/>
<span v-else>آپلود عکس شما</span>
</Button>
</div>
<span v-else>آپلود عکس شما</span>
</Button>
</div>
</div>
</template>