UI fixes

rsconcept/frontend/index.html

@@ -10,7 +10,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Geologica:wght@100..900&family=Fira+Code:wght@300..700&family=Noto+Sans+Math&family=Noto+Sans+Symbols+2"
+      href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Fira+Code:wght@300..700&family=Noto+Sans+Math&family=Noto+Sans+Symbols+2&family=Alegreya+Sans+SC:wght@100;300;400;500;700;800;900"
       rel="stylesheet"
     />
 

rsconcept/frontend/src/app/Navigation/Navigation.tsx

@@ -28,6 +28,7 @@ function Navigation() {
       className={clsx(
         'z-navigation', // prettier: split lines
         'sticky top-0 left-0 right-0',
+        'w-full',
         'clr-app',
         'select-none'
       )}
@@ -35,9 +36,9 @@ function Navigation() {
       <ToggleNavigationButton />
       <motion.div
         className={clsx(
-          'pl-2 pr-[0.9rem] h-[3rem]', // prettier: split lines
+          'pl-2 pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
           'flex justify-between',
-          'shadow-border'
+          'cc-shadow-border'
         )}
         initial={false}
         animate={!noNavigationAnimation ? 'open' : 'closed'}

rsconcept/frontend/src/components/ui/DataTable/TableHeader.tsx

@@ -20,7 +20,7 @@ function TableHeader<TData>({
 }: TableHeaderProps<TData>) {
   return (
     <thead
-      className='clr-app shadow-border'
+      className='clr-app cc-shadow-border'
       style={{
         top: headPosition,
         position: 'sticky'

rsconcept/frontend/src/pages/ManualsPage/items/HelpCstEditor.tsx

@@ -1,4 +1,6 @@
+import LinkTopic from '@/components/ui/LinkTopic';
 import { useConceptOptions } from '@/context/OptionsContext';
+import { HelpTopic } from '@/models/miscellaneous';
 
 import {
   IconControls,
@@ -12,32 +14,59 @@ import {
 
 function HelpCstEditor() {
   const { colors } = useConceptOptions();
-  // prettier-ignore
   return (
-  <div className='dense'>
+    <div className='dense'>
-    <h1>Редактор конституенты</h1>
+      <h1>Редактор конституенты</h1>
-    <li><IconSave className='inline-icon'/> сохранить изменения: Ctrl + S</li>
+      <li>
-    <li><IconEdit className='inline-icon'/> кнопка переименования справа от Имени</li>
+        <IconSave className='inline-icon' /> сохранить изменения: Ctrl + S
+      </li>
+      <li>
+        <IconEdit className='inline-icon' /> кнопка переименования справа от{' '}
+        <LinkTopic text='Имени' topic={HelpTopic.CC_CONSTITUENTA} />
+      </li>
 
-    <h2>Термин и Текстовое определение</h2>
+      <h2>Термин и Текстовое определение</h2>
-    <li><IconEdit className='inline-icon'/> кнопка редактирования словоформ справа от Термина</li>
+      <li>
-    <li>Ctrl + Пробел открывает редактирование отсылок</li>
+        <IconEdit className='inline-icon' /> кнопка редактирования словоформ справа от{' '}
+        <LinkTopic text='Термина' topic={HelpTopic.CC_CONSTITUENTA} />
+      </li>
+      <li>Ctrl + Пробел открывает редактирование отсылок</li>
 
-    <h2>Определение понятия</h2>
+      <h2>Определение понятия</h2>
-    <li><IconStatusOK className='inline-icon'/> индикатор статуса определения сверху</li>
+      <li>
-    <li><IconText className='inline-icon'/> переключение шрифта</li>
+        <IconStatusOK className='inline-icon' /> индикатор статуса определения сверху
-    <li><IconControls className='inline-icon'/> специальная клавиатура и горячие клавиши</li>
+      </li>
-    <li><IconList className='inline-icon'/> отображение списка конституент</li>
+      <li>
-    <li><IconTree className='inline-icon'/> отображение дерева разбора</li>
+        <IconText className='inline-icon' /> переключение шрифта
-    <li>Ctrl + Пробел дополняет до незанятого имени</li>
+      </li>
+      <li>
+        <IconControls className='inline-icon' /> специальная клавиатура и горячие клавиши
+      </li>
+      <li>
+        <IconList className='inline-icon' /> отображение списка конституент
+      </li>
+      <li>
+        <IconTree className='inline-icon' /> отображение{' '}
+        <LinkTopic text='дерева разбора' topic={HelpTopic.UI_FORMULA_TREE} />
+      </li>
+      <li>Ctrl + Пробел дополняет до незанятого имени</li>
 
-    <h2>Список конституент</h2>
+      <h2>Список конституент</h2>
-    <li>фильтрация в верхней части</li>
+      <li>фильтрация в верхней части</li>
-    <li>при наведении на имя конституенты отображаются атрибуты</li>
+      <li>при наведении на имя конституенты отображаются атрибуты</li>
-    <li><span style={{backgroundColor: colors.bgSelected}}>цветом фона</span> выделена текущая конституента</li>
+      <li>
-    <li><span style={{backgroundColor: colors.bgGreen50}}>цветом фона</span> выделена основа текущей</li>
+        <span style={{ backgroundColor: colors.bgSelected }}>цветом фона</span> выделена текущая конституента
-    <li><span style={{backgroundColor: colors.bgOrange50}}>цветом фона</span> выделены порожденные текущей</li>
+      </li>
-  </div>);
+      <li>
+        <span style={{ backgroundColor: colors.bgGreen50 }}>цветом фона</span> выделена{' '}
+        <LinkTopic text='основа' topic={HelpTopic.CC_RELATIONS} /> текущей
+      </li>
+      <li>
+        <span style={{ backgroundColor: colors.bgOrange50 }}>цветом фона</span> выделены{' '}
+        <LinkTopic text='порожденные' topic={HelpTopic.CC_RELATIONS} /> текущей
+      </li>
+    </div>
+  );
 }
 
 export default HelpCstEditor;

rsconcept/frontend/src/styling/constants.css

@@ -4,7 +4,7 @@
 
 /* prettier-ignore */
 :root {
-  --font-ui:  'Geologica', 'Fira Code', 'Segoe UI Symbol', sans-serif;
+  --font-ui:  'Alegreya Sans SC', 'Rubik', 'Segoe UI Symbol', sans-serif;
   --font-main: 'Rubik', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
   --font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Segoe UI Symbol', sans-serif;
   --font-math2: 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Segoe UI Symbol', sans-serif;

rsconcept/frontend/src/styling/setup.css

@@ -139,8 +139,4 @@ div:not(.dense) > p {
   .border {
     @apply rounded;
   }
-
-  .shadow-border {
-    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
-  }
 }

rsconcept/frontend/src/styling/styles.css

@@ -14,12 +14,6 @@
   .font-controls {
     font-family: var(--font-ui);
     font-weight: 600;
-    font-variant: small-caps;
-  }
-  @supports (-moz-appearance: none) {
-    .font-controls {
-      font-size: 0.85rem;
-    }
   }
   .font-math {
     font-family: var(--font-math);
@@ -245,4 +239,8 @@
   .cc-blur {
     backdrop-filter: blur(3px);
   }
+
+  .cc-shadow-border {
+    @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
+  }
 }