feat: a bit more responsive design

tolgee · Sep 16, 2024 · 57df20b · 57df20b
1 parent be8dbcd
commit 57df20b
Show file tree

Hide file tree

Showing 12 changed files with 381 additions and 139 deletions.
diff --git a/webapp/src/component/layout/BaseView.tsx b/webapp/src/component/layout/BaseView.tsx
@@ -16,11 +16,19 @@ const widthMap = {
 };
 
 const StyledContainer = styled(Box)`
-  margin: 0px auto;
+  display: grid;
   width: 100%;
   max-width: 100%;
 `;
 
+const StyledContainerInner = styled(Box)`
+  display: grid;
+  width: 100%;
+  margin: 0px auto;
+  margin-top: 0px;
+  margin-bottom: 0px;
+`;
+
 type BaseViewWidth = keyof typeof widthMap | number | undefined;
 
 export function getBaseViewWidth(width: BaseViewWidth) {
@@ -50,6 +58,7 @@ export interface BaseViewProps {
   initialSearch?: string;
   overflow?: string;
   wrapperProps?: React.ComponentProps<typeof Box>;
+  stretch?: boolean;
 }
 
 export const BaseView = (props: BaseViewProps) => {
@@ -74,11 +83,15 @@ export const BaseView = (props: BaseViewProps) => {
 
   return (
     <StyledContainer
-      style={{
-        maxWidth: props.allCentered ? maxWidth : undefined,
-      }}
+      justifySelf={props.allCentered ? 'center' : undefined}
+      width={props.allCentered ? `min(${maxWidth}px, 100%)` : undefined}
+      maxWidth={props.allCentered ? maxWidth : undefined}
     >
-      <Box minHeight="100%" data-cy={props['data-cy']}>
+      <Box
+        display="grid"
+        gridTemplateRows="auto auto auto 1fr"
+        data-cy={props['data-cy']}
+      >
         {displayNavigation && (
           <SecondaryBar
             height={49}
@@ -100,7 +113,7 @@ export const BaseView = (props: BaseViewProps) => {
         )}
         {displayHeader && (
           <SecondaryBar noBorder={Boolean(displayNavigation)}>
-            <StyledContainer
+            <StyledContainerInner
               data-cy="global-base-view-title"
               style={{ maxWidth }}
             >
@@ -138,17 +151,24 @@ export const BaseView = (props: BaseViewProps) => {
                   </Box>
                 </Box>
               )}
-            </StyledContainer>
+            </StyledContainerInner>
           </SecondaryBar>
         )}
-        <Box pl={3} pr={3} pt={2} pb={2} {...props.wrapperProps}>
-          <StyledContainer style={{ maxWidth }}>
+        <Box
+          pl={3}
+          pr={3}
+          pt={2}
+          pb={2}
+          {...props.wrapperProps}
+          display="grid"
+          gridRow={props.stretch ? 4 : undefined}
+        >
+          <StyledContainerInner style={{ maxWidth }}>
             {!props.loading || !hideChildrenOnLoading ? (
               <Box
                 data-cy="global-base-view-content"
                 display="grid"
                 position="relative"
-                maxWidth="100%"
                 sx={{ overflow: props.overflow }}
               >
                 {typeof props.children === 'function'
@@ -158,7 +178,7 @@ export const BaseView = (props: BaseViewProps) => {
             ) : (
               <></>
             )}
-          </StyledContainer>
+          </StyledContainerInner>
         </Box>
       </Box>
     </StyledContainer>

diff --git a/webapp/src/component/layout/DashboardPage.tsx b/webapp/src/component/layout/DashboardPage.tsx
@@ -13,10 +13,9 @@ import { QuickStartGuide } from './QuickStartGuide/QuickStartGuide';
 import { useIsEmailVerified } from 'tg.globalContext/helpers';
 
 const StyledMain = styled(Box)`
-  display: flex;
-  position: relative;
-  flex-grow: 1;
-  justify-content: stretch;
+  display: grid;
+  width: 100%;
+  min-height: 100%;
   container: main-container / inline-size;
   position: relative;
 `;

diff --git a/...slationHeader/TranslationsSearchField.tsx → ...rc/component/layout/HeaderSearchField.tsx b/...slationHeader/TranslationsSearchField.tsx → ...rc/component/layout/HeaderSearchField.tsx
@@ -1,10 +1,11 @@
 import { ComponentProps } from 'react';
-import { IconButton, InputAdornment, TextField, useTheme } from '@mui/material';
+import { IconButton, InputAdornment, useTheme } from '@mui/material';
 import { SearchSm, XClose } from '@untitled-ui/icons-react';
 import { T } from '@tolgee/react';
 import { stopAndPrevent } from 'tg.fixtures/eventHandler';
+import { TextField } from 'tg.component/common/TextField';
 
-const TranslationsSearchField = (
+export const HeaderSearchField = (
   props: ComponentProps<typeof TextField> & {
     value: string;
     onSearchChange: (value: string) => void;
@@ -54,5 +55,3 @@ const TranslationsSearchField = (
     />
   );
 };
-
-export default TranslationsSearchField;
diff --git a/webapp/src/component/task/taskCreate/TaskCreateDialog.tsx b/webapp/src/component/task/taskCreate/TaskCreateDialog.tsx
@@ -52,20 +52,27 @@ const StyledForm = styled('form')`
   padding: ${({ theme }) => theme.spacing(3)};
   gap: ${({ theme }) => theme.spacing(0.5, 3)};
   padding-top: ${({ theme }) => theme.spacing(1)};
-  width: min(90vw, 800px);
+  width: min(calc(100vw - 64px), 800px);
 `;
 
 const StyledTopPart = styled(Box)`
   display: grid;
   gap: ${({ theme }) => theme.spacing(0.5, 2)};
   grid-template-columns: 3fr 5fr;
   align-items: start;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+  }
 `;
 
 const StyledFilters = styled(Box)`
   display: grid;
   gap: ${({ theme }) => theme.spacing(0.5, 2)};
   grid-template-columns: 3fr 3fr 2fr;
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+    gap: ${({ theme }) => theme.spacing(2)};
+  }
 `;
 
 const StyledActions = styled('div')`

diff --git a/webapp/src/component/task/taskCreate/TaskPreview.tsx b/webapp/src/component/task/taskCreate/TaskPreview.tsx
@@ -20,6 +20,9 @@ const StyledContainer = styled('div')`
   grid-template-columns: 1fr 3fr 2fr;
   border-radius: 8px;
   background: ${({ theme }) => theme.palette.tokens.background.selected};
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-columns: 1fr;
+  }
 `;
 
 const StyledContent = styled('div')`

diff --git a/webapp/src/views/projects/BaseProjectView.tsx b/webapp/src/views/projects/BaseProjectView.tsx
@@ -42,7 +42,7 @@ export const BaseProjectView: React.FC<Props> = ({
       {...otherProps}
       navigation={[...prefixNavigation, ...(navigation || [])]}
       navigationRight={
-        <Box display="flex" alignItems="center" gap={2}>
+        <Box display="grid">
           <BatchOperationsSummary />
           <Usage />
         </Box>

diff --git a/webapp/src/views/projects/ProjectPage.tsx b/webapp/src/views/projects/ProjectPage.tsx
@@ -7,11 +7,7 @@ import { useProject } from 'tg.hooks/useProject';
 import { ProjectMenu } from './projectMenu/ProjectMenu';
 
 const StyledContent = styled('div')`
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  position: relative;
+  display: grid;
   max-width: 100%;
 `;
 

diff --git a/webapp/src/views/projects/tasks/ProjectTasksView.tsx b/webapp/src/views/projects/tasks/ProjectTasksView.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Dialog } from '@mui/material';
+import { Box, Dialog, useMediaQuery } from '@mui/material';
 import { useTranslate } from '@tolgee/react';
 
 import { useProject } from 'tg.hooks/useProject';
@@ -17,6 +17,8 @@ import { BaseProjectView } from '../BaseProjectView';
 import { TasksHeader, TaskView } from './TasksHeader';
 import { TasksList } from './TasksList';
 import { TasksBoard } from './TasksBoard';
+import { useGlobalContext } from 'tg.globalContext/GlobalContext';
+import { TasksHeaderCompact } from './TasksHeaderCompact';
 
 type TaskModel = components['schemas']['TaskModel'];
 
@@ -37,6 +39,12 @@ export const ProjectTasksView = () => {
 
   const canEditTasks = satisfiesPermission('tasks.edit');
 
+  const rightPanelWidth = useGlobalContext((c) => c.layout.rightPanelWidth);
+
+  const isSmall = useMediaQuery(
+    `@media(max-width: ${rightPanelWidth + 1000}px)`
+  );
+
   const languagesLoadable = useApiQuery({
     url: '/v2/projects/{projectId}/languages',
     method: 'get',
@@ -88,6 +96,7 @@ export const ProjectTasksView = () => {
       windowTitle={t('tasks_view_title')}
       title={t('tasks_view_title')}
       maxWidth={1100}
+      stretch
       navigation={[
         [
           t('tasks_view_title'),
@@ -97,55 +106,71 @@ export const ProjectTasksView = () => {
         ],
       ]}
     >
-      <TasksHeader
-        sx={{ mb: '20px', mt: '-12px' }}
-        onSearchChange={setSearch}
-        showClosed={showClosed === 'true'}
-        onShowClosedChange={(val) => setShowClosed(String(val))}
-        filter={filter}
-        onFilterChange={setFilter}
-        onAddTask={canEditTasks ? () => setAddDialog(true) : undefined}
-        view={view as TaskView}
-        onViewChange={setView}
-      />
-      {view === 'LIST' ? (
-        <TasksList
-          search={search}
-          filter={filter}
-          showClosed={showClosed === 'true'}
-          onOpenDetail={setDetail}
-        />
-      ) : (
-        <TasksBoard
-          search={search}
-          filter={filter}
-          showClosed={showClosed === 'true'}
-          onOpenDetail={setDetail}
-        />
-      )}
-      {detail !== undefined && (
-        <Dialog open={true} onClose={handleDetailClose} maxWidth="xl">
-          <TaskDetail
-            task={detail}
-            onClose={handleDetailClose}
+      <Box display="grid" gridTemplateRows="auto 1fr">
+        {isSmall ? (
+          <TasksHeaderCompact
+            sx={{ mb: '20px', mt: '-12px' }}
+            onSearchChange={setSearch}
+            showClosed={showClosed === 'true'}
+            onShowClosedChange={(val) => setShowClosed(String(val))}
+            filter={filter}
+            onFilterChange={setFilter}
+            onAddTask={canEditTasks ? () => setAddDialog(true) : undefined}
+            view={view as TaskView}
+            onViewChange={setView}
+          />
+        ) : (
+          <TasksHeader
+            sx={{ mb: '20px', mt: '-12px' }}
+            onSearchChange={setSearch}
+            showClosed={showClosed === 'true'}
+            onShowClosedChange={(val) => setShowClosed(String(val))}
+            filter={filter}
+            onFilterChange={setFilter}
+            onAddTask={canEditTasks ? () => setAddDialog(true) : undefined}
+            view={view as TaskView}
+            onViewChange={setView}
+          />
+        )}
+        {view === 'LIST' && !isSmall ? (
+          <TasksList
+            search={search}
+            filter={filter}
+            showClosed={showClosed === 'true'}
+            onOpenDetail={setDetail}
+          />
+        ) : (
+          <TasksBoard
+            search={search}
+            filter={filter}
+            showClosed={showClosed === 'true'}
+            onOpenDetail={setDetail}
+          />
+        )}
+        {detail !== undefined && (
+          <Dialog open={true} onClose={handleDetailClose} maxWidth="xl">
+            <TaskDetail
+              task={detail}
+              onClose={handleDetailClose}
+              projectId={project.id}
+            />
+          </Dialog>
+        )}
+        {addDialog && (
+          <TaskCreateDialog
+            open={addDialog}
+            onClose={() => setAddDialog(false)}
+            onFinished={() => setAddDialog(false)}
+            initialValues={{
+              languages: allLanguages
+                .filter((l) => !l.base && languagesPreference.includes(l.tag))
+                .map((l) => l.id),
+            }}
             projectId={project.id}
+            allLanguages={allLanguages}
           />
-        </Dialog>
-      )}
-      {addDialog && (
-        <TaskCreateDialog
-          open={addDialog}
-          onClose={() => setAddDialog(false)}
-          onFinished={() => setAddDialog(false)}
-          initialValues={{
-            languages: allLanguages
-              .filter((l) => !l.base && languagesPreference.includes(l.tag))
-              .map((l) => l.id),
-          }}
-          projectId={project.id}
-          allLanguages={allLanguages}
-        />
-      )}
+        )}
+      </Box>
     </BaseProjectView>
   );
 };