wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-15 14:10:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: bot / server card width (#537)

Browse Source 
* fix: server card width

* fix: bot card width

* feat: set min width

* feat: adjust text size by screen

* feat: improve server card layout

* feat: improve bot card layout

* chore: remove unnecessary div
This commit is contained in:
SKINMAKER 2023-02-19 21:10:54 +09:00 committed by GitHub
parent 1f64ae66d4
commit 3e8aa26018
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/BotCard.tsx
View File

@ -10,7 +10,7 @@ const Tag = dynamic(() => import('@components/Tag'))
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
return <div className='container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
return <div className='min-w-0 container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
<div className='relative'>
<div className='container mx-auto'>
<div className='h-full'>
@ -27,9 +27,9 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
>
<Link href={makeBotURL(bot)}>
<div>
<div className='flex h-44'>
<div className='w-3/5'>
<div className='flex justify-start'>
<div className='flex flex-col'>
<div className='flex'>
<div className='w-3/5 flex justify-start'>
<DiscordAvatar
size={128}
userID={bot.id}
@ -37,30 +37,29 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
/>
</div>
<div className='mt-28 px-4'>
<h2 className='px-1 text-sm'>
<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
{Status[bot.status]?.text}
</h2>
<h1 className='mb-3 text-left text-2xl font-bold truncate'>{bot.name}</h1>
<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
<Tag
text={
<>
<i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}
</>
}
dark
/>
<Tag
blurple
text={bot.servers ? <>{formatNumber(bot.servers)} 서버</> : 'N/A'}
dark
/>
</div>
</div>
<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
<Tag
text={
<>
<i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}
</>
}
dark
/>
<Tag
blurple
text={bot.servers ? <>{formatNumber(bot.servers)} 서버</> : 'N/A'}
dark
/>
</div>
</div>
<div className='mt-3 px-4 h-16'>
<h2 className='px-1 text-sm'>
<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
{Status[bot.status]?.text}
</h2>
<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{bot.name}</h1>
</div>
<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'>
{bot.intro}

47
components/ServerCard.tsx
View File

@ -11,7 +11,7 @@ const ServerIcon = dynamic(() => import('@components/ServerIcon'))
const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
const newServerLink = server.data ? `/addserver/${server.id}` : `${DiscordEnpoints.InviteApplication(DSKR_BOT_ID, {}, 'bot', null, server.id)}&disable_guild_select=true`
return <div className='container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
return <div className='min-w-0 container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
<div className='relative'>
<div className='container mx-auto'>
<div className='h-full'>
@ -28,9 +28,9 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
>
<Link href={type !== 'add' ? makeServerURL(server) : newServerLink}>
<div>
<div className='flex h-44'>
<div className='w-3/5'>
<div className='flex justify-start'>
<div className='flex flex-col'>
<div className='flex'>
<div className='w-3/5 flex justify-start'>
<ServerIcon
size={128}
id={server.id}
@ -39,28 +39,27 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
/>
</div>
<div className='mt-28 px-4'>
<h2 className={`px-1 text-sm ${server.state !== 'unreachable' ? ' invisible' : ''}`}>
<i className='fas fa-ban text-red-600' />정보 갱신 불가
</h2>
<h1 className='mb-3 text-left text-2xl font-bold truncate'>{server.name}</h1>
<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
<Tag
text={
<>
<i className='fas fa-heart text-red-600' /> {formatNumber(server.votes)}
</>
}
dark
/>
<Tag
blurple
text={server.members ? <>{formatNumber(server.members)} 멤버</> : 'N/A'}
dark
/>
</div>
</div>
<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
<Tag
text={
<>
<i className='fas fa-heart text-red-600' /> {formatNumber(server.votes)}
</>
}
dark
/>
<Tag
blurple
text={server.members ? <>{formatNumber(server.members)} 멤버</> : 'N/A'}
dark
/>
<div className='mt-3 px-4 h-16'>
<h2 className={`px-1 text-sm ${server.state !== 'unreachable' ? ' invisible' : ''}`}>
<i className='fas fa-ban text-red-600' />정보 갱신 불가
</h2>
<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{server.name}</h1>
</div>
</div>