Sheldan/abstracto
1
0
Fork 0
mirror of https://github.com/Sheldan/abstracto.git synced 2026-01-01 07:27:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AB-xxx] changing style of leaderboard table

Browse Source 
preparing for release
This commit is contained in:
Sheldan
2024-03-26 23:48:22 +01:00
parent 287ae1f0b1
commit 8fd1aede2a
4 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ui/experience-tracking/src/components/ExperienceConfigDisplay.tsx
View File

@@ -30,20 +30,21 @@ export const ExperienceConfigDisplay = ({serverId}: { serverId: bigint }) => {
return (
<>
{!hasError ?
{!hasError && roles.length !== 0 ?
<div className="bg-gray-800 p-4 mx-auto w-4/5 rounded-lg">
<button className="w-full flex justify-between items-center p-2 px-4" onClick={toggleOpen}>
<h2 className="text-xl font-extrabold leading-none tracking-tight text-gray-100">Role config</h2>
<div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className={`w-6 h-6 stroke-white stroke-2 duration-300 ${isOpen ? "rotate-180" : ""}`}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className={`w-6 h-6 stroke-white stroke-2 duration-500 ${isOpen ? "rotate-180" : ""}`}>
<path strokeLinecap="round" strike-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
</svg>
</div>
</button>
<div className={`grid grid-cols-1 ${isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} overflow-hidden duration-300`}>
<div className="w-full gap-3 min-h-0 overflow-hidden flex flex-col items-start">
<div className={`grid grid-cols-1 ${isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} overflow-hidden duration-500`}>
<div className="w-full min-h-0 overflow-hidden">
<div className="p-4 flex flex-col gap-3 items-start">
{roles.map(role =>
<div key={role.role.id} className="border-gray-700 flex gap-2 p-2 px-4 items-center flex-row-reverse">
<div key={role.role.id} className="border-gray-700 flex gap-4 items-center flex-row-reverse">
<p>
<RoleDisplay role={role.role}/>
</p>
@@ -51,11 +52,8 @@ export const ExperienceConfigDisplay = ({serverId}: { serverId: bigint }) => {
{role.level}
</p>
</div>)}
</div>
</div>
{roles.length === 0 ?
<div className="w-full flex items-center justify-center">
<span className="text-gray-400">No roles</span>
</div> : ''}
</div>
</div>
: ''}

2
ui/experience-tracking/src/components/Leaderboard.tsx
View File

@@ -72,7 +72,7 @@ export function Leaderboard({serverId}: { serverId: bigint }) {
</div>
<div className="flex flex-col">
<div>
<div className="mt-4">
<ExperienceConfigDisplay serverId={serverId}/>
</div>
<div className="text-sm text-left w-full mt-4">

10
ui/experience-tracking/src/components/LeaderboardEntry.tsx
View File

@@ -9,16 +9,18 @@ export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, in
<img alt={member.member!.name} src={member.member!.avatarUrl}
className="object-contain h-16 w-16 rounded-full"/>
<span className="align-middle" style={{color: nameColor}}>{member.member!.name}</span>
</> : <>{member.id}</>;
</> :
<span className="inline-flex items-center h-16">
{member.id.toString()}
</span>;
return (
<>
<tr className={`${index % 2 === 0 ? "bg-gray-800" : "bg-gray-600"}`}>
<tr className={`${index % 2 === 0 ? "bg-gray-600" : "bg-gray-800"} h-full`} style={{ minHeight: 64}}>
<td
className="text-center">
{member.rank}
</td>
<td
className="px-2 py-4 font-medium whitespace-nowrap text-white flex items-center gap-3">
<td className="px-2 py-4 font-medium whitespace-nowrap text-white flex items-center gap-3">
{memberDisplay}
</td>
<td className="px-6 py-4 text-center">