From 6e1460a8275852f4e53d30c0123271bc0ac3916d Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 17 Feb 2024 12:50:25 +0300
Subject: [PATCH] Optimize frontend for mobile screens

---
 .../src/app/Navigation/Navigation.tsx         |  6 ++-
 .../ConstituentaToolbar.tsx                   |  2 +-
 .../EditorConstituenta/ControlsOverlay.tsx    | 40 +++++++++++++++++++
 .../EditorConstituenta/FormConstituenta.tsx   | 31 +++-----------
 .../EditorRSExpression/EditorRSExpression.tsx |  2 +-
 .../EditorRSExpression/RSEditControls.tsx     |  2 +-
 .../EditorRSExpression/RSLocalButton.tsx      |  2 +-
 .../EditorRSExpression/RSTokenButton.tsx      |  6 +--
 .../RSFormPage/EditorRSForm/EditorRSForm.tsx  |  4 +-
 .../RSFormPage/EditorRSForm/FormRSForm.tsx    |  6 ++-
 .../RSFormPage/EditorRSForm/RSFormStats.tsx   |  2 +-
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  2 +-
 12 files changed, 67 insertions(+), 38 deletions(-)
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx

diff --git a/rsconcept/frontend/src/app/Navigation/Navigation.tsx b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
index 35f59cc3..5af48b72 100644
--- a/rsconcept/frontend/src/app/Navigation/Navigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Navigation.tsx
@@ -33,7 +33,11 @@ function Navigation() {
     >
       <ToggleNavigationButton />
       <motion.div
-        className={clsx('pl-2 pr-[0.9rem] h-[3rem]', 'flex justify-between', 'shadow-border')}
+        className={clsx(
+          'pl-2 pr-[0.9rem] h-[3rem]', // prettier: split lines
+          'flex justify-between',
+          'shadow-border'
+        )}
         initial={false}
         animate={!noNavigationAnimation ? 'open' : 'closed'}
         variants={animateNavigation}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
index b089c0fe..ec945bd1 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ConstituentaToolbar.tsx
@@ -36,7 +36,7 @@ function ConstituentaToolbar({
 }: ConstituentaToolbarProps) {
   const canSave = useMemo(() => isModified && isMutable, [isModified, isMutable]);
   return (
-    <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
+    <Overlay position='top-1 right-4 sm:right-1/2 sm:translate-x-1/2' className='flex'>
       <MiniButton
         title='Сохранить изменения [Ctrl + S]'
         disabled={!canSave}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx
new file mode 100644
index 00000000..d658e1f0
--- /dev/null
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ControlsOverlay.tsx
@@ -0,0 +1,40 @@
+import { LiaEdit } from 'react-icons/lia';
+
+import MiniButton from '@/components/ui/MiniButton';
+import Overlay from '@/components/ui/Overlay';
+import { IConstituenta } from '@/models/rsform';
+
+interface ControlsOverlayProps {
+  disabled?: boolean;
+  constituenta?: IConstituenta;
+
+  onRename: () => void;
+  onEditTerm: () => void;
+}
+
+function ControlsOverlay({ disabled, constituenta, onRename, onEditTerm }: ControlsOverlayProps) {
+  return (
+    <Overlay position='top-1 left-[4.1rem]' className='flex select-none'>
+      <MiniButton
+        title={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
+        disabled={disabled}
+        noHover
+        onClick={onEditTerm}
+        icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
+      />
+      <div className='pt-1 pl-[1.375rem] text-sm font-medium whitespace-nowrap'>
+        <span>Имя </span>
+        <span className='ml-1'>{constituenta?.alias ?? ''}</span>
+      </div>
+      <MiniButton
+        noHover
+        title='Переименовать конституенту'
+        disabled={disabled}
+        onClick={onRename}
+        icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
+      />
+    </Overlay>
+  );
+}
+
+export default ControlsOverlay;
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index 3e2ac021..75feb01a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
@@ -3,12 +3,9 @@
 import clsx from 'clsx';
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { FiSave } from 'react-icons/fi';
-import { LiaEdit } from 'react-icons/lia';
 import { toast } from 'react-toastify';
 
 import RefsInput from '@/components/RefsInput';
-import MiniButton from '@/components/ui/MiniButton';
-import Overlay from '@/components/ui/Overlay';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
 import { useRSForm } from '@/context/RSFormContext';
@@ -17,6 +14,7 @@ import { classnames } from '@/utils/constants';
 import { labelCstTypification } from '@/utils/labels';
 
 import EditorRSExpression from '../EditorRSExpression';
+import ControlsOverlay from './ControlsOverlay';
 
 interface FormConstituentaProps {
   disabled?: boolean;
@@ -111,29 +109,10 @@ function FormConstituenta({
 
   return (
     <>
-      <Overlay position='top-1 left-[4.1rem]' className='flex select-none'>
-        <MiniButton
-          title={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
-          disabled={disabled}
-          noHover
-          onClick={onEditTerm}
-          icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
-        />
-        <div className='pt-1 pl-[1.375rem] text-sm font-medium whitespace-nowrap'>
-          <span>Имя </span>
-          <span className='ml-1'>{constituenta?.alias ?? ''}</span>
-        </div>
-        <MiniButton
-          noHover
-          title='Переименовать конституенту'
-          disabled={disabled}
-          onClick={onRename}
-          icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
-        />
-      </Overlay>
+      <ControlsOverlay disabled={disabled} constituenta={constituenta} onEditTerm={onEditTerm} onRename={onRename} />
       <form
         id={id}
-        className={clsx('mt-1 w-[47.8rem] shrink-0', 'px-4 py-1', classnames.flex_col)}
+        className={clsx('mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1', classnames.flex_col)}
         onSubmit={handleSubmit}
       >
         <RefsInput
@@ -160,7 +139,7 @@ function FormConstituenta({
         />
         <EditorRSExpression
           label='Формальное определение'
-          placeholder='Родоструктурное выражение, задающее формальное определение'
+          placeholder='Родоструктурное выражение'
           value={expression}
           activeCst={constituenta}
           showList={showList}
@@ -172,7 +151,7 @@ function FormConstituenta({
         />
         <RefsInput
           label='Текстовое определение'
-          placeholder='Лингвистическая интерпретация формального выражения'
+          placeholder='Текстовый вариант формального определения'
           height='3.8rem'
           items={schema?.items}
           value={textDefinition}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
index 923e3be2..b3dd8864 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/EditorRSExpression.tsx
@@ -173,7 +173,7 @@ function EditorRSExpression({
           />
         </Overlay>
 
-        <Overlay position='top-[-0.5rem] right-1/2 translate-x-1/2'>
+        <Overlay position='top-[-0.5rem] pl-[6rem] sm:pl-0 right-1/2 translate-x-1/2'>
           <StatusBar
             processing={loading}
             isModified={isModified}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
index 662fa45c..19d1f2f4 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSEditControls.tsx
@@ -90,7 +90,7 @@ interface RSEditorControlsProps {
 function RSEditorControls({ isOpen, disabled, onEdit }: RSEditorControlsProps) {
   return (
     <motion.div
-      className='flex-wrap text-sm divide-solid'
+      className='flex-wrap text-xs sm:text-sm divide-solid'
       initial={false}
       animate={isOpen ? 'open' : 'closed'}
       variants={animateRSControl}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
index ff59ffc9..b92faebf 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
@@ -19,7 +19,7 @@ function RSLocalButton({ text, title, disabled, onInsert }: RSLocalButtonProps)
       data-tooltip-id={title ? globalIDs.tooltip : undefined}
       data-tooltip-content={title}
       className={clsx(
-        'w-[2rem] h-6',
+        'w-[1.7rem] sm:w-[2rem] h-5 sm:h-6',
         'cursor-pointer disabled:cursor-default',
         'rounded-none',
         'clr-hover clr-btn-clear',
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
index ebb48293..8a6f59d7 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
@@ -19,15 +19,15 @@ function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps) {
       disabled={disabled}
       onClick={() => onInsert(token)}
       className={clsx(
-        'h-6',
+        'h-5 sm:h-6',
         'px-1',
         'outline-none',
         'clr-hover clr-btn-clear',
         'font-math',
         'cursor-pointer disabled:cursor-default',
         {
-          'w-[4.5rem]': label.length > 3,
-          'w-[2.25rem]': label.length <= 3
+          'w-[3.4rem] sm:w-[4.5rem]': label.length > 3,
+          'w-[1.7rem] sm:w-[2.25rem]': label.length <= 3
         }
       )}
       data-tooltip-id={globalIDs.tooltip}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
index 5df2f3a3..d7bb75c3 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import clsx from 'clsx';
+
 import InfoLibraryItem from '@/components/InfoLibraryItem';
 import Divider from '@/components/ui/Divider';
 import FlexColumn from '@/components/ui/FlexColumn';
@@ -50,7 +52,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
         onSubmit={initiateSubmit}
         onDestroy={onDestroy}
       />
-      <div tabIndex={-1} className='flex flex-col sm:flex-row w-fit' onKeyDown={handleInput}>
+      <div tabIndex={-1} onKeyDown={handleInput} className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}>
         <FlexColumn className='px-4 pb-2'>
           <FormRSForm
             disabled={!isMutable}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
index d0996ea2..0f3928e0 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx
@@ -86,7 +86,11 @@ function FormRSForm({ id, disabled, isModified, setIsModified }: FormRSFormProps
   };
 
   return (
-    <form id={id} className={clsx('mt-1 min-w-[22rem] w-[30rem]', 'py-1', classnames.flex_col)} onSubmit={handleSubmit}>
+    <form
+      id={id}
+      className={clsx('mt-1 min-w-[22rem] w-full sm:max-w-[30rem]', 'py-1', classnames.flex_col)}
+      onSubmit={handleSubmit}
+    >
       <TextInput
         required
         label='Полное название'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx
index 72479824..838f0a72 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx
@@ -11,7 +11,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
     return null;
   }
   return (
-    <div className='flex flex-col gap-1 px-4 mt-8 w-[16rem]'>
+    <div className='flex flex-col gap-1 px-4 sm:mt-8 sm:w-[16rem]'>
       <LabeledValue id='count_all' label='Всего конституент ' text={stats.count_all} />
       <LabeledValue id='count_errors' label='Некорректных' text={stats.count_errors} />
       {stats.count_property !== 0 ? (
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index 05aed8d0..d51eb592 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
@@ -167,7 +167,7 @@ function RSTabs() {
           onSelect={onSelectTab}
           defaultFocus
           selectedTabClassName='clr-selected'
-          className='flex flex-col min-w-[45rem]'
+          className='flex flex-col min-w-fit'
         >
           <TabList className={clsx('mx-auto', 'flex', 'border-b-2 border-x-2 divide-x-2')}>
             <RSTabsMenu onDestroy={onDestroySchema} />