From 4f9f885160da942dc4311eb75c67591fe51dd6ee Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 5 Jun 2024 13:00:28 +0300
Subject: [PATCH] Fix layout

---
 .../frontend/src/app/ApplicationLayout.tsx    |  10 +-
 .../pages/CreateItemPage/FormCreateItem.tsx   | 173 +++++++++---------
 .../pages/ManualsPage/items/HelpRSLang.tsx    |   4 +-
 .../src/pages/OssPage/ProcessError.tsx        |  27 ---
 .../EditorRSFormCard/EditorLibraryItem.tsx    |   2 +-
 .../EditorRSFormCard/EditorRSFormCard.tsx     |   7 +-
 .../EditorRSFormCard/RSFormStats.tsx          |   2 +-
 7 files changed, 101 insertions(+), 124 deletions(-)
 delete mode 100644 rsconcept/frontend/src/pages/OssPage/ProcessError.tsx

diff --git a/rsconcept/frontend/src/app/ApplicationLayout.tsx b/rsconcept/frontend/src/app/ApplicationLayout.tsx
index 48612a6e..84b95b75 100644
--- a/rsconcept/frontend/src/app/ApplicationLayout.tsx
+++ b/rsconcept/frontend/src/app/ApplicationLayout.tsx
@@ -23,13 +23,15 @@ function ApplicationLayout() {
 
         <div
           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={{
-            maxHeight: viewportHeight,
-            overflowY: showScroll ? 'scroll' : 'auto'
+            maxHeight: viewportHeight
           }}
         >
-          <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 />
           </main>
           <Footer />
diff --git a/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx b/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
index b8c80181..36e6b528 100644
--- a/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
+++ b/rsconcept/frontend/src/pages/CreateItemPage/FormCreateItem.tsx
@@ -98,104 +98,103 @@ function FormCreateItem() {
   }
 
   return (
-    <>
-      <Overlay position='top-[0.5rem] right-[0.5rem]'>
-        <input
-          id='schema_file'
-          ref={inputRef}
-          type='file'
-          style={{ display: 'none' }}
-          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)}
+    <form className={clsx('cc-column', 'min-w-[30rem] max-w-[30rem] mx-auto', 'px-6 py-3')} onSubmit={handleSubmit}>
+      <h1>
+        <Overlay position='top-0 right-[0.5rem]'>
+          <input
+            id='schema_file'
+            ref={inputRef}
+            type='file'
+            style={{ display: 'none' }}
+            accept={EXTEOR_TRS_FILE}
+            onChange={handleFileChange}
           />
-          {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}
+          <MiniButton
+            title='Загрузить из Экстеор'
+            icon={<IconDownload size='1.25rem' className='icon-primary' />}
+            onClick={() => inputRef.current?.click()}
+          />
+        </Overlay>
+        Создание схемы
+      </h1>
 
-          <div className='flex flex-col gap-2'>
-            <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>
+      {fileName ? <Label text={`Загружен файл: ${fileName}`} /> : null}
 
-        <TextArea
-          id='schema_comment'
-          label='Описание'
+      <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 && 'Загрузить из файла'}
-          value={comment}
-          onChange={event => setComment(event.target.value)}
+          className='w-[14rem]'
+          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 w-[7rem] h-min'>
-            <Label text='Корень' />
-            <SelectLocationHead
-              value={head}
-              onChange={setHead}
-              excluded={!user?.is_staff ? [LocationHead.LIBRARY] : []}
+        <div className='flex flex-col gap-2'>
+          <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>
-          <TextArea
-            id='dlg_cst_body'
-            label='Путь'
-            className='w-[18rem]'
-            rows={4}
-            value={body}
-            onChange={event => setBody(event.target.value)}
+        </div>
+      </div>
+
+      <TextArea
+        id='schema_comment'
+        label='Описание'
+        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>
+        <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'>
-          <SubmitButton text='Создать схему' loading={processing} className='min-w-[10rem]' disabled={!isValid} />
-          <Button text='Отмена' className='min-w-[10rem]' onClick={() => handleCancel()} />
-        </div>
-        {error ? <InfoError error={error} /> : null}
-      </form>
-    </>
+      <div className='flex justify-around gap-6 py-3'>
+        <SubmitButton text='Создать схему' loading={processing} className='min-w-[10rem]' disabled={!isValid} />
+        <Button text='Отмена' className='min-w-[10rem]' onClick={() => handleCancel()} />
+      </div>
+      {error ? <InfoError error={error} /> : null}
+    </form>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx b/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx
index 54d0e474..13268903 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx
+++ b/rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx
@@ -13,8 +13,8 @@ function HelpRSLang() {
   const videoHeight = useMemo(() => {
     const viewH = windowSize.height ?? 0;
     const viewW = windowSize.width ?? 0;
-    const availableWidth = viewW - (windowSize.isSmall ? 35 : 290);
-    return Math.min(1080, viewH - 320, Math.floor((availableWidth * 9) / 16));
+    const availableWidth = viewW - (windowSize.isSmall ? 35 : 300);
+    return Math.min(1080, Math.max(viewH - 450, 300), Math.floor((availableWidth * 9) / 16));
   }, [windowSize]);
 
   // prettier-ignore
diff --git a/rsconcept/frontend/src/pages/OssPage/ProcessError.tsx b/rsconcept/frontend/src/pages/OssPage/ProcessError.tsx
deleted file mode 100644
index 9cca24f0..00000000
--- a/rsconcept/frontend/src/pages/OssPage/ProcessError.tsx
+++ /dev/null
@@ -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} />;
-}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
index 9d30da25..b32e8f5c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorLibraryItem.tsx
@@ -59,7 +59,7 @@ function EditorLibraryItem({ item, isModified, controller }: EditorLibraryItemPr
           />
         </Overlay>
       ) : 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 ? (
         <Overlay position='top-[-0.5rem] left-[5.5rem] cc-icons'>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx
index 15868e51..64a337d3 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/EditorRSFormCard.tsx
@@ -50,8 +50,11 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
         onSubmit={initiateSubmit}
         onDestroy={onDestroy}
       />
-      <AnimateFade onKeyDown={handleInput} className={clsx('sm:w-fit mx-auto', 'flex flex-col sm:flex-row')}>
-        <FlexColumn className='px-3'>
+      <AnimateFade
+        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} />
           <EditorLibraryItem item={schema} isModified={isModified} controller={controller} />
         </FlexColumn>
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
index fd761bd1..b3c097fd 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/RSFormStats.tsx
@@ -11,7 +11,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
     return null;
   }
   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' />
 
       <LabeledValue id='count_all' label='Всего конституент ' text={stats.count_all} />