From fcd8193bcda193a51dd1e77a75ae55cae5d7de71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D0=B4=D1=80=D0=B5=D0=B9=20=D0=91=D0=B0=D0=B1?= =?UTF-8?q?=D1=83=D1=88=D0=BA=D0=B8=D0=BD?= Date: Tue, 11 Mar 2025 15:55:17 +0100 Subject: [PATCH] fixed sessions layout --- frontend/app/components/Login/Login.tsx | 2 +- .../SessionItem/ErrorBars/ErrorBars.tsx | 2 +- .../shared/SessionItem/SessionItem.tsx | 64 ++++++++++--------- .../SessionHeader/SessionHeader.tsx | 17 +++-- .../components/SessionSort/SessionSort.tsx | 14 ++-- .../components/SessionTags/SessionTags.tsx | 6 +- frontend/app/layout/Layout.tsx | 2 +- frontend/app/layout/TopHeader.tsx | 2 +- frontend/app/locales/es.json | 2 +- frontend/app/locales/fr.json | 2 +- frontend/app/locales/ru.json | 4 +- frontend/tailwind.config.js | 36 +++++------ 12 files changed, 83 insertions(+), 70 deletions(-) diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx index 02ca638a2..88801611a 100644 --- a/frontend/app/components/Login/Login.tsx +++ b/frontend/app/components/Login/Login.tsx @@ -208,7 +208,7 @@ function Login({ location }: LoginProps) { {t('Login')} -
+
{t('Having trouble logging in?')} {' '} diff --git a/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx b/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx index aeb0fc69c..b85893e0c 100644 --- a/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx +++ b/frontend/app/components/shared/SessionItem/ErrorBars/ErrorBars.tsx @@ -52,7 +52,7 @@ export default function ErrorBars(props: Props) { {/*
*/}
-
{t(state)}
+
{t(state)}
); } diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 11151161a..fcfd2ee7f 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -242,7 +242,11 @@ function SessionItem(props: RouteComponentProps & Props) { return (
@@ -274,8 +278,8 @@ function SessionItem(props: RouteComponentProps & Props) { 'color-teal cursor-pointer': !disableUser && hasUserId && !isDisabled, [stl.userName]: - !disableUser && hasUserId && !isDisabled, - 'color-gray-medium': disableUser || !hasUserId + !disableUser && hasUserId && !isDisabled, + 'color-gray-medium': disableUser || !hasUserId, })} onClick={handleUserClick} > @@ -293,8 +297,8 @@ function SessionItem(props: RouteComponentProps & Props) {
)}
)}
- {live ? ( - - ) : ( - formattedDuration - )} + {live ? : formattedDuration}
- {isSessions && ( + {isSessions && issueTypes.length > 0 && (
)} -
+ {/*
-
+
*/}
)} - {isSessions && ( -
- {isLastPlayed && ( - - )} + {isSessions && isLastPlayed && ( +
+ {/* {isLastPlayed && ( */} + + {/* )} */}
)} {isAdd ? ( diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx index 3a6e55381..465ae9041 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionHeader/SessionHeader.tsx @@ -1,14 +1,17 @@ import React from 'react'; import Period from 'Types/app/period'; import SelectDateRange from 'Shared/SelectDateRange'; -import { Space } from 'antd'; +import { Grid, Space } from 'antd'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; import SessionSort from '../SessionSort'; import SessionTags from '../SessionTags'; +const { useBreakpoint } = Grid; + function SessionHeader() { const { searchStore } = useStore(); + const screens = useBreakpoint(); const { startDate, endDate, rangeValue } = searchStore.instance; const period = Period({ @@ -25,10 +28,14 @@ function SessionHeader() { return (
-
+
-
- +
- +
); diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx index fe5e9c208..dfd61350a 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionSort/SessionSort.tsx @@ -63,12 +63,14 @@ function SessionSort() { const defaultOption = `${sort}-${order}`; return ( - +
+ +
); } diff --git a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx index 35a93422f..09427cac3 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/SessionTags/SessionTags.tsx @@ -1,11 +1,13 @@ import { issues_types, types } from 'Types/session/issue'; -import { Segmented } from 'antd'; +import { Grid, Segmented } from 'antd'; import { Angry, CircleAlert, Skull, WifiOff } from 'lucide-react'; import { observer } from 'mobx-react-lite'; import React from 'react'; import { useStore } from 'App/mstore'; import { useTranslation } from 'react-i18next'; +const { useBreakpoint } = Grid; + const tagIcons = { [types.ALL]: undefined, [types.JS_EXCEPTION]: , @@ -17,6 +19,7 @@ const tagIcons = { function SessionTags() { const { t } = useTranslation(); + const screens = useBreakpoint(); const { projectsStore, sessionStore, searchStore } = useStore(); const { total } = sessionStore; const platform = projectsStore.active?.platform || ''; @@ -26,6 +29,7 @@ function SessionTags() { (activeTab.length === 0 || activeTab[0] === 'all') ? null : (
diff --git a/frontend/app/layout/Layout.tsx b/frontend/app/layout/Layout.tsx index acbc2d035..b6058b5a4 100644 --- a/frontend/app/layout/Layout.tsx +++ b/frontend/app/layout/Layout.tsx @@ -23,7 +23,7 @@ function Layout(props: Props) { useEffect(() => { const handleResize = () => { - const isMobile = window.innerWidth < 1200; + const isMobile = window.innerWidth < 1280; if (isMobile) { setCollapsed(true); } else { diff --git a/frontend/app/layout/TopHeader.tsx b/frontend/app/layout/TopHeader.tsx index 2872fe8d2..07a41bd28 100644 --- a/frontend/app/layout/TopHeader.tsx +++ b/frontend/app/layout/TopHeader.tsx @@ -48,7 +48,7 @@ function TopHeader() { settingsStore.updateMenuCollapsed(!settingsStore.menuCollapsed); }} style={{ paddingTop: '4px' }} - className="cursor-pointer" + className="cursor-pointer xl:block hidden" > { }) module.exports = { - content: [ - './app/**/*.tsx', - './app/**/*.js' - ], + mode: 'jit', + content: ['./app/**/*.tsx', './app/**/*.js'], theme: { colors: { ...defaultColors, - ...colors + ...colors, }, extend: { keyframes: { 'fade-in': { '0%': { - opacity: '0' + opacity: '0', // transform: 'translateY(-10px)' }, '100%': { - opacity: '1' + opacity: '1', // transform: 'translateY(0)' - } + }, }, 'bg-spin': { '0%': { @@ -37,31 +35,31 @@ module.exports = { }, '100%': { backgroundPosition: '0 50%', - } - } + }, + }, }, animation: { 'fade-in': 'fade-in 0.2s ease-out', - 'bg-spin': 'bg-spin 1s ease infinite' + 'bg-spin': 'bg-spin 1s ease infinite', }, colors: { - 'disabled-text': 'rgba(0,0,0, 0.38)' + 'disabled-text': 'rgba(0,0,0, 0.38)', }, boxShadow: { 'border-blue': `0 0 0 1px ${colors['active-blue-border']}`, 'border-main': `0 0 0 1px ${colors['main']}`, - 'border-gray': '0 0 0 1px #999' + 'border-gray': '0 0 0 1px #999', }, button: { - 'background-color': 'red' - } - } + 'background-color': 'red', + }, + }, }, variants: { - visibility: ['responsive', 'hover', 'focus', 'group-hover'] + visibility: ['responsive', 'hover', 'focus', 'group-hover'], }, plugins: [], corePlugins: { - preflight: false - } + preflight: false, + }, };