fixed sessions layout

2025-03-11 15:55:17 +01:00 · 2025-03-11 15:55:17 +01:00 · fcd8193bcd
commit fcd8193bcd
parent 17a5089c24
12 changed files with 83 additions and 70 deletions
--- a/frontend/app/components/Login/Login.tsx
+++ b/frontend/app/components/Login/Login.tsx
@ -208,7 +208,7 @@ function Login({ location }: LoginProps) {
                  {t('Login')}
                </Button>

-                <div className="my-8 text-center">
+                <div className="my-8 flex justify-center items-center flex-wrap">
                  <span className="color-gray-medium">
                    {t('Having trouble logging in?')}
                  </span>{' '}
--- 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) {
          {/* <div className={cn("rounded-tr rounded-br", bgColor, stl.bar)}></div> */}
        </div>
      </div>
-      <div className="mt-1 color-gray-medium text-sm">{t(state)}</div>
+      <div className="mt-1 color-gray-medium text-sm truncate">{t(state)}</div>
    </div>
  );
 }
--- 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 (
    <Tooltip
-      title={!isMultiviewDisabled ? '' : t(`Session already added into the multiview`)}
+      title={
+        !isMultiviewDisabled
+          ? ''
+          : t(`Session already added into the multiview`)
+      }
    >
      <div
        className={cn(stl.sessionItem, 'flex flex-col p-4')}
@ -255,7 +259,7 @@ function SessionItem(props: RouteComponentProps & Props) {
            {!compact && (
              <div
                className="flex flex-col shrink-0 pr-2 gap-2"
-                style={{ width: '40%' }}
+                style={{ width: '250px' }}
              >
                <div className="flex items-center pr-2 shrink-0">
                  <div>
@ -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) {
              </div>
            )}
            <div
-              style={{ width: compact ? '40%' : '20%' }}
-              className="px-2 flex flex-col justify-between"
+              style={{ width: compact ? '40%' : '20%', minWidth: '170px' }}
+              className="px-2 sm:flex flex-col justify-between hidden"
            >
              <div>
                <Tooltip
@ -324,17 +328,13 @@ function SessionItem(props: RouteComponentProps & Props) {
                  </>
                )}
                <div>
-                  {live ? (
-                    <Counter startTime={startedAt} />
-                  ) : (
-                    formattedDuration
-                  )}
+                  {live ? <Counter startTime={startedAt} /> : formattedDuration}
                </div>
              </div>
            </div>
            <div
-              style={{ width: '30%' }}
-              className="px-2 flex flex-col justify-between"
+              style={{ width: '30%', maxWidth: '300px' }}
+              className="px-2 flex max-[860px]:hidden flex-col justify-between"
            >
              <div style={{ height: '21px' }}>
                <CountryFlag
@ -378,21 +378,23 @@ function SessionItem(props: RouteComponentProps & Props) {
                </span>
              </div>
            </div>
-            {isSessions && (
+            {isSessions && issueTypes.length > 0 && (
              <div
-                style={{ width: '10%' }}
-                className="self-center px-2 flex items-center"
+                style={{ width: '15%' }}
+                className="self-center px-2 max-[1200px]:hidden flex items-center"
              >
                <ErrorBars count={issueTypes.length} />
              </div>
            )}
-          </div>
+            {/* </div>

-          <div className="flex items-center m-auto">
+          <div className="flex items-center m-auto"> */}
            <div
+              style={{ width: 'calc(35% - 250px)' }}
              className={cn(
                stl.playLink,
-                isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+                isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                'justify-end flex flex-1',
              )}
              id="play-button"
              data-viewed={viewed}
@ -409,18 +411,18 @@ function SessionItem(props: RouteComponentProps & Props) {
                  </Label>
                </div>
              )}
-              {isSessions && (
-                <div className="mr-4 flex-shrink-0 w-24">
-                  {isLastPlayed && (
-                    <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
-                      <span
-                        className="color-gray-medium text-xs"
-                        style={{ whiteSpace: 'nowrap' }}
-                      >
-                        {t('LAST PLAYED')}
-                      </span>
-                    </Label>
-                  )}
+              {isSessions && isLastPlayed && (
+                <div className="mr-4 flex-shrink-0 hidden lg:flex">
+                  {/* {isLastPlayed && ( */}
+                  <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
+                    <span
+                      className="color-gray-medium text-xs"
+                      style={{ whiteSpace: 'nowrap' }}
+                    >
+                      {t('LAST PLAYED')}
+                    </span>
+                  </Label>
+                  {/* )} */}
                </div>
              )}
              {isAdd ? (
--- 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 (
    <div className="flex items-center px-4 py-3 justify-between w-full">
-      <div className="flex items-center w-full justify-end">
+      <div
+        className={`flex w-full flex-wrap gap-2 ${screens.md ? 'justify-between' : 'justify-start'}`}
+      >
        <SessionTags />
-        <div className="mr-auto" />
-        <Space>
+        <div
+          style={{ flexDirection: screens.md ? 'row' : 'column' }}
+          className={'flex items-start'}
+        >
          <SelectDateRange
            isAnt
            period={period}
@ -36,7 +43,7 @@ function SessionHeader() {
            right
          />
          <SessionSort />
-        </Space>
+        </div>
      </div>
    </div>
  );
--- 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 (
-    <SortDropdown
-      defaultOption={defaultOption}
-      onSort={onSort}
-      sortOptions={sortOptions(t)}
-      current={sortOptionsMap(t)[defaultOption]}
-    />
+    <div className="px-[7px]">
+      <SortDropdown
+        defaultOption={defaultOption}
+        onSort={onSort}
+        sortOptions={sortOptions(t)}
+        current={sortOptionsMap(t)[defaultOption]}
+      />
+    </div>
  );
 }

--- 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]: <CircleAlert size={14} />,
@ -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 : (
    <div className="flex items-center">
      <Segmented
+        vertical={!screens.md}
        options={issues_types
          .filter(
            (tag) =>
--- 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 {
--- 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"
        >
          <Tooltip
            title={
--- a/frontend/app/locales/es.json
+++ b/frontend/app/locales/es.json
@ -1307,7 +1307,7 @@
  "User's Time": "Hora del usuario",
  "Event": "Evento",
  "CALL IN PROGRESS": "LLAMADA EN CURSO",
-  "LAST PLAYED": "ÚLTIMA REPRODUCCIÓN",
+  "LAST PLAYED": "VISTO",
  "Sessions Settings": "Configuración de Sesiones",
  "The percentage of session you want to capture": "El porcentaje de sesiones que deseas capturar",
  "Sessions exceeding this specified limit will not be captured or stored.": "Las sesiones que superen este límite especificado no se capturarán ni almacenarán.",
--- a/frontend/app/locales/fr.json
+++ b/frontend/app/locales/fr.json
@ -1307,7 +1307,7 @@
  "User's Time": "Heure de l'utilisateur",
  "Event": "Événement",
  "CALL IN PROGRESS": "APPEL EN COURS",
-  "LAST PLAYED": "DERNIÈRE LECTURE",
+  "LAST PLAYED": "VISIONNÉ",
  "Sessions Settings": "Paramètres des sessions",
  "The percentage of session you want to capture": "Le pourcentage de sessions que vous souhaitez capturer",
  "Sessions exceeding this specified limit will not be captured or stored.": "Les sessions dépassant cette limite ne seront ni capturées ni stockées.",
--- a/frontend/app/locales/ru.json
+++ b/frontend/app/locales/ru.json
@ -1307,8 +1307,8 @@
  "Local Time:": "Местное время:",
  "User's Time": "Время пользователя",
  "Event": "Событие",
-  "CALL IN PROGRESS": "ЗВОНОК В ПРОЦЕССЕ",
-  "LAST PLAYED": "ПОСЛЕДНЕЕ ВОСПРОИЗВЕДЕНИЕ",
+  "CALL IN PROGRESS": "ИДЕТ ЗВОНОК",
+  "LAST PLAYED": "ПРОСМОТРЕНО",
  "Sessions Settings": "Настройки сессий",
  "The percentage of session you want to capture": "Процент сессий, которые вы хотите захватывать",
  "Condition Set": "Набор условий",
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -7,26 +7,24 @@ deprecatedDefaults.forEach(color => {
 })

 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,
+  },
 };