Skip to content

Commit

Permalink
fix: refine layout (#160)
Browse files Browse the repository at this point in the history
Co-authored-by: Sakamoto, Kazunori <[email protected]>
Co-authored-by: Hikaru Ishiwata <[email protected]>
Co-authored-by: Hikaru Ishiwata <[email protected]>
  • Loading branch information
3 people authored Sep 26, 2024
1 parent 0dc1438 commit 5528f25
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 34 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -143,19 +143,6 @@ export const ProblemBody: React.FC<Props> = (props) => {
ステップ実行モード
</Tag>
)}
{problemType === 'executionResult' && (
<Tooltip label="減点になりますが、確実に問題を解けます。">
<Button
colorScheme="brand"
variant="outline"
onClick={() => {
void props.updateProblemSession('step', 1);
}}
>
諦めてステップ実行モードに移る
</Button>
</Tooltip>
)}
</HStack>

<Box>
Expand Down Expand Up @@ -228,7 +215,7 @@ export const ProblemBody: React.FC<Props> = (props) => {
)}
/>
</VStack>
<Box flexBasis={0} flexGrow={3} pt={8}>
<Box flexBasis={0} flexGrow={3}>
<Variables traceItemVars={props.problem.traceItems[currentTraceItemIndex].vars} />
</Box>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,15 @@ import {
MIN_INTERVAL_MS_OF_ACTIVE_EVENTS,
} from '../../../../../../../../constants';
import { backendTrpcReact } from '../../../../../../../../infrastructures/trpcBackend/client';
import { Heading, HStack, Link, Text, VStack } from '../../../../../../../../infrastructures/useClient/chakra';
import {
Button,
Heading,
HStack,
Link,
Text,
Tooltip,
VStack,
} from '../../../../../../../../infrastructures/useClient/chakra';
import type { Problem } from '../../../../../../../../problems/generateProblem';
import type { CourseId, ProblemId } from '../../../../../../../../problems/problemData';
import { courseIdToLectureIds, courseIdToName, problemIdToName } from '../../../../../../../../problems/problemData';
Expand Down Expand Up @@ -50,33 +58,50 @@ export const ProblemPageOnClient: React.FC<Props> = (props) => {
});
};

const updateProblemSession = async (problemType: string, traceItemIndex: number): Promise<void> => {
const updateProblemSession = async (newProblemType: string, newTraceItemIndex: number): Promise<void> => {
const newProblemSession = await updateProblemSessionMutation.mutateAsync({
id: problemSession.id,
problemType,
traceItemIndex,
problemType: newProblemType,
traceItemIndex: newTraceItemIndex,
});
setProblemSession(newProblemSession);
};

return (
<VStack align="stretch" spacing={8}>
<VStack align="stretch" spacing={4}>
<VStack align="stretch" spacing={1}>
<HStack spacing={2}>
<Link as={NextLink} color="gray.600" fontWeight="bold" href={`/courses/${props.params.courseId}`}>
{courseIdToName[props.params.courseId]}
</Link>
<Text color="gray.600">{'>'}</Text>
<Link
as={NextLink}
color="gray.600"
fontWeight="bold"
href={`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`}
>
{lectureIndex + 1}
</Link>
<HStack justify="space-between" spacing={2}>
<HStack spacing={2}>
<Link as={NextLink} color="gray.600" fontWeight="bold" href={`/courses/${props.params.courseId}`}>
{courseIdToName[props.params.courseId]}
</Link>
<Text color="gray.600">{'>'}</Text>
<Link
as={NextLink}
color="gray.600"
fontWeight="bold"
href={`/courses/${props.params.courseId}/lectures/${props.params.lectureId}`}
>
{lectureIndex + 1}
</Link>
</HStack>
</HStack>
<HStack justify="space-between" spacing={2}>
<Heading as="h1">{problemIdToName[props.params.problemId]}</Heading>
{problemSession.problemType === 'executionResult' && (
<Tooltip label="減点になりますが、確実に問題を解けます。">
<Button
colorScheme="blue"
variant="outline"
onClick={() => {
void updateProblemSession('step', 1);
}}
>
諦めてステップ実行モードに移る
</Button>
</Tooltip>
)}
</HStack>
<Heading as="h1">{problemIdToName[props.params.problemId]}</Heading>
</VStack>

<ProblemBody
Expand Down
2 changes: 1 addition & 1 deletion src/app/(withAuth)/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const DefaultLayout: NextPage<LayoutProps> = async ({ children }) => {

<DefaultHeader />
<Suspense fallback={<Spinner left="50%" position="fixed" top="50%" transform="translate(-50%, -50%)" />}>
<Container pb={16} pt={12}>
<Container pb={16} pt={6}>
{children}
</Container>
</Suspense>
Expand Down

0 comments on commit 5528f25

Please sign in to comment.