Improve mobile size UI

rsconcept/frontend/src/components/Help/HelpButton.tsx

@@ -19,7 +19,7 @@ function HelpButton({ topic, ...restProps }: HelpButtonProps) {
       <BiInfoCircle size='1.25rem' className='clr-text-primary' />
       <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
         <div className='relative' onClick={event => event.stopPropagation()}>
-          <div className='absolute right-0 text-sm top-[0.4rem]'>
+          <div className='absolute right-0 text-sm top-[0.4rem] clr-input'>
             <TextURL text='Справка...' href={`/manuals?topic=${topic}`} />
           </div>
         </div>

rsconcept/frontend/src/components/Help/HelpConstituenta.tsx

@@ -8,16 +8,15 @@ function HelpConstituenta() {
     <h1>Редактор конституент</h1>
     <p><b>Сохранить изменения</b>: Ctrl + S или клик по кнопке Сохранить</p>
     <p className='mt-1'><b>Формальное определение</b></p>
-    <p>- Ctrl + Пробел после ввода первой буквы дополняет до незанятого имени</p>
+    <p>- Ctrl + Пробел дополняет до незанятого имени</p>
     <p>- специальные конструкции вводятся с помощью кнопок снизу</p>
-    <p className='mt-1'><b>Термин и Определение</b>: Ctrl + Пробел открывает диалог редактирования отсылок<br/>Перед открытием диалога переместите текстовый курсор на заменяемое слово или ссылку</p>
+    <p className='mt-1'><b>Термин и Определение</b></p>
-    <p className='mt-1'><b>Список конституент справа</b>: обратите внимание на настройки фильтрации</p>
+    <p>- Ctrl + Пробел открывает редактирование отсылок</p>
+    <p className='mt-1'><b>Список конституент справа</b></p>
     <p>- первая настройка - атрибуты конституенты</p>
-    <p>- вторая настройка - принцип отбора конституент по графу термов</p>
+    <p>- вторая настройка - отбор по графу термов</p>
-    <p>- текущая конституента выделена цветом</p>
+    <p>- текущая конституента выделена цветом строки</p>
-    <p>- двойной клик / Alt + клик - выбор редактируемой конституенты</p>
+    <p>- при наведении на имя конституенты отображаются атрибуты</p>
-    <p>- при наведении на имя конституенты отображаются ее атрибуты</p>
-    <p>- столбец "Описание" содержит один из непустых текстовых атрибутов</p>
 
     <Divider margins='my-2' />
     

rsconcept/frontend/src/components/Help/HelpLibrary.tsx

@@ -5,22 +5,21 @@ function HelpLibrary() {
   // prettier-ignore
   return (
   <div>
-    <h1>Библиотека концептуальных схем</h1>
+    <h1>Библиотека схем</h1>
-    <p>В библиотеки собраны различные концептуальные схемы.</p>
+    <p>В библиотеки собраны концептуальные схемы - системы понятий, используемые в теории и практике концептуального проектирования систем организационного управления</p>
-    <p>Группировка и классификации схем на данный момент не проводится.</p>
+    <p>Фильтрация с помощью инструментов в верхней части страницы</p>
-    <p>На текущем этапе происходит наполнение Библиотеки концептуальными схемами.</p>
+    <p>Сортировка по клику на заголовок таблицы</p>
-    <p>Поиск осуществляется с помощью инструментов в верхней части страницы.</p>
     <div className='flex items-center gap-2'>
       <FiBell size='1rem'/>
-      <p>Аттрибут <b>отслеживаемая</b> обозначает отслеживание схемы.</p>
+      <p><b>отслеживаемая</b> обозначает отслеживание схемы</p>
-    </div>
+    p</div>
     <div className='flex items-center gap-2'>
       <BiShareAlt size='1rem'/>
-      <p>Аттрибут <b>общедоступная</b> делает схему видимой в разделе библиотека.</p>
+      <p><b>общедоступная</b> отображает схему всем пользователям</p>
     </div>
     <div className='flex items-center gap-2'>
       <BiCheckShield size='1rem'/>
-      <p>Аттрибут <b>неизменная</b> выделяет стандартные схемы.</p>
+      <p><b>неизменная</b> выделяет стандартные схемы</p>
     </div>
   </div>);
 }

rsconcept/frontend/src/components/Help/HelpMain.tsx

@@ -6,17 +6,17 @@ function HelpMain() {
   return (
   <div>
     <h1>Портал</h1>
-    <p className=''>Портал позволяет анализировать предметные области, формально записывать системы определений (концептуальные схемы) и синтезировать их с помощью математического аппарата родов структур.</p>
+    <p>Портал позволяет анализировать предметные области, формально записывать системы определений и синтезировать их с помощью математического аппарата родов структур.</p>
     <p className='mt-4 mb-1 text-center'><b>Основные разделы</b></p>
-    <li><TextURL text='Библиотека' href='/library' /> - библиотека концептуальных схем. Доступны сортировка, поиск и фильтрация</li>
+    <li><TextURL text='Библиотека' href='/library' /> - библиотека концептуальных схем</li>
     <li><TextURL text='Профиль' href='/profile' /> - данные пользователя и смена пароля</li>
     
     <p className='mt-4 mb-1 text-center'><b>Навигация</b></p>
-    <p>Навигационную панель можно скрыть/отобразить с помощью кнопки в правом верхнем углу.</p>
+    <p>Навигационную панель можно скрыть с помощью кнопки в правом верхнем углу</p>
-    <p>В меню пользователя (правый верхний угол) доступно редактирование данных пользователя и изменение цветовой темы.</p>
+    <p>В меню пользователя (правый верхний угол) доступно редактирование данных пользователя и изменение цветовой темы</p>
 
     <p className='mt-4 mb-1 text-center'><b>Поддержка</b></p>
-    <p>Портал разрабатывается <TextURL text='Центром Концепт' href={urls.concept}/> и является проектом с открытым исходным кодом, доступным на <TextURL text='Github' href={urls.git_repo}/>.</p>
+    <p>Портал разрабатывается <TextURL text='Центром Концепт' href={urls.concept}/> и является проектом с открытым исходным кодом, доступным на <TextURL text='Github' href={urls.git_repo}/></p>
     <p>Ваши пожелания по доработке, найденные ошибки и иные предложения можно направлять по email: <TextURL href={urls.mail_portal} text='portal@acconcept.ru'/></p>
   </div>);
 }

rsconcept/frontend/src/components/Help/HelpRSFormMeta.tsx

@@ -5,11 +5,11 @@ function HelpRSFormMeta() {
     <h1>Паспорт схемы</h1>
     <p><b>Сохранить изменения</b>: Ctrl + S или клик по кнопке Сохранить</p>
     <p><b>Владелец</b> - пользователь, обладающий правом редактирования</p>
-    <p>Для <b>общедоступных</b> схем владельцем может стать любой пользователь</p>
+    <p><b>Общедоступные</b> схемы доступы для всех</p>
-    <p>Для <b>неизменных</b> схем правом редактирования обладают только администраторы</p>
+    <p><b>Неизменные</b> схемы редактируют только администраторы</p>
-    <p><b>Клонировать</b> - создать копию схемы для дальнейшего редактирования</p>
+    <p><b>Клонировать</b> - создать копию схемы под своим именем</p>
-    <p><b>Отслеживание</b> - возможность видеть схему в Библиотеке и использовать фильтры</p>
+    <p><b>Отслеживание</b> - отображение схемы в персональном списке</p>
-    <p><b>Загрузить/Выгрузить схему</b> - взаимодействие с Экстеор через файлы формата TRS</p>
+    <p><b>Загрузить/Выгрузить схему</b> - взаимодействие с Экстеор</p>
   </div>);
 }
 

rsconcept/frontend/src/components/Help/HelpTermGraph.tsx

@@ -5,7 +5,7 @@ import Divider from '@/components/ui/Divider';
 function HelpTermGraph() {
   // prettier-ignore
   return (
-  <div className='flex max-w-[80rem]'>
+  <div className='flex max-w-[80rem] min-w-[45rem]'>
     <div>
       <h1>Настройка графа</h1>
       <p><b>Цвет</b> - выбор правила покраски узлов</p>
@@ -21,9 +21,9 @@ function HelpTermGraph() {
     <Divider vertical margins='mx-3' />
     
     <div>
-      <h1>Горячие клавиши</h1>
+      <h1>Клавиши</h1>
-      <p><b>Клик на конституенту</b> - выделение, включая скрытые конституенты</p>
+      <p><b>Клик на конституенту</b> - выделение</p>
-      <p><b>Двойной клик</b> - редактирование конституенты</p>
+      <p><b>Клик на выделенную</b> - редактирование</p>
       <p><b>Delete</b> - удалить выбранные</p>
       <br />
 

rsconcept/frontend/src/components/ui/Tooltip.tsx

@@ -34,7 +34,7 @@ function Tooltip({
       opacity={0.97}
       className={clsx('overflow-hidden', 'border shadow-md', layer, className)}
       classNameArrow={layer}
-      style={{ ...{ paddingTop: '2px', paddingBottom: '2px' }, ...style }}
+      style={{ ...{ paddingTop: '2px', paddingBottom: '2px', overflowX: 'auto', overflowY: 'auto' }, ...style }}
       variant={darkMode ? 'dark' : 'light'}
       place={place}
       {...restProps}

rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx

@@ -47,8 +47,8 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
     <div
       className={clsx(
         'sticky top-0', // prettier: split lines
-        'w-full max-h-[2.2rem]',
+        'w-full h-[2.2rem]',
-        'sm:pr-40 flex',
+        'sm:pr-[12rem] flex',
         'border-b',
         'text-sm',
         'clr-input'
@@ -67,10 +67,8 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
           {filtered} из {total}
         </span>
       </div>
-      <div className={clsx('flex-grow', 'flex gap-1 justify-center items-center')}>
+      <PickerStrategy value={strategy} onChange={handleChangeStrategy} />
-        <SearchBar noBorder className='min-w-[10rem]' value={query} onChange={handleChangeQuery} />
+      <SearchBar noBorder className='mx-auto min-w-[10rem]' value={query} onChange={handleChangeQuery} />
-        <PickerStrategy value={strategy} onChange={handleChangeStrategy} />
-      </div>
     </div>
   );
 }

rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx

@@ -108,7 +108,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
 
   return (
     <>
-      <div className='sticky top-[2.3rem] w-full'>
+      <div className='sticky top-[2.3rem]'>
         <div
           className={clsx(
             'z-pop', // prettier: split lines
@@ -117,7 +117,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
             'flex gap-1'
           )}
         >
-          <HelpButton topic={HelpTopic.LIBRARY} className='max-w-[35rem]' offset={5} place='right-start' />
+          <HelpButton topic={HelpTopic.LIBRARY} className='max-w-[30rem] text-sm' offset={5} place='right-start' />
         </div>
       </div>
       <DataTable

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx

@@ -122,7 +122,7 @@ function RSTable({ items, selected, setSelected, onEdit, onCreateNew }: RSTableP
     <DataTable
       dense
       noFooter
-      className={clsx('min-h-[20rem]', 'overflow-y-auto', 'text-sm', 'select-none')}
+      className={clsx('min-h-[16rem]', 'overflow-y-auto', 'text-sm', 'select-none')}
       style={{ maxHeight: tableHeight }}
       data={items ?? []}
       columns={columns}
@@ -136,7 +136,7 @@ function RSTable({ items, selected, setSelected, onEdit, onCreateNew }: RSTableP
       rowSelection={selected}
       onRowSelectionChange={setSelected}
       noDataComponent={
-        <FlexColumn className='p-3 items-center'>
+        <FlexColumn className='items-center p-3'>
           <p>Список пуст</p>
           <p className='cursor-pointer clr-text-primary hover:underline' onClick={() => onCreateNew()}>
             Создать новую конституенту

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx

@@ -78,7 +78,7 @@ function GraphToolbar({
         disabled={!isMutable || nothingSelected}
         onClick={onDelete}
       />
-      <HelpButton topic={HelpTopic.GRAPH_TERM} className='max-w-[calc(100vw-20rem)]' offset={4} />
+      <HelpButton topic={HelpTopic.GRAPH_TERM} className='max-w-[calc(100vw-4rem)]' offset={4} />
     </Overlay>
   );
 }

rsconcept/frontend/src/styling/setup.css

@@ -9,6 +9,15 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  overflow-x: hidden;
+}
+
 html {
   hanging-punctuation: first last;
   color-scheme: dark light;

rsconcept/frontend/src/utils/labels.ts

@@ -315,10 +315,10 @@ export function describeExpressionStatus(status: ExpressionStatus): string {
   switch (status) {
     case ExpressionStatus.VERIFIED:     return 'выражение корректно и вычислимо';
     case ExpressionStatus.INCORRECT:    return 'ошибка в выражении';
-    case ExpressionStatus.INCALCULABLE: return 'нельзя использовать для вычисления интерпретации';
+    case ExpressionStatus.INCALCULABLE: return 'интерпретация не вычисляется';
-    case ExpressionStatus.PROPERTY:     return 'только для проверки принадлежности';
+    case ExpressionStatus.PROPERTY:     return 'только проверка принадлежности';
     case ExpressionStatus.UNKNOWN:      return 'требует проверки выражения';
-    case ExpressionStatus.UNDEFINED:    return 'произошла ошибка при проверке выражения';
+    case ExpressionStatus.UNDEFINED:    return 'произошла ошибка при проверке';
   }
 }
 
@@ -411,10 +411,10 @@ export function labelCstClass(target: CstClass): string {
 export function describeCstClass(target: CstClass): string {
   // prettier-ignore
   switch (target) {
-    case CstClass.BASIC:        return 'неопределяемое понятие, требует конвенции';
+    case CstClass.BASIC:        return 'неопределяемое понятие';
-    case CstClass.DERIVED:      return 'выводимое понятие, задаваемое определением';
+    case CstClass.DERIVED:      return 'определяемое понятие';
-    case CstClass.STATEMENT:    return 'утверждение формальной логики';
+    case CstClass.STATEMENT:    return 'логическое утверждение';
-    case CstClass.TEMPLATE:     return 'параметризованный шаблон определения';
+    case CstClass.TEMPLATE:     return 'шаблон определения';
   }
 }