bubble/educt-client
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/educt-client.git synced 2026-10-11 02:09:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed css course card layout

Browse Source
This commit is contained in:
Sergey Yarkov 2022-06-08 01:05:43 +03:00
parent e64d588833
commit 25ba924555
1 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/courses/components/CourseList/CourseItem.tsx
View File

@ -103,8 +103,9 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
<Link <Link
to={`/course/${course.id}`} to={`/course/${course.id}`}
as={ReactRouterLink} as={ReactRouterLink}
display='block' display='flex'
h='full' flexDir={'column'}
h='100%'
textDecoration='none' textDecoration='none'
_visited={{ textDecoration: 'none' }} _visited={{ textDecoration: 'none' }}
_hover={{ textDecoration: 'none' }} _hover={{ textDecoration: 'none' }}
@ -133,7 +134,7 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
/> />
)} )}
</Box> </Box>
<Box p='0 10px' mt='10px' pb='20px'> <Flex flexDir={'column'} p='0 10px' mt='10px' pb='20px' h='100%'>
<Flex justifyContent='space-between'> <Flex justifyContent='space-between'>
<Badge colorScheme='blue'>{course.category.title}</Badge> <Badge colorScheme='blue'>{course.category.title}</Badge>
{(me.isAdmin || me.isTeacher) && <CourseStatusBadge status={course.status} />} {(me.isAdmin || me.isTeacher) && <CourseStatusBadge status={course.status} />}
@ -141,8 +142,10 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
<Heading as='h2' fontSize='xl' mt='5px'> <Heading as='h2' fontSize='xl' mt='5px'>
{course.title} {course.title}
</Heading> </Heading>
<Text mt='2'>{course.description}</Text> <Text mt='2' mb='4'>
<Flex mt='20px' flexWrap='wrap'> {course.description}
</Text>
<Flex mt='auto' flexWrap='wrap'>
<Flex alignItems='center' mr='1'> <Flex alignItems='center' mr='1'>
<Icon as={MdVideoLibrary} mr='2' /> <Icon as={MdVideoLibrary} mr='2' />
<Text mr='4'>{course.lessons_count} lessons</Text> <Text mr='4'>{course.lessons_count} lessons</Text>
@ -156,7 +159,7 @@ const CourseItem: React.FC<CourseItemPropsType> = ({ course, onDelete, onSetStat
<Text>{course.likes_count} likes</Text> <Text>{course.likes_count} likes</Text>
</Flex> </Flex>
</Flex> </Flex>
</Box> </Flex>
</Link> </Link>
</Box> </Box>
); );