bro-js/challenge-admin-pl
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Layout component to use 95% width for the main container. Enhance TaskFormPage with responsive tabs for mobile and desktop layouts, improving user experience for editing and previewing task descriptions.

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-11-04 10:37:24 +03:00
parent 8b6e6b903a
commit f0b1130da2
2 changed files with 65 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Layout.tsx
View File

@ -122,7 +122,7 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
</Box> </Box>
{/* Main Content */} {/* Main Content */}
<Container maxW="container.xl" py={8}> <Container maxW="95%" py={8}>
{children} {children}
</Container> </Container>
</Box> </Box>

77
src/pages/tasks/TaskFormPage.tsx
View File

@ -12,6 +12,7 @@ import {
Text, Text,
Field, Field,
Tabs, Tabs,
Grid,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import { import {
@ -146,25 +147,73 @@ export const TaskFormPage: React.FC = () => {
{/* Description with Markdown */} {/* Description with Markdown */}
<Field.Root required> <Field.Root required>
<Field.Label>{t('challenge.admin.tasks.field.description')}</Field.Label> <Field.Label>{t('challenge.admin.tasks.field.description')}</Field.Label>
<Tabs.Root <Box display={{ base: 'block', lg: 'none' }}>
value={showDescPreview ? 'preview' : 'editor'} {/* Табы для мобильных */}
onValueChange={(e) => setShowDescPreview(e.value === 'preview')} <Tabs.Root
value={showDescPreview ? 'preview' : 'editor'}
onValueChange={(e) => setShowDescPreview(e.value === 'preview')}
>
<Tabs.List>
<Tabs.Trigger value="editor">{t('challenge.admin.tasks.tab.editor')}</Tabs.Trigger>
<Tabs.Trigger value="preview">{t('challenge.admin.tasks.tab.preview')}</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="editor" pt={4}>
<Textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder={t('challenge.admin.tasks.field.description.placeholder')}
rows={15}
fontFamily="monospace"
disabled={isLoading}
/>
</Tabs.Content>
<Tabs.Content value="preview" pt={4}>
<Box
p={4}
borderWidth="1px"
borderColor="gray.200"
borderRadius="md"
minH="300px"
bg="gray.50"
>
{description ? (
<Box className="markdown-preview">
<ReactMarkdown>{description}</ReactMarkdown>
</Box>
) : (
<Text color="gray.400" fontStyle="italic">
{t('challenge.admin.tasks.preview.empty')}
</Text>
)}
</Box>
</Tabs.Content>
</Tabs.Root>
</Box>
{/* Две колонки для десктопа */}
<Grid
display={{ base: 'none', lg: 'grid' }}
templateColumns="1fr 1fr"
gap={4}
mt={2}
> >
<Tabs.List> <Box>
<Tabs.Trigger value="editor">{t('challenge.admin.tasks.tab.editor')}</Tabs.Trigger> <Text fontSize="sm" fontWeight="medium" mb={2} color="gray.700">
<Tabs.Trigger value="preview">{t('challenge.admin.tasks.tab.preview')}</Tabs.Trigger> {t('challenge.admin.tasks.tab.editor')}
</Tabs.List> </Text>
<Tabs.Content value="editor" pt={4}>
<Textarea <Textarea
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder={t('challenge.admin.tasks.field.description.placeholder')} placeholder={t('challenge.admin.tasks.field.description.placeholder')}
rows={15} rows={20}
fontFamily="monospace" fontFamily="monospace"
disabled={isLoading} disabled={isLoading}
/> />
</Tabs.Content> </Box>
<Tabs.Content value="preview" pt={4}> <Box>
<Text fontSize="sm" fontWeight="medium" mb={2} color="gray.700">
{t('challenge.admin.tasks.tab.preview')}
</Text>
<Box <Box
p={4} p={4}
borderWidth="1px" borderWidth="1px"
@ -172,6 +221,8 @@ export const TaskFormPage: React.FC = () => {
borderRadius="md" borderRadius="md"
minH="300px" minH="300px"
bg="gray.50" bg="gray.50"
height="100%"
overflowY="auto"
> >
{description ? ( {description ? (
<Box className="markdown-preview"> <Box className="markdown-preview">
@ -183,8 +234,8 @@ export const TaskFormPage: React.FC = () => {
</Text> </Text>
)} )}
</Box> </Box>
</Tabs.Content> </Box>
</Tabs.Root> </Grid>
<Field.HelperText>{t('challenge.admin.tasks.field.description.helper')}</Field.HelperText> <Field.HelperText>{t('challenge.admin.tasks.field.description.helper')}</Field.HelperText>
</Field.Root> </Field.Root>