From b7ca80ce4ba66b24132cd125443af95e0eb523ff Mon Sep 17 00:00:00 2001
From: Guilherme Eduardo <gegs23@inf.ufpr.br>
Date: Tue, 11 Mar 2025 09:15:18 -0300
Subject: [PATCH] Issue #263: FIX user medal position
---
src/app/perfil/[id]/components/MedalAchievements.js | 2 +-
.../perfil/[id]/components/ProfileAchievementsMenu.js | 2 +-
src/app/perfil/[id]/components/UserCard.js | 10 +++++-----
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/app/perfil/[id]/components/MedalAchievements.js b/src/app/perfil/[id]/components/MedalAchievements.js
index c2b14c0f..e51a1f0a 100644
--- a/src/app/perfil/[id]/components/MedalAchievements.js
+++ b/src/app/perfil/[id]/components/MedalAchievements.js
@@ -5,7 +5,7 @@ import mecredApi, { mecredURL } from '@/axiosConfig';
export default function MedalAchievements({ items }) {
return (
- <div className="flex flex-row w-1/3 justify-end xl:gap-x-6 max-sm:gap-x-2 md:gap-x-2 ml-[80px] xl:mr-10">
+ <div className="flex flex-row w-1/3 max-sm:w-full justify-end max-sm:justify-center xl:gap-x-6 max-sm:gap-x-2 md:gap-x-2 md:max-xl:ml-[80px] xl:mr-10 max-sm:mb-5">
{items?.map((avatar, index) =>
avatar.being_used && (
<div key={index} className="flex shrink-0 flex-row relative">
diff --git a/src/app/perfil/[id]/components/ProfileAchievementsMenu.js b/src/app/perfil/[id]/components/ProfileAchievementsMenu.js
index 27748378..1664abde 100644
--- a/src/app/perfil/[id]/components/ProfileAchievementsMenu.js
+++ b/src/app/perfil/[id]/components/ProfileAchievementsMenu.js
@@ -35,7 +35,7 @@ export default function ProfileAchievementsMenu({profileData, achievements, prog
{menuAchievements.map((itens, index) => (
<div key={index} className="flex flex-col text-main-text max-xl:p-0.5">
<button
- className={`flex w-[276px] h-[54px] max-xl:w-[180px] max-xl:h-[45px] justify-center items-center rounded-[10px] text-base font-bold transition-all outline outline-1 outline-outlineColor
+ className={`flex w-[276px] h-[54px] max-md:w-[125px] max-xl:h-[45px] max-xl:w-[150px] justify-center items-center rounded-[10px] text-base font-bold transition-all outline outline-1 outline-outlineColor
${selectedMenu === itens ? "bg-secondary hover:bg-secondary-hover text-white" : "bg-bg-comments text-text-filter hover:bg-text-filter hover:text-white"} `}
onClick={() => setSelectedMenu(itens)}
>{itens}</button>
diff --git a/src/app/perfil/[id]/components/UserCard.js b/src/app/perfil/[id]/components/UserCard.js
index 5933bd2a..ae7c0238 100644
--- a/src/app/perfil/[id]/components/UserCard.js
+++ b/src/app/perfil/[id]/components/UserCard.js
@@ -221,8 +221,8 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
return (
<div className='overflow-y-auto min-h-dvh ml-[30px] mr-[80px] max-md:mx-[20px] max-md:mb-24 '>
<div className='flex flex-col'>
- <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'>
+ <div className='flex max-lg:flex-col rounded-2xl gap-4 max-sm:gap-0 max-lg:items-center bg-white outline outline-1 outline-outlineColor' >
+ <div className='p-10 max-sm:p-0 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"] ?
<Avatar src={mecredURL + profileData["avatar"]} sx={{ position: "inherit" }} alt="Foto de perfil" className=" h-[276px] w-[276px] " />
@@ -232,10 +232,10 @@ export default function UserCard({ profileData, idLogin, achievements, progresse
</div>
<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'>
+ <div className=' flex flex-col justify-start '>
+ <div className='flex flex-row max-sm:flex-col-reverse'>
- <div className='flex flex-row w-2/3 items-center text-main-text font-bold max-sm:text-3xl text-4xl mr-5 mb-6'>
+ <div className='flex flex-row w-2/3 max-sm:w-full items-center text-main-text font-bold max-sm:text-3xl text-4xl max-sm:mr-5 max-sm: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 p-0 m-0' /> {profileData["name"]}
</div>
--
GitLab