Добавляет базовую адаптивность

Seasle · Dec 30, 2023 · a82cfb1 · a82cfb1
1 parent 59dd67d
commit a82cfb1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 12 deletions.
diff --git a/src/entities/task/ui/task-card/ui/TaskCard.tsx b/src/entities/task/ui/task-card/ui/TaskCard.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
-import { Paper, Stack, Group, Flex, Text, Button } from '@mantine/core';
+import { Paper, Stack, Group, Flex, Text, Button, rem } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import {
   TaskOverdueIcon,
   TaskPriorityIcon,
@@ -15,8 +16,10 @@ export interface TaskCardProps {
 }
 
 export const TaskCard = ({ task }: TaskCardProps) => {
+  const { width } = useViewportSize();
   const linkTo = `/${task.id}`;
   const isOverdue = toDate(task.expiresIn ?? '').getTime() < Date.now();
+  const orientation = width < 1024 ? 'vertical' : 'horizontal';
 
   const onToggleClick = () => {
     taskModel.events.toggleTask(task.id);
@@ -47,7 +50,11 @@ export const TaskCard = ({ task }: TaskCardProps) => {
             autoUpdate={!task.isCompleted}
           />
         )}
-        <Flex justify="space-between">
+        <Flex
+          direction={orientation === 'horizontal' ? 'row' : 'column'}
+          gap={orientation === 'horizontal' ? rem(0) : rem(16)}
+          justify="space-between"
+        >
           <Group>
             <Text size="xs">Создана {humanizedDate(task.createdAt)}</Text>
             {task.expiresIn && (

diff --git a/src/entities/task/ui/task-form/ui/TaskForm.tsx b/src/entities/task/ui/task-form/ui/TaskForm.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import { useForm } from '@mantine/form';
+import { useViewportSize } from '@mantine/hooks';
 import { IconCheck } from '@tabler/icons-react';
 import { priorityValues } from '../const';
 import { ChoiceItem } from '@/shared/ui';
@@ -33,6 +34,7 @@ export interface TaskFormProps {
 }
 
 export const TaskForm = ({ data, submitText, onSubmit }: TaskFormProps) => {
+  const { width } = useViewportSize();
   const { ref, key } = useDelayedKeyOnResize(50);
   const form = useForm<TaskFormValues>({
     initialValues: {
@@ -48,6 +50,7 @@ export const TaskForm = ({ data, submitText, onSubmit }: TaskFormProps) => {
     },
   });
   const isSubmitting = useRef(false);
+  const orientation = width < 1024 ? 'vertical' : 'horizontal';
 
   const onFormSubmit = useCallback(
     (values: TaskFormValues) => {
@@ -70,7 +73,7 @@ export const TaskForm = ({ data, submitText, onSubmit }: TaskFormProps) => {
     <form onSubmit={form.onSubmit(onFormSubmit)}>
       <Stack ref={ref}>
         <Grid>
-          <Grid.Col span="auto">
+          <Grid.Col span={orientation === 'horizontal' ? 'auto' : 12}>
             <TextInput
               label="Название задачи"
               placeholder="Что будем делать?"
@@ -85,7 +88,7 @@ export const TaskForm = ({ data, submitText, onSubmit }: TaskFormProps) => {
               {...form.getInputProps('title')}
             />
           </Grid.Col>
-          <Grid.Col span="content">
+          <Grid.Col span={orientation === 'horizontal' ? 'content' : 12}>
             <DateInput
               label="Срок выполнения"
               placeholder="А он нужен?"
@@ -121,6 +124,8 @@ export const TaskForm = ({ data, submitText, onSubmit }: TaskFormProps) => {
             value: entry.value,
             label: <ChoiceItem value={entry} />,
           }))}
+          fullWidth={orientation === 'vertical'}
+          orientation={orientation}
           key={key}
           {...form.getInputProps('priority')}
         />

diff --git a/src/features/task/ui/tasks-filter/ui/TasksFilter.module.scss b/src/features/task/ui/tasks-filter/ui/TasksFilter.module.scss
@@ -0,0 +1,16 @@
+.filters {
+  gap: var(--mantine-spacing-md);
+  display: flex;
+
+  &:global(.horizontal) {
+    flex-direction: column;
+  }
+
+  &:global(.vertical) {
+    flex-direction: column;
+
+    & > * {
+      width: 100%;
+    }
+  }
+}
diff --git a/src/features/task/ui/tasks-filter/ui/TasksFilter.tsx b/src/features/task/ui/tasks-filter/ui/TasksFilter.tsx
@@ -3,13 +3,14 @@ import {
   Paper,
   Grid,
   Stack,
-  Group,
   TextInput,
   SegmentedControl,
   Button,
   CloseButton,
   Text,
 } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
+import clsx from 'clsx';
 import {
   toPriority,
   toCompleted,
@@ -21,8 +22,10 @@ import {
 import { priorityValues, completedValues, overdueValues } from '../const';
 import { taskQueryModel } from '@/entities/task';
 import { ChoiceItem } from '@/shared/ui';
+import classes from './TasksFilter.module.scss';
 
 export const TasksFilter = () => {
+  const { width } = useViewportSize();
   const query = taskQueryModel.selectors.useQuery();
   const textValue = query.text ?? '';
   const priorityValue = toPriority(query.priority);
@@ -33,6 +36,7 @@ export const TasksFilter = () => {
     query.priority === undefined &&
     query.isCompleted === undefined &&
     query.isOverdue === undefined;
+  const orientation = width < 1024 ? 'vertical' : 'horizontal';
 
   const onTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = event.currentTarget.value;
@@ -68,7 +72,7 @@ export const TasksFilter = () => {
       <Stack>
         <Text size="lg">Фильтр задач</Text>
         <Grid align="end">
-          <Grid.Col span="auto">
+          <Grid.Col span={orientation === 'horizontal' ? 'auto' : 12}>
             <TextInput
               label="Текст в названии или описании"
               placeholder="Ищем любые задачи"
@@ -83,19 +87,25 @@ export const TasksFilter = () => {
               onChange={onTextChange}
             />
           </Grid.Col>
-          <Grid.Col span="content">
-            <Button color="red" disabled={isEmpty} onClick={onResetClick}>
+          <Grid.Col span={orientation === 'horizontal' ? 'content' : 12}>
+            <Button
+              fullWidth
+              color="red"
+              disabled={isEmpty}
+              onClick={onResetClick}
+            >
               Сбросить
             </Button>
           </Grid.Col>
         </Grid>
-        <Group>
+        <div className={clsx(classes.filters, orientation)}>
           <SegmentedControl
             value={priorityValue}
             data={priorityValues.map((entry) => ({
               value: entry.value,
               label: <ChoiceItem value={entry} />,
             }))}
+            orientation={orientation}
             onChange={onPriorityChange}
           />
           <SegmentedControl
@@ -104,6 +114,7 @@ export const TasksFilter = () => {
               value: entry.value,
               label: <ChoiceItem value={entry} />,
             }))}
+            orientation={orientation}
             onChange={onCompletedChange}
           />
           <SegmentedControl
@@ -112,9 +123,10 @@ export const TasksFilter = () => {
               value: entry.value,
               label: <ChoiceItem value={entry} />,
             }))}
+            orientation={orientation}
             onChange={onOverdueChange}
           />
-        </Group>
+        </div>
       </Stack>
     </Paper>
   );

diff --git a/src/shared/ui/to-top/ui/ToTop.tsx b/src/shared/ui/to-top/ui/ToTop.tsx
@@ -1,10 +1,15 @@
 import { Affix, Transition, Button, rem } from '@mantine/core';
-import { useWindowScroll } from '@mantine/hooks';
+import { useViewportSize, useWindowScroll } from '@mantine/hooks';
 import { IconArrowUp } from '@tabler/icons-react';
 
 export const ToTop = () => {
+  const { width } = useViewportSize();
   const [scroll, scrollTo] = useWindowScroll();
 
+  if (width < 1024) {
+    return null;
+  }
+
   return (
     <Affix position={{ bottom: rem(16), right: rem(16) }}>
       <Transition transition="slide-up" mounted={scroll.y > 0}>

diff --git a/src/widgets/task/ui/single-task/ui/SignleTask.tsx b/src/widgets/task/ui/single-task/ui/SignleTask.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { SimpleGrid, Stack, Button } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import { IconArrowLeft, IconEdit } from '@tabler/icons-react';
 import { TaskView } from '@/features/task';
 import { type TaskId } from '@/shared/types';
@@ -10,7 +11,9 @@ export interface SingleTaskProps {
 }
 
 export const SingleTask = ({ id }: SingleTaskProps) => {
+  const { width } = useViewportSize();
   const navigate = useNavigate();
+  const orientation = width < 1024 ? 'vertical' : 'horizontal';
 
   const onBackClick = () => {
     navigate(-1);
@@ -26,7 +29,7 @@ export const SingleTask = ({ id }: SingleTaskProps) => {
 
   return (
     <Stack>
-      <SimpleGrid cols={2}>
+      <SimpleGrid cols={orientation === 'vertical' ? 1 : 2}>
         <Button
           size="lg"
           color="gray"