Fix layout

This commit is contained in:
IRBorisov 2024-06-05 13:00:28 +03:00
parent 89c2e704a8
commit 4f9f885160
7 changed files with 101 additions and 124 deletions

View File

@ -23,13 +23,15 @@ function ApplicationLayout() {
<div <div
id={globals.main_scroll} id={globals.main_scroll}
className='cc-scroll-y flex flex-col items-start overflow-x-auto max-w-[100vw]' className='flex flex-col items-start overflow-x-auto max-w-[100vw]'
style={{ style={{
maxHeight: viewportHeight, maxHeight: viewportHeight
overflowY: showScroll ? 'scroll' : 'auto'
}} }}
> >
<main className='flex flex-col items-center w-full' style={{ minHeight: mainHeight }}> <main
className='w-full cc-scroll-y'
style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}
>
<Outlet /> <Outlet />
</main> </main>
<Footer /> <Footer />

View File

@ -98,104 +98,103 @@ function FormCreateItem() {
} }
return ( return (
<> <form className={clsx('cc-column', 'min-w-[30rem] max-w-[30rem] mx-auto', 'px-6 py-3')} onSubmit={handleSubmit}>
<Overlay position='top-[0.5rem] right-[0.5rem]'> <h1>
<input <Overlay position='top-0 right-[0.5rem]'>
id='schema_file' <input
ref={inputRef} id='schema_file'
type='file' ref={inputRef}
style={{ display: 'none' }} type='file'
accept={EXTEOR_TRS_FILE} style={{ display: 'none' }}
onChange={handleFileChange} accept={EXTEOR_TRS_FILE}
/> onChange={handleFileChange}
<MiniButton
title='Загрузить из Экстеор'
icon={<IconDownload size='1.25rem' className='icon-primary' />}
onClick={() => inputRef.current?.click()}
/>
</Overlay>
<form className={clsx('cc-column', 'min-w-[30rem] max-w-[30rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
<h1>Создание схемы</h1>
{fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
<TextInput
id='schema_title'
required={!file}
label='Полное название'
placeholder={file && 'Загрузить из файла'}
value={title}
onChange={event => setTitle(event.target.value)}
/>
<div className='flex justify-between gap-3'>
<TextInput
id='schema_alias'
required={!file}
label='Сокращение'
placeholder={file && 'Загрузить из файла'}
className='w-[14rem]'
pattern={patterns.library_alias}
title={`не более ${limits.library_alias_len} символов`}
value={alias}
onChange={event => setAlias(event.target.value)}
/> />
{user?.is_staff ? ( <MiniButton
<div className='flex flex-col items-center gap-2'> title='Загрузить из Экстеор'
<Label text='Тип схемы' className='self-center select-none' /> icon={<IconDownload size='1.25rem' className='icon-primary' />}
<SelectItemType value={itemType} onChange={setItemType} /> onClick={() => inputRef.current?.click()}
</div> />
) : null} </Overlay>
Создание схемы
</h1>
<div className='flex flex-col gap-2'> {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
<Label text='Доступ' className='self-center select-none' />
<div className='ml-auto cc-icons'>
<SelectAccessPolicy value={policy} onChange={setPolicy} />
<MiniButton
className='disabled:cursor-auto'
title={visible ? 'Библиотека: отображать' : 'Библиотека: скрывать'}
icon={<VisibilityIcon value={visible} />}
onClick={() => setVisible(prev => !prev)}
/>
</div>
</div>
</div>
<TextArea <TextInput
id='schema_comment' id='schema_title'
label='Описание' required={!file}
label='Полное название'
placeholder={file && 'Загрузить из файла'}
value={title}
onChange={event => setTitle(event.target.value)}
/>
<div className='flex justify-between gap-3'>
<TextInput
id='schema_alias'
required={!file}
label='Сокращение'
placeholder={file && 'Загрузить из файла'} placeholder={file && 'Загрузить из файла'}
value={comment} className='w-[14rem]'
onChange={event => setComment(event.target.value)} pattern={patterns.library_alias}
title={`не более ${limits.library_alias_len} символов`}
value={alias}
onChange={event => setAlias(event.target.value)}
/> />
{user?.is_staff ? (
<div className='flex flex-col items-center gap-2'>
<Label text='Тип схемы' className='self-center select-none' />
<SelectItemType value={itemType} onChange={setItemType} />
</div>
) : null}
<div className='flex justify-between gap-3'> <div className='flex flex-col gap-2'>
<div className='flex flex-col gap-2 w-[7rem] h-min'> <Label text='Доступ' className='self-center select-none' />
<Label text='Корень' /> <div className='ml-auto cc-icons'>
<SelectLocationHead <SelectAccessPolicy value={policy} onChange={setPolicy} />
value={head} <MiniButton
onChange={setHead} className='disabled:cursor-auto'
excluded={!user?.is_staff ? [LocationHead.LIBRARY] : []} title={visible ? 'Библиотека: отображать' : 'Библиотека: скрывать'}
icon={<VisibilityIcon value={visible} />}
onClick={() => setVisible(prev => !prev)}
/> />
</div> </div>
<TextArea </div>
id='dlg_cst_body' </div>
label='Путь'
className='w-[18rem]' <TextArea
rows={4} id='schema_comment'
value={body} label='Описание'
onChange={event => setBody(event.target.value)} placeholder={file && 'Загрузить из файла'}
value={comment}
onChange={event => setComment(event.target.value)}
/>
<div className='flex justify-between gap-3'>
<div className='flex flex-col gap-2 w-[7rem] h-min'>
<Label text='Корень' />
<SelectLocationHead
value={head}
onChange={setHead}
excluded={!user?.is_staff ? [LocationHead.LIBRARY] : []}
/> />
</div> </div>
<TextArea
id='dlg_cst_body'
label='Путь'
className='w-[18rem]'
rows={4}
value={body}
onChange={event => setBody(event.target.value)}
/>
</div>
<div className='flex justify-around gap-6 py-3'> <div className='flex justify-around gap-6 py-3'>
<SubmitButton text='Создать схему' loading={processing} className='min-w-[10rem]' disabled={!isValid} /> <SubmitButton text='Создать схему' loading={processing} className='min-w-[10rem]' disabled={!isValid} />
<Button text='Отмена' className='min-w-[10rem]' onClick={() => handleCancel()} /> <Button text='Отмена' className='min-w-[10rem]' onClick={() => handleCancel()} />
</div> </div>
{error ? <InfoError error={error} /> : null} {error ? <InfoError error={error} /> : null}
</form> </form>
</>
); );
} }

View File

@ -13,8 +13,8 @@ function HelpRSLang() {
const videoHeight = useMemo(() => { const videoHeight = useMemo(() => {
const viewH = windowSize.height ?? 0; const viewH = windowSize.height ?? 0;
const viewW = windowSize.width ?? 0; const viewW = windowSize.width ?? 0;
const availableWidth = viewW - (windowSize.isSmall ? 35 : 290); const availableWidth = viewW - (windowSize.isSmall ? 35 : 300);
return Math.min(1080, viewH - 320, Math.floor((availableWidth * 9) / 16)); return Math.min(1080, Math.max(viewH - 450, 300), Math.floor((availableWidth * 9) / 16));
}, [windowSize]); }, [windowSize]);
// prettier-ignore // prettier-ignore

View File

@ -1,27 +0,0 @@
'use client';
import axios from 'axios';
import { ErrorData } from '@/components/info/InfoError';
import TextURL from '@/components/ui/TextURL';
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'>
<p>{`Схема с указанным идентификатором отсутствует`}</p>
<div className='flex justify-center'>
<TextURL text='Библиотека' href='/library' />
</div>
</div>
);
} else if (error.response.status === 403) {
return (
<div className='p-2 text-center'>
<p>Владелец ограничил доступ к данной схеме</p>
<TextURL text='Библиотека' href='/library' />
</div>
);
}
}
return <InfoError error={error} />;
}

View File

@ -59,7 +59,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
/> />
</Overlay> </Overlay>
) : null} ) : null}
<LabeledValue className='sm:mb-1 text-ellipsis max-w-[30rem]' label='Путь' text={item?.location ?? ''} /> <LabeledValue className='sm:mb-1 text-ellipsis' label='Путь' text={item?.location ?? ''} />
{accessLevel >= UserLevel.OWNER ? ( {accessLevel >= UserLevel.OWNER ? (
<Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'> <Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>

View File

@ -50,8 +50,11 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
onSubmit={initiateSubmit} onSubmit={initiateSubmit}
onDestroy={onDestroy} onDestroy={onDestroy}
/> />
<AnimateFade onKeyDown={handleInput} className={clsx('sm:w-fit mx-auto', 'flex flex-col sm:flex-row')}> <AnimateFade
<FlexColumn className='px-3'> onKeyDown={handleInput}
className={clsx('sm:w-fit sm:max-w-fit max-w-[32rem]', 'mx-auto ', 'flex flex-col sm:flex-row px-6')}
>
<FlexColumn>
<FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} /> <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
<EditorLibraryItem item={schema} isModified={isModified} controller={controller} /> <EditorLibraryItem item={schema} isModified={isModified} controller={controller} />
</FlexColumn> </FlexColumn>

View File

@ -11,7 +11,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
return null; return null;
} }
return ( return (
<div className='flex flex-col sm:gap-1 px-4 sm:mt-8 sm:w-[16rem]'> <div className='flex flex-col sm:gap-1 sm:ml-6 sm:mt-8 sm:w-[16rem]'>
<Divider margins='my-2' className='sm:hidden' /> <Divider margins='my-2' className='sm:hidden' />
<LabeledValue id='count_all' label='Всего конституент ' text={stats.count_all} /> <LabeledValue id='count_all' label='Всего конституент ' text={stats.count_all} />