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,8 +98,9 @@ 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>
<Overlay position='top-0 right-[0.5rem]'>
<input <input
id='schema_file' id='schema_file'
ref={inputRef} ref={inputRef}
@ -114,9 +115,8 @@ function FormCreateItem() {
onClick={() => inputRef.current?.click()} onClick={() => inputRef.current?.click()}
/> />
</Overlay> </Overlay>
Создание схемы
<form className={clsx('cc-column', 'min-w-[30rem] max-w-[30rem]', 'px-6 py-3')} onSubmit={handleSubmit}> </h1>
<h1>Создание схемы</h1>
{fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null} {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
@ -195,7 +195,6 @@ function FormCreateItem() {
</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} />