mirror of
https://github.com/IRBorisov/ConceptPortal.git
synced 2025-06-26 13:00:39 +03:00
UI: Fix layout
This commit is contained in:
IRBorisov
parent
8f855ab7df
commit
5378272010
|
|
@ -73,17 +73,14 @@ function SearchPanel({
|
|||
className={clsx(
|
||||
'sticky top-0', // prettier: split lines
|
||||
'w-full h-[2.2rem]',
|
||||
'pr-3 flex items-center',
|
||||
'flex items-center',
|
||||
'border-b',
|
||||
'text-sm',
|
||||
'clr-input'
|
||||
)}
|
||||
>
|
||||
<div className={clsx('px-2 self-center', 'min-w-[9rem]', 'select-none', 'whitespace-nowrap')}>
|
||||
Фильтр
|
||||
<span className='ml-2'>
|
||||
<div className={clsx('px-3 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
|
||||
{filtered} из {total}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className='cc-icons'>
|
||||
|
|
@ -113,9 +110,9 @@ function SearchPanel({
|
|||
<div className='flex items-center h-full mx-auto'>
|
||||
<SearchBar
|
||||
id='library_search'
|
||||
placeholder='Атрибуты'
|
||||
placeholder='Поиск'
|
||||
noBorder
|
||||
className='min-w-[8rem]'
|
||||
className='min-w-[7rem] sm:min-w-[10rem]'
|
||||
value={query}
|
||||
onChange={setQuery}
|
||||
/>
|
||||
|
|
@ -137,7 +134,7 @@ function SearchPanel({
|
|||
text={head ?? '//'}
|
||||
/>
|
||||
|
||||
<Dropdown isOpen={headMenu.isOpen} className='z-modalTooltip'>
|
||||
<Dropdown isOpen={headMenu.isOpen} stretchLeft className='z-modalTooltip'>
|
||||
<DropdownButton className='w-[10rem]' onClick={() => handleChange(undefined)}>
|
||||
<div className='inline-flex items-center gap-3'>
|
||||
<IconFolder size='1rem' className='clr-text-controls' />
|
||||
|
|
@ -173,7 +170,7 @@ function SearchPanel({
|
|||
/>
|
||||
</div>
|
||||
|
||||
<BadgeHelp topic={HelpTopic.UI_LIBRARY} className='max-w-[30rem] text-sm' offset={5} place='right-start' />
|
||||
<BadgeHelp topic={HelpTopic.UI_LIBRARY} className='max-w-[28rem] text-sm' offset={5} place='right-start' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ function LoginPage() {
|
|||
}
|
||||
return (
|
||||
<AnimateFade>
|
||||
<form className={clsx('cc-column', 'w-[24rem]', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
|
||||
<form className={clsx('cc-column', 'w-[24rem] mx-auto', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
|
||||
<img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
|
||||
<TextInput
|
||||
id='username'
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
|
|||
if (axios.isAxiosError(error) && error.response) {
|
||||
if (error.response.status === 404) {
|
||||
return (
|
||||
<div className='p-2 text-center'>
|
||||
<div className='flex flex-col items-center p-2 mx-auto'>
|
||||
<p>{`Операционная схема с указанным идентификатором отсутствует`}</p>
|
||||
<div className='flex justify-center'>
|
||||
<TextURL text='Библиотека' href='/library' />
|
||||
|
|
@ -162,7 +162,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
|
|||
);
|
||||
} else if (error.response.status === 403) {
|
||||
return (
|
||||
<div className='p-2 text-center'>
|
||||
<div className='flex flex-col items-center p-2 mx-auto'>
|
||||
<p>Владелец ограничил доступ к данной схеме</p>
|
||||
<TextURL text='Библиотека' href='/library' />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ function PasswordChangePage() {
|
|||
isLoading={loading}
|
||||
hasNoData={!isTokenValid}
|
||||
>
|
||||
<form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
|
||||
<form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
|
||||
<TextInput
|
||||
id='new_password'
|
||||
type='password'
|
||||
|
|
@ -113,7 +113,7 @@ export default PasswordChangePage;
|
|||
// ====== Internals =========
|
||||
function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
|
||||
if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
|
||||
return <div className='mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
|
||||
return <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
|
||||
} else {
|
||||
return <InfoError error={error} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -290,7 +290,7 @@ function ProcessError({
|
|||
if (axios.isAxiosError(error) && error.response) {
|
||||
if (error.response.status === 404) {
|
||||
return (
|
||||
<div className='p-2 text-center'>
|
||||
<div className='flex flex-col items-center p-2 mx-auto'>
|
||||
<p>{`Концептуальная схема с указанным идентификатором ${isArchive ? 'и версией ' : ''}отсутствует`}</p>
|
||||
<div className='flex justify-center'>
|
||||
<TextURL text='Библиотека' href='/library' />
|
||||
|
|
@ -301,7 +301,7 @@ function ProcessError({
|
|||
);
|
||||
} else if (error.response.status === 403) {
|
||||
return (
|
||||
<div className='p-2 text-center'>
|
||||
<div className='flex flex-col items-center p-2 mx-auto'>
|
||||
<p>Владелец ограничил доступ к данной схеме</p>
|
||||
<TextURL text='Библиотека' href='/library' />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -83,19 +83,24 @@ function RegisterPage() {
|
|||
}
|
||||
return (
|
||||
<AnimateFade>
|
||||
<form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
|
||||
<h1>Новый пользователь</h1>
|
||||
<div className='flex gap-12'>
|
||||
<FlexColumn>
|
||||
<div className='absolute'>
|
||||
<Overlay id={globals.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
|
||||
<form className={clsx('cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
|
||||
<h1>
|
||||
<span>Новый пользователь</span>
|
||||
<Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>
|
||||
<IconHelp size='1.25rem' className='icon-primary' />
|
||||
</Overlay>
|
||||
<Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
|
||||
используйте уникальный пароль для каждого сайта
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<Overlay id={globals.email_tooltip} position='top-[0.5rem] right-[1.75rem]'>
|
||||
<IconHelp size='1.25rem' className='icon-primary' />
|
||||
</Overlay>
|
||||
<Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
|
||||
электронная почта используется для восстановления пароля
|
||||
</Tooltip>
|
||||
</h1>
|
||||
<div className='flex gap-12'>
|
||||
<FlexColumn>
|
||||
<TextInput
|
||||
id='username'
|
||||
autoComplete='username'
|
||||
|
|
@ -130,15 +135,6 @@ function RegisterPage() {
|
|||
</FlexColumn>
|
||||
|
||||
<FlexColumn className='w-[15rem]'>
|
||||
<div className='absolute'>
|
||||
<Overlay id={globals.email_tooltip} position='top-[0rem] right-[-15rem]'>
|
||||
<IconHelp size='1.25rem' className='icon-primary' />
|
||||
</Overlay>
|
||||
<Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
|
||||
электронная почта используется для восстановления пароля
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<TextInput
|
||||
id='email'
|
||||
autoComplete='email'
|
||||
|
|
@ -192,11 +188,16 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
|
|||
if ('email' in error.response.data) {
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
<div className='w-full text-sm text-center select-text clr-text-red'>{error.response.data.email}.</div>
|
||||
<div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.email}.</div>
|
||||
);
|
||||
} else if ('username' in error.response.data) {
|
||||
return (
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
||||
<div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.username}.</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className='text-sm select-text clr-text-red'>
|
||||
<div className='mx-auto text-sm select-text clr-text-red'>
|
||||
<PrettyJson data={error.response} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -35,9 +35,11 @@ function RestorePasswordPage() {
|
|||
return (
|
||||
<AnimateFade>
|
||||
{!isCompleted ? (
|
||||
<form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
|
||||
<form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
|
||||
<TextInput
|
||||
id='email'
|
||||
autoComplete='email'
|
||||
required
|
||||
allowEnter
|
||||
label='Электронная почта'
|
||||
value={email}
|
||||
|
|
@ -69,7 +71,9 @@ export default RestorePasswordPage;
|
|||
// ====== Internals =========
|
||||
function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
|
||||
if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
|
||||
return <div className='mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>;
|
||||
return (
|
||||
<div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>
|
||||
);
|
||||
} else {
|
||||
return <InfoError error={error} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ function UserTabs() {
|
|||
error={error}
|
||||
hasNoData={!user}
|
||||
>
|
||||
<AnimateFade className='flex gap-6 py-2'>
|
||||
<div>
|
||||
<AnimateFade className='flex gap-6 py-2 mx-auto w-fit'>
|
||||
<div className='w-fit'>
|
||||
<Overlay position='top-0 right-0'>
|
||||
<MiniButton
|
||||
title='Отслеживаемые схемы'
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user