+
diff --git a/rsconcept/frontend/src/app/Navigation/Logo.tsx b/rsconcept/frontend/src/app/Navigation/Logo.tsx
index 96aec01d..b5491fc9 100644
--- a/rsconcept/frontend/src/app/Navigation/Logo.tsx
+++ b/rsconcept/frontend/src/app/Navigation/Logo.tsx
@@ -1,12 +1,19 @@
+import clsx from 'clsx';
+
import { useConceptTheme } from '@/context/ThemeContext';
+import useWindowSize from '@/hooks/useWindowSize';
function Logo() {
const { darkMode } = useConceptTheme();
+ const size = useWindowSize();
+
return (
);
}
diff --git a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
index 461266c6..ff456885 100644
--- a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
@@ -29,7 +29,7 @@ function NavigationButton({ icon, title, onClick, text }: NavigationButtonProps)
)}
>
{icon ? {icon} : null}
- {text ? {text} : null}
+ {text ? {text} : null}
);
}
diff --git a/rsconcept/frontend/src/hooks/useWindowSize.ts b/rsconcept/frontend/src/hooks/useWindowSize.ts
index 8bd9214a..9b3232c6 100644
--- a/rsconcept/frontend/src/hooks/useWindowSize.ts
+++ b/rsconcept/frontend/src/hooks/useWindowSize.ts
@@ -2,13 +2,16 @@
import { useEffect, useState } from 'react';
+import { SMALL_SCREEN_WIDTH } from '@/utils/constants';
+
function useWindowSize() {
const isClient = typeof window === 'object';
function getSize() {
return {
width: isClient ? window.innerWidth : undefined,
- height: isClient ? window.innerHeight : undefined
+ height: isClient ? window.innerHeight : undefined,
+ isSmall: isClient && window.innerWidth < SMALL_SCREEN_WIDTH
};
}
diff --git a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
index 7a3238d2..99fcea32 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx
@@ -47,9 +47,10 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
diff --git a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
index ae091989..84462fd9 100644
--- a/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
+++ b/rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx
@@ -1,10 +1,10 @@
'use client';
import clsx from 'clsx';
-import { useMemo } from 'react';
+import { useLayoutEffect, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
-import DataTable, { createColumnHelper } from '@/components/DataTable';
+import DataTable, { createColumnHelper, VisibilityState } from '@/components/DataTable';
import HelpButton from '@/components/Help/HelpButton';
import FlexColumn from '@/components/ui/FlexColumn';
import TextURL from '@/components/ui/TextURL';
@@ -12,6 +12,7 @@ import { useAuth } from '@/context/AuthContext';
import { useConceptNavigation } from '@/context/NavigationContext';
import { useUsers } from '@/context/UsersContext';
import useLocalStorage from '@/hooks/useLocalStorage';
+import useWindowSize from '@/hooks/useWindowSize';
import { ILibraryItem } from '@/models/library';
import { HelpTopic } from '@/models/miscellaneous';
@@ -33,6 +34,16 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
const handleOpenItem = (item: ILibraryItem) => router.push(`/rsforms/${item.id}`);
+ const windowSize = useWindowSize();
+
+ const [columnVisibility, setColumnVisibility] = useState({});
+
+ useLayoutEffect(() => {
+ setColumnVisibility({
+ owner: !windowSize.isSmall
+ });
+ }, [windowSize]);
+
const columns = useMemo(
() => [
columnHelper.display({
@@ -46,43 +57,53 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
columnHelper.accessor('alias', {
id: 'alias',
header: 'Шифр',
- size: 200,
- minSize: 200,
- maxSize: 200,
+ size: 150,
+ minSize: 80,
+ maxSize: 150,
enableSorting: true,
sortingFn: 'text'
}),
columnHelper.accessor('title', {
id: 'title',
header: 'Название',
- size: 2000,
- minSize: 400,
- maxSize: 2000,
+ size: 1200,
+ minSize: 200,
+ maxSize: 1200,
enableSorting: true,
sortingFn: 'text'
}),
columnHelper.accessor(item => item.owner ?? 0, {
id: 'owner',
header: 'Владелец',
- size: 600,
- minSize: 200,
- maxSize: 600,
+ size: 400,
+ minSize: 100,
+ maxSize: 400,
cell: props => getUserLabel(props.cell.getValue()),
enableSorting: true,
sortingFn: 'text'
}),
columnHelper.accessor('time_update', {
id: 'time_update',
- header: 'Обновлена',
+ header: windowSize.isSmall ? 'Дата' : 'Обновлена',
cell: props => (
-
{new Date(props.cell.getValue()).toLocaleString(intl.locale)}
+
+ {new Date(props.cell.getValue()).toLocaleString(intl.locale, {
+ year: '2-digit',
+ month: '2-digit',
+ day: '2-digit',
+ ...(!windowSize.isSmall && {
+ hour: '2-digit',
+ minute: '2-digit'
+ })
+ })}
+
),
enableSorting: true,
sortingFn: 'datetime',
sortDescFirst: true
})
],
- [intl, getUserLabel, user]
+ [intl, getUserLabel, user, windowSize]
);
return (
@@ -102,7 +123,8 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
Список схем пуст
@@ -112,6 +134,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) { } + columnVisibility={columnVisibility} onRowClicked={handleOpenItem} enableSorting initialSorting={{ diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx index 207b8f21..f76b39b3 100644 --- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx +++ b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx @@ -12,7 +12,14 @@ interface TopicsListProps { function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) { return (
{Object.values(HelpTopic).map((topic, index) => (
-
+