mirror of
https://github.com/Thream/website.git
synced 2024-07-21 09:28:32 +02:00
fix: improve overall rendering (#10)
This commit is contained in:
parent
ee73885fe9
commit
48debe8638
@ -171,7 +171,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
|
|||||||
visible={visibleSidebars.left}
|
visible={visibleSidebars.left}
|
||||||
isMobile={isMobile}
|
isMobile={isMobile}
|
||||||
>
|
>
|
||||||
<div className='flex flex-col min-w-[92px] top-0 left-0 z-50 bg-gray-200 dark:bg-gray-800 border-r-2 border-gray-500 dark:border-white/20 py-2 space-y-2'>
|
<div className='flex flex-col min-w-[92px] top-0 left-0 z-50 bg-gray-200 dark:bg-gray-800 border-r-2 border-gray-500 dark:border-white/20 py-2 space-y-4'>
|
||||||
<IconLink
|
<IconLink
|
||||||
href={`/application/users/${user.id}/settings`}
|
href={`/application/users/${user.id}/settings`}
|
||||||
selected={path === `/application/users/${user.id}/settings`}
|
selected={path === `/application/users/${user.id}/settings`}
|
||||||
|
38
components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
Normal file
38
components/Application/ConfirmGuildJoin/ConfirmGuildJoin.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import Image from 'next/image'
|
||||||
|
|
||||||
|
export interface ConfirmGuildJoinProps {
|
||||||
|
className?: string
|
||||||
|
handleJoinGuild: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = (props) => {
|
||||||
|
const { className, handleJoinGuild } = props
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<Image
|
||||||
|
src='/images/svg/design/join-guild.svg'
|
||||||
|
alt='Joing Guild Illustration'
|
||||||
|
height={150}
|
||||||
|
width={150}
|
||||||
|
/>
|
||||||
|
<div className='flex flex-col mt-8'>
|
||||||
|
<h1 className='text-xl mb-6 text-center'>Rejoindre la guild ?</h1>
|
||||||
|
<div className='flex gap-7'>
|
||||||
|
<button
|
||||||
|
className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
|
||||||
|
onClick={handleJoinGuild}
|
||||||
|
>
|
||||||
|
Oui
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
|
||||||
|
onClick={handleJoinGuild}
|
||||||
|
>
|
||||||
|
Non
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
1
components/Application/ConfirmGuildJoin/index.ts
Normal file
1
components/Application/ConfirmGuildJoin/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './ConfirmGuildJoin'
|
@ -17,7 +17,7 @@ export const Guilds: React.FC<GuildsProps> = (props) => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
id='guilds-list'
|
id='guilds-list'
|
||||||
className='min-w-[92px] mt-[130px] pt-2 h-full border-r-2 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
|
className='min-w-[92px] mt-[130px] pt-2 h-full border-r-1 border-gray-500 dark:border-white/20 space-y-2 scrollbar-firefox-support overflow-y-auto'
|
||||||
>
|
>
|
||||||
<InfiniteScroll
|
<InfiniteScroll
|
||||||
className='guilds-list'
|
className='guilds-list'
|
||||||
|
@ -1,21 +0,0 @@
|
|||||||
import { Meta, Story } from '@storybook/react'
|
|
||||||
|
|
||||||
import { GuildPublic as Component, GuildPublicProps } from './GuildPublic'
|
|
||||||
import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
|
|
||||||
|
|
||||||
const Stories: Meta = {
|
|
||||||
title: 'GuildPublic',
|
|
||||||
component: Component
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Stories
|
|
||||||
|
|
||||||
export const GuildPublic: Story<GuildPublicProps> = (arguments_) => {
|
|
||||||
return <Component {...arguments_} />
|
|
||||||
}
|
|
||||||
GuildPublic.args = {
|
|
||||||
guild: {
|
|
||||||
...guildExample,
|
|
||||||
membersCount: 1
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,18 +0,0 @@
|
|||||||
import { render } from '@testing-library/react'
|
|
||||||
|
|
||||||
import { GuildPublic } from './GuildPublic'
|
|
||||||
import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
|
|
||||||
|
|
||||||
describe('<GuildPublic />', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(
|
|
||||||
<GuildPublic
|
|
||||||
guild={{
|
|
||||||
...guildExample,
|
|
||||||
membersCount: 1
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
expect(baseElement).toBeTruthy()
|
|
||||||
})
|
|
||||||
})
|
|
@ -1,5 +1,10 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
import Image from 'next/image'
|
import Image from 'next/image'
|
||||||
import useTranslation from 'next-translate/useTranslation'
|
import useTranslation from 'next-translate/useTranslation'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
|
import { Emoji } from 'components/Emoji'
|
||||||
|
import { ConfirmGuildJoin } from 'components/Application/ConfirmGuildJoin'
|
||||||
|
|
||||||
import { GuildPublic as GuildPublicType } from '../../../../models/Guild'
|
import { GuildPublic as GuildPublicType } from '../../../../models/Guild'
|
||||||
|
|
||||||
@ -9,27 +14,59 @@ export interface GuildPublicProps {
|
|||||||
|
|
||||||
export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
|
||||||
const { guild } = props
|
const { guild } = props
|
||||||
|
const [isConfirmed, setIsConfirmed] = useState(false)
|
||||||
|
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='max-w-sm flex flex-col items-center justify-center border-gray-500 dark:border-gray-700 p-4 cursor-pointer rounded shadow-lg border transition duration-200 ease-in-out hover:-translate-y-2 hover:shadow-none'>
|
<div className='relative overflow-hidden rounded border border-gray-500 dark:border-gray-700 hover:-translate-y-2 hover:shadow-none shadow-lg transition duration-200 ease-in-out'>
|
||||||
|
<div
|
||||||
|
className={classNames(
|
||||||
|
'flex flex-col items-center h-full justify-center cursor-pointer p-4 pt-8 transition duration-200 ease-in-out',
|
||||||
|
{ '-translate-x-full': isConfirmed }
|
||||||
|
)}
|
||||||
|
onClick={() => setIsConfirmed(!isConfirmed)}
|
||||||
|
>
|
||||||
<Image
|
<Image
|
||||||
className='rounded-full'
|
className='rounded-full'
|
||||||
src={guild.icon != null ? guild.icon : '/images/data/guild-default.png'}
|
src={
|
||||||
|
guild.icon != null ? guild.icon : '/images/data/guild-default.png'
|
||||||
|
}
|
||||||
alt='logo'
|
alt='logo'
|
||||||
width={80}
|
width={80}
|
||||||
height={80}
|
height={80}
|
||||||
/>
|
/>
|
||||||
<div className='m-2 text-center mt-3'>
|
<div className='w-full px-4 m-2 text-center mt-6'>
|
||||||
<h3 data-cy='guild-name' className='font-bold text-xl mb-2'>
|
<h3
|
||||||
|
data-cy='guild-name'
|
||||||
|
className='w-full center font-bold text-xl mb-2 truncate'
|
||||||
|
>
|
||||||
{guild.name}
|
{guild.name}
|
||||||
</h3>
|
</h3>
|
||||||
<p className='text-base w-11/12 mx-auto'>{guild.description}</p>
|
<p className='break-words'>
|
||||||
|
{guild.description != null ? (
|
||||||
|
guild.description
|
||||||
|
) : (
|
||||||
|
<span className='flex h-full opacity-25 justify-center items-center'>
|
||||||
|
<Emoji value=':eyes:' size={25} />
|
||||||
|
<span className='ml-2'>Nothing's here...</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p className='flex flex-col text-green-800 dark:text-green-400 mt-4'>
|
<p className='flex flex-col text-green-800 dark:text-green-400 mt-auto'>
|
||||||
{guild.membersCount} {t('application:members')}
|
{guild.membersCount} {t('application:members')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<ConfirmGuildJoin
|
||||||
|
className={classNames(
|
||||||
|
'absolute w-full h-full flex flex-col w-ful h-ful top-1/2 -translate-y-1/2 left-full translate-x- rounded-2xl justify-center items-center transition-all',
|
||||||
|
{
|
||||||
|
'!left-0': isConfirmed
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
handleJoinGuild={() => setIsConfirmed(!isConfirmed)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -10,6 +10,7 @@ import { usePagination } from '../../../hooks/usePagination'
|
|||||||
|
|
||||||
export const JoinGuildsPublic: React.FC = () => {
|
export const JoinGuildsPublic: React.FC = () => {
|
||||||
const [search, setSearch] = useState('')
|
const [search, setSearch] = useState('')
|
||||||
|
|
||||||
const { authentication } = useAuthentication()
|
const { authentication } = useAuthentication()
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
@ -29,7 +30,7 @@ export const JoinGuildsPublic: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className='flex flex-col w-full h-full transition-all'>
|
||||||
<input
|
<input
|
||||||
data-cy='search-guild-input'
|
data-cy='search-guild-input'
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
@ -38,9 +39,9 @@ export const JoinGuildsPublic: React.FC = () => {
|
|||||||
name='search-guild'
|
name='search-guild'
|
||||||
placeholder={`🔎 ${t('application:search')}...`}
|
placeholder={`🔎 ${t('application:search')}...`}
|
||||||
/>
|
/>
|
||||||
<div className='w-full flex items-center justify-center p-12'>
|
<div className='w-full p-12'>
|
||||||
<InfiniteScroll
|
<InfiniteScroll
|
||||||
className='guilds-public-list max-w-[1600px] grid grid-cols-1 xl:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-8 !overflow-hidden'
|
className='guilds-public-list max-w-[1400px] mx-auto grid gap-8 grid-cols-[repeat(auto-fill,_minmax(20em,_1fr))] !overflow-visible'
|
||||||
dataLength={items.length}
|
dataLength={items.length}
|
||||||
next={nextPage}
|
next={nextPage}
|
||||||
scrollableTarget='application-page-content'
|
scrollableTarget='application-page-content'
|
||||||
@ -52,6 +53,6 @@ export const JoinGuildsPublic: React.FC = () => {
|
|||||||
})}
|
})}
|
||||||
</InfiniteScroll>
|
</InfiniteScroll>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,7 @@ export const Member: React.FC<MemberProps> = (props) => {
|
|||||||
return (
|
return (
|
||||||
<Link href={`/application/users/${member.user.id}`}>
|
<Link href={`/application/users/${member.user.id}`}>
|
||||||
<a>
|
<a>
|
||||||
<div className='flex items-center cursor-pointer py-2 px-4 pr-10 rounded hover:bg-gray-300 dark:hover:bg-gray-900'>
|
<div className='flex items-center cursor-pointer py-2 px-6 pr-10 overflow-hidden hover:bg-gray-300 dark:hover:bg-gray-900'>
|
||||||
<div className='min-w-[50px] flex rounded-full'>
|
<div className='min-w-[50px] flex rounded-full'>
|
||||||
<Image
|
<Image
|
||||||
src={
|
src={
|
||||||
@ -29,14 +29,13 @@ export const Member: React.FC<MemberProps> = (props) => {
|
|||||||
className='rounded-full'
|
className='rounded-full'
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='max-w-[145px] ml-4'>
|
<div className='ml-5'>
|
||||||
<p
|
<p data-cy='member-user-name' className='truncate font-bold'>
|
||||||
data-cy='member-user-name'
|
|
||||||
className='overflow-hidden whitespace-nowrap overflow-ellipsis'
|
|
||||||
>
|
|
||||||
{member.user.name}
|
{member.user.name}
|
||||||
</p>
|
</p>
|
||||||
{member.user.status != null && <span>{member.user.status}</span>}
|
{member.user.status != null && (
|
||||||
|
<span className='block truncate w-44'>{member.user.status}</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
@ -21,7 +21,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
|
|||||||
{
|
{
|
||||||
'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1':
|
'top-0 right-0 scrollbar-firefox-support overflow-y-auto flex-col space-y-1':
|
||||||
direction === 'right',
|
direction === 'right',
|
||||||
'w-64': direction === 'right' && visible,
|
'w-72': direction === 'right' && visible,
|
||||||
'w-0 opacity-0': !visible,
|
'w-0 opacity-0': !visible,
|
||||||
'w-80': direction === 'left' && visible,
|
'w-80': direction === 'left' && visible,
|
||||||
'max-w-max': typeof path !== 'string' && direction === 'left',
|
'max-w-max': typeof path !== 'string' && direction === 'left',
|
||||||
|
@ -9,6 +9,7 @@ import { API_URL } from '../../../tools/api'
|
|||||||
import { UserPublic } from '../../../models/User'
|
import { UserPublic } from '../../../models/User'
|
||||||
import { UserProfileGuilds } from './UserProfileGuilds'
|
import { UserProfileGuilds } from './UserProfileGuilds'
|
||||||
import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild'
|
import { UserProfileGuild } from './UserProfileGuilds/UserProfileGuild'
|
||||||
|
import { ConfirmGuildJoin } from '../ConfirmGuildJoin'
|
||||||
|
|
||||||
export interface UserProfileProps {
|
export interface UserProfileProps {
|
||||||
className?: string
|
className?: string
|
||||||
@ -137,36 +138,13 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<ConfirmGuildJoin
|
||||||
className={classNames(
|
className={classNames(
|
||||||
'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]',
|
'absolute w-full h-full flex flex-col justify-center items-center transition-all top-0 left-[150%]',
|
||||||
{ 'left-[0%]': confirmation }
|
{ 'left-[0%]': confirmation }
|
||||||
)}
|
)}
|
||||||
>
|
handleJoinGuild={handleConfirmationState}
|
||||||
<Image
|
|
||||||
src='/images/svg/design/join-guild.svg'
|
|
||||||
alt='Joing Guild Illustration'
|
|
||||||
height={150}
|
|
||||||
width={150}
|
|
||||||
/>
|
/>
|
||||||
<div className='flex flex-col mt-8'>
|
|
||||||
<h1 className='text-xl mb-6 text-center'>Rejoindre la guild ?</h1>
|
|
||||||
<div className='flex gap-7'>
|
|
||||||
<button
|
|
||||||
className='px-8 py-2 rounded-3xl bg-success hover:opacity-50 transition'
|
|
||||||
onClick={handleConfirmationState}
|
|
||||||
>
|
|
||||||
Oui
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className='px-8 py-2 rounded-3xl bg-error hover:opacity-50 transition'
|
|
||||||
onClick={handleConfirmationState}
|
|
||||||
>
|
|
||||||
Non
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<XIcon
|
<XIcon
|
||||||
height={40}
|
height={40}
|
||||||
|
@ -8,7 +8,7 @@ export const guildSchema = {
|
|||||||
id,
|
id,
|
||||||
name: Type.String({ minLength: 1, maxLength: 30 }),
|
name: Type.String({ minLength: 1, maxLength: 30 }),
|
||||||
icon: Type.Union([Type.String({ format: 'uri-reference' }), Type.Null()]),
|
icon: Type.Union([Type.String({ format: 'uri-reference' }), Type.Null()]),
|
||||||
description: Type.Union([Type.String({ maxLength: 160 }), Type.Null()]),
|
description: Type.Union([Type.String({ maxLength: 120 }), Type.Null()]),
|
||||||
createdAt: date.createdAt,
|
createdAt: date.createdAt,
|
||||||
updatedAt: date.updatedAt
|
updatedAt: date.updatedAt
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user