Skip to content

Commit 99d43f2

Browse files
Ultimateutkarsh11Ultimateutkarsh11
authored
Merge pull request #373 from zalabhavy/leaderboard
Leaderboard fix for small screen
2 parents 2f1b9f1 + 79982cd commit 99d43f2

File tree

1 file changed

+47
-46
lines changed

1 file changed

+47
-46
lines changed

‎frontend/src/pages/LeaderBoard.tsx

Lines changed: 47 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next';
77
import useLeaderboard from '../hooks/useLeadearboard';
88
import bgHero from "../assets/bgHero.png";
99

10-
1110
const LeaderBoard = () => {
1211
const {loading, leaderboard} = useLeaderboard();
1312
const currentUser = useRecoilValue(userState);
@@ -16,63 +15,65 @@ const LeaderBoard = () => {
1615
document.title='Style Share | Top users 😎'
1716

1817
return (
19-
<div className="-mt-7 min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }} >
20-
<div className="p-3 mb-10 text-[#000435] bg-white dark:text-white dark:bg-[#000435]"style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
21-
<h2 className={`text-3xl text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] font-bold text-center mb-8`}>{t("navbar.links.leaderboard")} 🥳</h2>
18+
<div className="-mt-7 min-h-screen text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
19+
<div className="p-3 mb-10 text-[#000435] bg-white dark:text-white dark:bg-[#000435]" style={{ backgroundImage: `url(${bgHero})`, backgroundSize: 'cover', backgroundPosition: 'center' }}>
20+
<h2 className="text-3xl text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] font-bold text-center mb-8">{t("navbar.links.leaderboard")} 🥳</h2>
2221
<div className="shadow-md text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] backdrop-blur-sm rounded-lg p-4 border-2 border-sky-500 lg:mx-52 md:mx-20 overflow-x-auto">
2322
{loading ? (
2423
<div className="flex justify-center">
2524
<Loader />
2625
</div>
2726
) : (
28-
<table className="min-w-full divide-y divide-gray-200 ">
29-
<thead className='text-center text-sm font-medium text-[#000435] bg-white dark:text-white dark:bg-[#5f67de] border-b-2 border-sky-600 '>
30-
<tr>
31-
<th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.rank")}</th>
32-
<th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.profile")}</th>
33-
<th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.username")}</th>
34-
<th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.posts")}</th>
35-
<th scope="col" className='px-6 py-3 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider'>{t("leaderboard.likes")}</th>
36-
</tr>
37-
</thead>
38-
<tbody>
39-
{leaderboard.map((user, index) => (
40-
<tr
41-
key={user.userId}
42-
className={`text-center text-[#000435] dark:text-gray-50 border-b-2 border-sky-900 font-semibold ${currentUser && user.userId === currentUser.id ? ' bg-sky-500' : ''}`}
43-
>
44-
<td className='px-6 py-4 '>
45-
{(index === 0 || index === 1 || index === 2) ? (
27+
<div className="overflow-x-auto">
28+
<table className="min-w-full divide-y divide-gray-200">
29+
<thead className="text-center text-sm font-medium text-[#000435] bg-white dark:text-white dark:bg-[#5f67de] border-b-2 border-sky-600">
30+
<tr>
31+
<th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">{t("leaderboard.rank")}</th> {/* Adjusted padding for small screens */}
32+
<th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">{t("leaderboard.profile")}</th>
33+
<th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">{t("leaderboard.username")}</th>
34+
<th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">{t("leaderboard.posts")}</th>
35+
<th scope="col" className="px-2 py-3 sm:px-6 text-[#5f67de] bg-white dark:text-white dark:bg-[#000435] uppercase tracking-wider">{t("leaderboard.likes")}</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
{leaderboard.map((user, index) => (
40+
<tr
41+
key={user.userId}
42+
className={`text-center text-[#000435] dark:text-gray-50 border-b-2 border-sky-900 font-semibold ${currentUser && user.userId === currentUser.id ? ' bg-sky-500' : ''}`}
43+
>
44+
<td className="px-2 py-4 sm:px-6">
45+
{(index === 0 || index === 1 || index === 2) ? (
46+
<div className="flex flex-col items-center">
47+
<GiTrophyCup className={index === 0 ? "text-[#FFD700] text-4xl" : index === 1 ? "text-[#C0C0C0] text-4xl" : "text-[#CD7F32] text-4xl"} />
48+
</div>
49+
) : (
50+
user.rank
51+
)}
52+
</td>
53+
<td className="px-2 py-4 sm:px-6">
4654
<div className="flex flex-col items-center">
47-
<GiTrophyCup className={index === 0 ? "text-[#FFD700] text-4xl" : index === 1 ? "text-[#C0C0C0] text-4xl" : "text-[#CD7F32] text-4xl"} />
55+
<img className="h-8 w-8 rounded-full" src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
4856
</div>
49-
) : (
50-
user.rank
51-
)}
52-
</td>
53-
<td className='px-6 py-4 '>
54-
<div className="flex flex-col items-center">
55-
<img className="h-8 w-8 rounded-full" src={`https://ui-avatars.com/api/?name=${user?.username}&background=0ea5e9&color=fff&rounded=true&bold=true`} alt="profile-pic" />
56-
</div>
57-
</td>
58-
<td className='px-6 py-4 '>
59-
<Link to={`/app/profile/${user.userId}`} data-tooltip-content={`View ${user.username} profile 👀`} data-tooltip-id="my-tooltip" className={`text-sm dark:text-gray-50 ${currentUser && user.userId === currentUser.id ? 'font-bold' : ''}`}>@{user.username}</Link>
60-
</td>
61-
<td className='px-6 py-4 '>
62-
<div className="text-sm text-[#000435] dark:text-gray-50">{user.postCount}</div>
63-
</td>
64-
<td className='px-6 py-4 '>
65-
<div className="text-sm text-[#000435] dark:text-gray-50">{user.totalLikes}</div>
66-
</td>
67-
</tr>
68-
))}
69-
</tbody>
70-
</table>
57+
</td>
58+
<td className="px-2 py-4 sm:px-6">
59+
<Link to={`/app/profile/${user.userId}`} data-tooltip-content={`View ${user.username} profile 👀`} data-tooltip-id="my-tooltip" className={`text-sm dark:text-gray-50 ${currentUser && user.userId === currentUser.id ? 'font-bold' : ''}`}>@{user.username}</Link>
60+
</td>
61+
<td className="px-2 py-4 sm:px-6">
62+
<div className="text-sm text-[#000435] dark:text-gray-50">{user.postCount}</div>
63+
</td>
64+
<td className="px-2 py-4 sm:px-6">
65+
<div className="text-sm text-[#000435] dark:text-gray-50">{user.totalLikes}</div>
66+
</td>
67+
</tr>
68+
))}
69+
</tbody>
70+
</table>
71+
</div>
7172
)}
7273
</div>
7374
</div>
7475
</div>
7576
);
7677
}
7778

78-
export default LeaderBoard;
79+
export default LeaderBoard;

0 commit comments

Comments
 (0)