Обновлен компонент CourseCard: добавлены адаптивные размеры и улучшена компоновка для различных экранов. Реализована возможность сворачивания/разворачивания списка уроков. Удален компонент CourseDetails, его функциональность интегрирована в CourseCard. Обновлен компонент CoursesList для поддержки адаптивного дизайна и улучшения пользовательского интерфейса.

src/pages/course-list/course-list.tsx

@@ -17,6 +17,9 @@ import {
   FormErrorMessage,
   useToast,
   useColorMode,
+  useBreakpointValue,
+  Flex,
+  Stack
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
 import { AddIcon } from '@chakra-ui/icons'
@@ -44,6 +47,12 @@ export const CoursesList = () => {
   const { t } = useTranslation()
 
   const { colorMode } = useColorMode();
+  
+  // Определяем размеры для адаптивного дизайна
+  const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })
+  const headingSize = useBreakpointValue({ base: 'md', md: 'lg' })
+  const formSpacing = useBreakpointValue({ base: 5, md: 10 })
+  const containerPadding = useBreakpointValue({ base: '2', md: '4' })
 
   const {
     control,
@@ -80,6 +89,7 @@ export const CoursesList = () => {
         })
       }
       reset()
+      setShowForm(false) // Закрываем форму после успешного создания
     }
   }, [crucQuery.isSuccess, t])
 
@@ -90,20 +100,20 @@ export const CoursesList = () => {
   }
 
   return (
-    <Container maxW="container.xl">
+    <Container maxW="container.xl" px={containerPadding}>
       {isTeacher(user) && (
-        <Box mt="15" mb="15">
+        <Box mt={{ base: 3, md: 5 }} mb={{ base: 3, md: 5 }}>
           {showForm ? (
             <Card align="left">
-              <CardHeader display="flex">
-                <Heading as="h2" mt="0">
+              <CardHeader display="flex" flexWrap="wrap" alignItems="center">
+                <Heading as="h2" size={headingSize} mt="0" flex="1" mr={2} mb={{ base: 2, md: 0 }}>
                   {t('journal.pl.course.createTitle')}
                 </Heading>
-                <CloseButton ml="auto" onClick={() => setShowForm(false)} />
+                <CloseButton ml={{ base: 'auto', md: 0 }} onClick={() => setShowForm(false)} />
               </CardHeader>
               <CardBody>
                 <form onSubmit={handleSubmit(onSubmit)}>
-                  <VStack spacing={10} align="left">
+                  <VStack spacing={formSpacing} align="left">
                     <Controller
                       control={control}
                       name="startDt"
@@ -160,38 +170,54 @@ export const CoursesList = () => {
                       )}
                       />
 
-                    <Box mt={10}>
-                      <Button
-                        size="lg"
-                        type="submit"
-                        leftIcon={<AddIcon />}
-                        colorScheme="blue"
+                    <Flex mt={formSpacing} justifyContent={{ base: 'center', md: 'flex-start' }}>
+                      <Stack direction={{ base: 'column', sm: 'row' }} spacing={2} width={{ base: '100%', sm: 'auto' }}>
+                        <Button
+                          size={buttonSize}
+                          type="submit"
+                          leftIcon={<AddIcon />}
+                          colorScheme="blue"
+                          width={{ base: '100%', sm: 'auto' }}
+                          isLoading={crucQuery.isLoading}
                         >
-                        {t('journal.pl.common.create')}
-                      </Button>
-                    </Box>
+                          {t('journal.pl.common.create')}
+                        </Button>
+                        <Button
+                          size={buttonSize}
+                          variant="outline"
+                          width={{ base: '100%', sm: 'auto' }}
+                          onClick={() => setShowForm(false)}
+                        >
+                          {t('journal.pl.common.cancel')}
+                        </Button>
+                      </Stack>
+                    </Flex>
                   </VStack>
 
                   {crucQuery?.error && (
-                    <ErrorSpan>{(crucQuery?.error as any).error}</ErrorSpan>
+                    <Box mt={4}>
+                      <ErrorSpan>{(crucQuery?.error as any).error}</ErrorSpan>
+                    </Box>
                   )}
                 </form>
               </CardBody>
             </Card>
           ) : (
-            <Box p="2" m="2">
+            <Box p={{ base: 1, md: 2 }} m={{ base: 1, md: 2 }}>
               <Button
                 leftIcon={<AddIcon />}
                 colorScheme="green"
                 onClick={() => setShowForm(true)}
-                >
+                size={buttonSize}
+                width={{ base: '100%', sm: 'auto' }}
+              >
                 {t('journal.pl.common.add')}
               </Button>
             </Box>
           )}
         </Box>
       )}
-      <VStack as="ul" align="stretch">
+      <VStack as="ul" align="stretch" spacing={{ base: 3, md: 4 }}>
         {data?.body?.map((c) => (
           <CourseCard
           key={c.id}