fix: improve overall rendering v2 (#15)

Follow-up of #10

Co-authored-by: Walidoux <ma.walidkorchi@icloud.com>
This commit is contained in:
Divlo
2022-03-16 11:25:44 +01:00
committed by GitHub
parent 780788d682
commit 8f74263daa
12 changed files with 133 additions and 101 deletions

View File

@ -53,7 +53,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
}
return (
<div className='relative overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
<div className='relative h-80 overflow-hidden rounded border border-gray-500 shadow-lg transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none dark:border-gray-700'>
<div
className={classNames(
'flex h-full cursor-pointer flex-col items-center justify-center p-4 pt-8 transition duration-200 ease-in-out',
@ -83,9 +83,9 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
{guild.description != null ? (
guild.description
) : (
<span className='flex h-full items-center justify-center opacity-25'>
<span className='flex h-full items-center justify-center opacity-40 dark:opacity-20'>
<Emoji value=':eyes:' size={25} />
<span className='ml-2'>Nothing&apos;s here...</span>
<span className='ml-2'>{t('application:nothing-here')}</span>
</span>
)}
</p>

View File

@ -52,12 +52,12 @@ export const JoinGuildsPublic: React.FC = () => {
/>
<div className='w-full p-12'>
<InfiniteScroll
className='guilds-public-list mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
className='guilds-public-list relative mx-auto grid max-w-[1400px] grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] gap-8 !overflow-visible'
dataLength={items.length}
next={nextPage}
scrollableTarget='application-page-content'
hasMore={hasMore}
loader={<Loader />}
loader={<Loader className='absolute left-1/2 -translate-x-1/2' />}
>
{items.map((guild) => {
return <GuildPublic guild={guild} key={guild.id} />