From 1f2d5f5f4abd95a86fc518cc68f551e96ad7f559 Mon Sep 17 00:00:00 2001
From: Maria Sauer <mcs22@inf.ufpr.br>
Date: Fri, 12 Jul 2024 11:34:29 -0300
Subject: [PATCH] issue #132: FIX responsive profile
---
src/app/perfil/[id]/components/GroupButton.js | 10 +++++-----
src/app/perfil/[id]/components/UserCard.js | 16 ++++++++--------
2 files changed, 13 insertions(+), 13 deletions(-)
diff --git a/src/app/perfil/[id]/components/GroupButton.js b/src/app/perfil/[id]/components/GroupButton.js
index 3569c17..1cbdd49 100644
--- a/src/app/perfil/[id]/components/GroupButton.js
+++ b/src/app/perfil/[id]/components/GroupButton.js
@@ -85,11 +85,11 @@ export default function GroupButton({ profileData, idLogin }) {
return (
<>
- <div className='pb-4 flex flex-row justify-between mr-10'>
- <div className='flex flex-row gap-4 ' >
+ <div className='pb-4 flex flex-row max-lg:flex-col justify-between max-lg:items-center max-lg:pt-8 max-lg:mr-0 mr-10'>
+ <div className='flex flex-row gap-4 max-sm:flex-col max-sm:items-center' >
{idLogin == profileData["id"] ?
<button
- className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white bg-secondary hover:bg-secondary-hover `}
+ className={`text-[16px] rounded-[10px] normal-case h-10 font-bold w-48 text-white bg-secondary hover:bg-secondary-hover `}
alt="Editar meu perfil"
onClick={() => router.push(`/editar/${idLogin}`)}
>
@@ -105,7 +105,7 @@ export default function GroupButton({ profileData, idLogin }) {
{follow ? "Seguindo o perfil" : "Seguir o perfil"}
</button>
}
- <div className='max-[1024px]:grid max-[1024px]:justify-items-center'>
+ <div className=''>
<button
className="border text-[16px] outline outline-1 pr-2 outline-outlineColor text-text-filter border-main rounded-[10px] normal-case h-10 font-semibold w-52 hover:bg-main-hover "
onClick={() => setShareOpen(true)}
@@ -116,7 +116,7 @@ export default function GroupButton({ profileData, idLogin }) {
</button>
</div>
</div>
- <div className=''>
+ <div >
{idLogin !== profileData["id"] &&
<button
className=" text-[16px] hover:bg-transparent hover:text-red text-main-text rounded-[10px] normal-case h-10 font-bold "
diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
index 073a99c..d253fd9 100644
--- a/src/app/perfil/[id]/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -170,7 +170,7 @@ export default function UserCard({ profileData, idLogin }) {
return (
<>
<div className='flex pt-[5%] flex-col mx-[5%] '>
- <div className='flex rounded-2xl gap-4 bg-white outline outline-1 outline-outlineColor' >
+ <div className='flex max-lg:flex-col rounded-2xl gap-4 max-lg:items-center bg-white outline outline-1 outline-outlineColor' >
<div className='p-10 h-full items-center'>
{/*a imagem do usuário tem nomes diferentes no backend se for usuário público ou não */}
{profileData["avatar"] ?
@@ -180,20 +180,20 @@ export default function UserCard({ profileData, idLogin }) {
}
</div>
- <div className='flex flex-col pt-12 pb-6 justify-between w-full'>
+ <div className='flex flex-col pt-12 max-lg:pt-2 pb-6 justify-between w-full '>
<div className=' flex flex-col justify-start '>
- <div className='flex flex-row items-center text-main-text font-bold text-4xl mb-6'>
- <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' /> {profileData["name"]}
+ <div className='flex flex-row items-center text-main-text font-bold max-sm:text-3xl text-4xl mb-6'>
+ <div className='bg-gray-color shrink-0 rounded-full max-lg:w-[20px] max-lg:h-[20px] w-[28px] h-[28px] mx-4 aspect-square' /> {profileData["name"]}
</div>
- {profileData["email"] && <div className='mb-3 flex flex-row items-center text-text-filter text-2xl '>
- <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' />
+ {profileData["email"] && <div className='mb-3 truncate flex flex-row items-center text-text-filter max-sm:text-base text-2xl '>
+ <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
{profileData["email"]}</div>}
<div className='mb-3'>
{translateItems &&
- <div className='flex flex-row items-center mt-1 text-text-filter text-xl'>
- <div className='bg-gray-color rounded-full w-[28px] h-[28px] mx-4 aspect-square' />
+ <div className='flex flex-row items-center mt-1 text-text-filter max-sm:text-base text-xl'>
+ <div className='bg-gray-color shrink-0 rounded-full w-[28px] h-[28px] max-lg:w-[20px] max-lg:h-[20px] mx-4 aspect-square' />
{translateItems}</div>
}
</div>
--
GitLab