Skip to content

Commit

Permalink
fix: style
Browse files Browse the repository at this point in the history
  • Loading branch information
@zrll12
zrll12 committed Sep 9, 2024
1 parent ca525b5 commit 6a9970e
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 87 deletions.
4 changes: 2 additions & 2 deletions app/(root)/backstage/editor/[id]/DndTable.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

.item:hover {
transform: scale(1.01);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 4 px 10px rgba(0, 0, 0, 0.1);
}

.dragHandle {
Expand All @@ -21,4 +21,4 @@

.dragHandle:hover {
background-color: #f0f0f0;
}
}
20 changes: 9 additions & 11 deletions app/(root)/backstage/editor/[id]/components/question.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
'use client';

import { useEffect, useState } from 'react';
import { notifications } from '@mantine/notifications';
import { Card, Stack } from '@mantine/core';
import QuestionApi, { QuestionProps, StringifyQuestionProps } from '@/api/QuestionApi';
import { PageQuestionProps } from '@/app/(root)/survey/[id]/components/question';
import {useEffect, useState} from 'react';
import {notifications} from '@mantine/notifications';
import {Stack} from '@mantine/core';
import QuestionApi, {QuestionProps, StringifyQuestionProps} from '@/api/QuestionApi';
import {PageQuestionProps} from '@/app/(root)/survey/[id]/components/question';
import EditCard from '@/app/(root)/backstage/editor/[id]/components/EditCard';

export default function Question(props: PageQuestionProps) {
Expand Down Expand Up @@ -59,11 +59,9 @@ export default function Question(props: PageQuestionProps) {
}, []);

return (
<Card withBorder>
<Stack gap="xs">
{question ?
<EditCard question={question} setQuestion={setQuestion} save={save} /> : null}
</Stack>
</Card>
<Stack gap="xs">
{question ?
<EditCard question={question} setQuestion={setQuestion} save={save}/> : null}
</Stack>
);
}
141 changes: 67 additions & 74 deletions app/(root)/backstage/editor/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { Center, Container, Stack, Text, Title, Button, Space, Group } from '@mantine/core';
import { ActionIcon, Button, Card, Center, Container, Group, Space, Stack, Text, Title } from '@mantine/core';
import React, { useEffect, useRef, useState } from 'react';
import { notifications } from '@mantine/notifications';
import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
Expand Down Expand Up @@ -185,82 +185,75 @@ export default function SurveyPage({ params }: { params: { id: number } }) {
<Text size="md">加载中...</Text>
</Center>
) : (
<>
<Container maw={1600} w="90%">
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="questions-list" direction="vertical">
{(droppableProvided) => (
<Stack
{...droppableProvided.droppableProps}
ref={droppableProvided.innerRef}
>
{questions?.content.map((questionId, index) => (
<Draggable
key={questionId}
draggableId={questionId}
index={index}
>
{(draggableProvided, snapshot) => (
<div
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
className={cx(classes.item, {
[classes.itemDragging]:
snapshot.isDragging,
})}
>
<Stack>
<div
{...draggableProvided.dragHandleProps}
className={classes.dragHandle}
>
<IconGripHorizontal />
</div>
<Question
id={questionId}
value={getAnswerGetter(questionId)}
setValue={getAnswerSetter(questionId)}
setProps={getPropsSetter(questionId)}
checkAccess={() => true}
/>
</Stack>
</div>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Stack>
)}
</Droppable>
</DragDropContext>
<Container maw={1600} w="90%">
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable droppableId="questions-list" direction="vertical">
{(droppableProvided) => (
<Stack
{...droppableProvided.droppableProps}
ref={droppableProvided.innerRef}
>
{questions?.content.map((questionId, index) => (
<Draggable
key={questionId}
draggableId={questionId}
index={index}
>
{(draggableProvided, snapshot) => (
<Card
ref={draggableProvided.innerRef}
{...draggableProvided.draggableProps}
className={cx(classes.item, {
[classes.itemDragging]:
snapshot.isDragging,
})}
withBorder
radius="md"
>
<Stack>
<ActionIcon {...draggableProvided.dragHandleProps} variant="subtle" color="gray">
<IconGripHorizontal />
</ActionIcon>
<Question
id={questionId}
value={getAnswerGetter(questionId)}
setValue={getAnswerSetter(questionId)}
setProps={getPropsSetter(questionId)}
checkAccess={() => true}
/>
</Stack>
</Card>
)}
</Draggable>
))}
{droppableProvided.placeholder}
</Stack>
)}
</Droppable>
</DragDropContext>

<Space h={20} />
<Space h={20} />

<Group grow>
<Button onClick={newQuestion}>新建问题</Button>
</Group>
<Group grow>
<Button onClick={newQuestion}>新建问题</Button>
</Group>
<Space h={20} />

{showNewQuestion && (
<>
<Space h={20} />
<div
style={{
backgroundColor: 'rgba(185, 190, 185, 0.3)',
borderRadius: '10px',
padding: '10px',
}}
>
<EditCard
question={newQuestionObject}
setQuestion={setNewQuestionObject}
cancel={() => setShowNewQuestion(false)}
save={saveNewQuestion}
/>
</div>
</>
)}
</Container>
</>
{showNewQuestion && (
<Card
style={{
backgroundColor: 'rgba(185, 190, 185, 0.3)',
}}
>
<EditCard
question={newQuestionObject}
setQuestion={setNewQuestionObject}
cancel={() => setShowNewQuestion(false)}
save={saveNewQuestion}
/>
</Card>
)}
</Container>
)}
</Stack>
);
Expand Down

0 comments on commit 6a9970e

Please sign in to comment.