wonderlandpark/core
2
1
Fork 0
mirror of https://github.com/koreanbots/core.git synced 2025-12-16 14:30: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

27
components/BotCard.tsx
View File

@ -10,7 +10,7 @@ const Tag = dynamic(() => import('@components/Tag'))
const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar')) const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => { 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='relative'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='h-full'> <div className='h-full'>
@ -27,9 +27,9 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
> >
<Link href={makeBotURL(bot)}> <Link href={makeBotURL(bot)}>
<div> <div>
<div className='flex h-44'> <div className='flex flex-col'>
<div className='w-3/5'> <div className='flex'>
<div className='flex justify-start'> <div className='w-3/5 flex justify-start'>
<DiscordAvatar <DiscordAvatar
size={128} size={128}
userID={bot.id} userID={bot.id}
@ -37,16 +37,7 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full' className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
/> />
</div> </div>
<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
<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>
</div>
<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
<Tag <Tag
text={ text={
<> <>
@ -62,6 +53,14 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
/> />
</div> </div>
</div> </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'> <p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'>
{bot.intro} {bot.intro}
</p> </p>

25
components/ServerCard.tsx
View File

@ -11,7 +11,7 @@ const ServerIcon = dynamic(() => import('@components/ServerIcon'))
const ServerCard: React.FC<BotCardProps> = ({ type, server }) => { 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` 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='relative'>
<div className='container mx-auto'> <div className='container mx-auto'>
<div className='h-full'> <div className='h-full'>
@ -28,9 +28,9 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
> >
<Link href={type !== 'add' ? makeServerURL(server) : newServerLink}> <Link href={type !== 'add' ? makeServerURL(server) : newServerLink}>
<div> <div>
<div className='flex h-44'> <div className='flex flex-col'>
<div className='w-3/5'> <div className='flex'>
<div className='flex justify-start'> <div className='w-3/5 flex justify-start'>
<ServerIcon <ServerIcon
size={128} size={128}
id={server.id} id={server.id}
@ -39,15 +39,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full' className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
/> />
</div> </div>
<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
<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>
</div>
<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
<Tag <Tag
text={ text={
<> <>
@ -63,6 +55,13 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
/> />
</div> </div>
</div> </div>
<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>
<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'> <p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'>
{type === 'add' ? {type === 'add' ?