UI improvements

rsconcept/frontend/README.md

@@ -9,9 +9,9 @@ Styling conventions
   <pre>
   - layer: z-position
   - outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
-  - rectangle: mt-3 w-full min-w-10 h-fit flex-grow
+  - rectangle: mt-3 min-w-fit min-w-10 flex-grow
   - inner layout: px-3 py-2 flex flex-col gap-3 justify-start items-center
-  - overflow behavior: overflow-auto
+  - overflow behavior: overflow-scroll
   - border: borer-2 outline-none shadow-md
   - colors: clr-controls
   - text: text-start text-sm font-semibold whitespace-nowrap

rsconcept/frontend/src/components/Common/ConceptTab.tsx

@@ -11,7 +11,7 @@ function ConceptTab({ label, className, ...otherProps }: ConceptTabProps) {
   return (
   <Tab
     className={clsx(
-      'h-full min-w-[6rem]',
+      'min-w-[6rem]',
       'px-2 py-1 flex justify-center',
       'clr-tab',
       'text-sm whitespace-nowrap small-caps font-semibold',

rsconcept/frontend/src/components/Common/Divider.tsx

@@ -10,8 +10,8 @@ function Divider({ vertical, margins = 'mx-2' }: DividerProps) {
   <div className={clsx(
     margins, 
     {
-      'border-x h-full': vertical,
+      'border-x': vertical,
-      'border-y w-full': !vertical
+      'border-y': !vertical
     }
   )}/>);
 }

rsconcept/frontend/src/components/Common/PDFViewer.tsx

@@ -36,7 +36,7 @@ function PDFViewer({ file }: PDFViewerProps) {
   <Document
     file={file}
     onLoadSuccess={onDocumentLoadSuccess}
-    className='px-3 w-fit'
+    className='px-3'
     loading='Загрузка PDF файла...'
     error='Не удалось загрузить файл.'
   >

rsconcept/frontend/src/components/DataTable/PaginationTools.tsx

@@ -26,20 +26,18 @@ function PaginationTools<TData>({ table, paginationOptions, onChangePaginationOp
   return (
   <div className={clsx(
     'flex justify-end items-center',
-    'w-full my-2',
+    'my-2',
     'text-sm', 
     'clr-text-controls',
     'select-none'
   )}>
-    <div className='flex items-center gap-1 mr-3'>
+    <span className='mr-3'>
-      <div className=''>
+      {`${table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
-        {table.getState().pagination.pageIndex * table.getState().pagination.pageSize + 1}
       -
-        {Math.min(table.getFilteredRowModel().rows.length, (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize)}
+      ${Math.min(table.getFilteredRowModel().rows.length, (table.getState().pagination.pageIndex + 1) * table.getState().pagination.pageSize)}
-      </div>
+      из
-      <span>из</span>
+      ${table.getFilteredRowModel().rows.length}`}
-      <div className=''>{table.getFilteredRowModel().rows.length}</div>
+    </span>
-    </div>
     <div className='flex'>
       <button type='button'
         className='clr-hover clr-text-controls'

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

@@ -15,13 +15,11 @@ extends CProps.Styling {
 
 function HelpButton({ topic, ...restProps }: HelpButtonProps) {
   return (
-  <>
   <div
     id={`help-${topic}`}
     className='p-1'
   >
     <BiInfoCircle size='1.25rem' className='clr-text-primary' />
-    </div>
     <ConceptTooltip clickable
       anchorSelect={`#help-${topic}`}
       layer='z-modal-tooltip'
@@ -34,7 +32,7 @@ function HelpButton({ topic, ...restProps }: HelpButtonProps) {
       </div>
       <InfoTopic topic={topic} />
     </ConceptTooltip>
-  </>);
+  </div>);
 }
 
 export default HelpButton;

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

@@ -3,7 +3,7 @@ import { FiBell } from 'react-icons/fi';
 
 function HelpLibrary() {
   return (
-  <div className='w-full'>
+  <div>
     <h1>Библиотека концептуальных схем</h1>
     <p>В библиотеки собраны различные концептуальные схемы.</p>
     <p>Группировка и классификации схем на данный момент не проводится.</p>

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

@@ -3,7 +3,7 @@ import { urls } from '@/utils/constants';
 
 function HelpMain() {
   return (
-  <div className='flex flex-col w-full text-left'>
+  <div>
     <h1>Портал</h1>
     <p className=''>Портал позволяет анализировать предметные области, формально записывать системы определений (концептуальные схемы) и синтезировать их с помощью математического аппарата родов структур.</p>
     <p className='mt-4 mb-1 text-center'><b>Основные разделы</b></p>

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

@@ -17,7 +17,7 @@ function HelpRSLang() {
   }, [windowSize]);
 
   return (
-  <div className='flex flex-col w-full gap-4'>
+  <div className='flex flex-col gap-4'>
     <div>
       <h1>Родоструктурная экспликация концептуальных схем</h1>
       <p>Формальная запись (<i>экспликация</i>) концептуальных схем осуществляется с помощью языка родов структур.</p>
@@ -29,7 +29,7 @@ function HelpRSLang() {
         <li>3. <a className='underline' href={urls.full_course}>Видео: лекции для 4 курса (второй семестр 2022-23 год)</a></li>
       </ul>
     </div>
-    <div className='justify-center hidden w-full md:flex fleex-col'>
+    <div className='justify-center hidden w-full md:flex'>
     <EmbedYoutube
       videoID={youtube.intro}
       pxHeight={videoHeight}

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

@@ -1,6 +1,6 @@
 function HelpRSTemplates() {
   return (
-  <div className='flex flex-col w-full gap-2 pb-2'>
+  <div className='flex flex-col gap-2 pb-2'>
     <h1>Банк выражений</h1>
     <p>Портал предоставляет быстрый доступ к часто используемым выражениям с помощью функции создания конституенты из шаблона.</p>
     <p>Источником шаблонов является <b>Банк выражений</b>, содержащий параметризованные понятия и утверждения, сгруппированные по разделам.</p>

rsconcept/frontend/src/components/Navigation/UserMenu.tsx

@@ -16,7 +16,6 @@ function UserMenu() {
   const navigateLogin = () => router.push('/login');
   return (
   <div ref={menu.ref} className='h-full'>
-    <div className='flex items-center justify-end h-full w-fit'>
     {!user ?
     <NavigationButton
       description='Перейти на страницу логина'
@@ -29,7 +28,6 @@ function UserMenu() {
       icon={<FaCircleUser size='1.5rem' />}
       onClick={menu.toggle}
     /> : null}
-    </div>
     {(user && menu.isActive) ?
     <UserDropdown
       hideDropdown={() => menu.hide()}

rsconcept/frontend/src/components/RefsInput/RefsInput.tsx

@@ -178,7 +178,6 @@ function RefsInput({
     onSave={handleInputReference}
   /> : null}
   <div className={clsx(
-    'w-full',
     'flex flex-col gap-2',
     cursor
   )}>

rsconcept/frontend/src/components/Shared/ConstituentaBadge.tsx

@@ -16,7 +16,6 @@ interface ConstituentaBadgeProps {
 
 function ConstituentaBadge({ value, prefixID, shortTooltip, theme }: ConstituentaBadgeProps) {
   return (
-  <div className='w-fit'>
   <div
     id={`${prefixID}${value.alias}`}
     className={clsx(
@@ -32,7 +31,6 @@ function ConstituentaBadge({ value, prefixID, shortTooltip, theme }: Constituent
     }}
   >
     {value.alias}
-    </div>
     {!shortTooltip ?
     <ConstituentaTooltip
       anchor={`#${prefixID}${value.alias}`}

rsconcept/frontend/src/components/Shared/InfoCstStatus.tsx

@@ -14,7 +14,7 @@ function InfoCstStatus({ title }: InfoCstStatusProps) {
   const { colors } = useConceptTheme();
 
   return (
-  <div className='flex flex-col gap-1 mb-2 h-fit'>
+  <div className='flex flex-col gap-1 mb-2'>
     {title ? <h1>{title}</h1> : null}
     {Object.values(ExpressionStatus)
       .filter(status => status !== ExpressionStatus.UNDEFINED)

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx

@@ -97,7 +97,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
       minSize: 40,
       maxSize: 40,
       cell: props => 
-        <div className='w-full text-center'>
+        <div className='text-center'>
           {props.getValue()}
         </div>
     }),
@@ -162,7 +162,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
       conditionalRowStyles={conditionalRowStyles}
       noDataComponent={
         <p className={clsx(
-          'min-h-[3.6rem] w-full',
+          'min-h-[3.6rem]',
           'p-2',
           'text-center'
         )}>

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

@@ -21,7 +21,7 @@ function ManualsPage() {
 
   return (
   <div
-    className='flex items-start justify-start w-full gap-2'
+    className='flex items-start justify-start w-full max-w-[90rem] gap-2'
     style={{minHeight: mainHeight}}
   >
     <TopicsList 

rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx

@@ -19,7 +19,7 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
     'small-caps',
     'select-none'
   )}>
-    <h1 className='mt-2 mb-1'>Справка</h1>
+    <h1 className='my-1'>Справка</h1>
     {Object.values(HelpTopic).map(
     (topic, index) => 
         <div key={`${prefixes.topic_list}${index}`}

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

@@ -38,7 +38,7 @@ function RSListToolbar({
   const nothingSelected = useMemo(() => selectedCount === 0, [selectedCount]);
   
   return (
-  <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
+  <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex items-start'>
     <MiniButton
       title='Переместить вверх [Alt + вверх]'
       icon={<BiUpvote size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-primary': ''}/>}
@@ -63,8 +63,7 @@ function RSListToolbar({
       disabled={!isMutable}
       onClick={() => onCreate()}
     />
-    <div ref={insertMenu.ref} className='flex justify-center'>
+    <div ref={insertMenu.ref}>
-      <div>
       <MiniButton
         title='Добавить пустую конституенту'
         icon={<BiDownArrowCircle size='1.25rem' className={isMutable ? 'clr-text-success': ''} />}
@@ -84,7 +83,6 @@ function RSListToolbar({
       )}
       </Dropdown> : null}
     </div>
-    </div>
     <MiniButton
       title='Удалить выбранные [Delete]'
       icon={<BiTrash size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-warning' : ''} />}

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

@@ -54,7 +54,7 @@ function ViewHidden({
       return (
       <div key={`wrap-${id}`}>
         <div key={id} id={id}
-          className='w-fit min-w-[3rem] rounded-md text-center cursor-pointer select-none'
+          className='min-w-[3rem] rounded-md text-center cursor-pointer select-none'
           style={{
             backgroundColor: colorbgGraphNode(cst, adjustedColoring, colors),
             ...dismissedStyle(cstID)

rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx

@@ -45,7 +45,7 @@ function UserTabs() {
           />
         </Overlay>
         <h1 className='mb-4'>Учетные данные пользователя</h1>
-        <div className='flex py-2 max-w-fit'>
+        <div className='flex py-2'>
           <EditorProfile />
           <EditorPassword />
         </div>