Skip to content

Commit 81ba9a9

Browse files
HandiworkHandiwork
committed
refactor: index page layout and OperationCard layout
1 parent cae030b commit 81ba9a9

File tree

3 files changed

+108
-110
lines changed

3 files changed

+108
-110
lines changed

‎src/components/OperationCard.tsx‎

Lines changed: 91 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import {
55
DrawerSize,
66
Elevation,
77
H4,
8-
H5,
98
Icon,
10-
Tag,
9+
Tag
1110
} from '@blueprintjs/core'
1211
import { Tooltip2 } from '@blueprintjs/popover2'
1312

@@ -51,116 +50,113 @@ export const OperationCard = ({
5150
<Card
5251
interactive={true}
5352
elevation={Elevation.TWO}
54-
className="mb-4 sm:mb-2 last:mb-0"
53+
className="flex flex-col gap-2"
5554
onClick={() => setDrawerOpen(true)}
5655
>
57-
<div className="flex flex-wrap mb-4 sm:mb-2">
58-
{/* title */}
59-
<div className="flex flex-col gap-3">
60-
<div className="flex gap-2">
61-
<H4 className="inline-block pb-1 border-b-2 border-zinc-200 border-solid mb-2">
62-
{operationDoc.doc.title}
63-
</H4>
64-
<Tooltip2
65-
placement="bottom"
66-
content={
67-
<div className="max-w-sm dark:text-slate-900">
68-
下载原 JSON
69-
</div>
70-
}
71-
>
72-
<Button
73-
small
74-
icon="download"
75-
onClick={(e) => {
76-
e.stopPropagation()
77-
handleDownloadJSON(operationDoc)
78-
}}
79-
/>
80-
</Tooltip2>
81-
<Tooltip2
82-
placement="bottom"
83-
content={
84-
<div className="max-w-sm dark:text-slate-900">
85-
复制神秘代码
86-
</div>
87-
}
88-
>
89-
<Button
90-
small
91-
icon="clipboard"
92-
onClick={(e) => {
93-
e.stopPropagation()
94-
handleCopyShortCode(operation)
95-
}}
96-
/>
97-
</Tooltip2>
98-
</div>
99-
<H5 className="flex items-center text-slate-900 -mt-3">
100-
<EDifficultyLevel
101-
level={
102-
findLevelByStageName(levels, operationDoc.stageName) ||
103-
createCustomLevel(operationDoc.stageName)
104-
}
105-
difficulty={operationDoc.difficulty}
106-
/>
107-
</H5>
108-
</div>
10956

110-
<div className="lg:flex-1 hidden" />
111-
112-
{/* meta */}
113-
<div className="flex flex-col flex-1 gap-y-1.5 gap-x-4">
114-
<div className="flex flex-wrap sm:justify-end items-center gap-x-4 gap-y-1 text-zinc-500">
115-
<div className="flex items-center gap-1.5">
116-
<Icon icon="star" />
117-
<OperationRating
118-
className="text-sm"
119-
operation={operation}
120-
layout="horizontal"
121-
/>
57+
{/* title */}
58+
<div className="flex gap-1">
59+
<Tooltip2 content={operationDoc.doc.title} className='flex-1 whitespace-nowrap overflow-hidden text-ellipsis'>
60+
<H4 className="p-0 m-0 whitespace-nowrap overflow-hidden text-ellipsis">
61+
{operationDoc.doc.title}
62+
</H4>
63+
</Tooltip2>
64+
<Tooltip2
65+
placement="bottom"
66+
content={
67+
<div className="max-w-sm dark:text-slate-900">
68+
下载原 JSON
12269
</div>
123-
124-
<Tooltip2 placement="top" content={`访问量：${operation.views}`}>
125-
<div>
126-
<Icon icon="eye-open" className="mr-1.5" />
127-
<span>{operation.views}</span>
128-
</div>
129-
</Tooltip2>
130-
131-
<div>
132-
<Icon icon="time" className="mr-1.5" />
133-
<RelativeTime
134-
Tooltip2Props={{ placement: 'top' }}
135-
moment={operation.uploadTime}
136-
/>
70+
}
71+
>
72+
<Button
73+
small
74+
icon="download"
75+
onClick={(e) => {
76+
e.stopPropagation()
77+
handleDownloadJSON(operationDoc)
78+
}}
79+
/>
80+
</Tooltip2>
81+
<Tooltip2
82+
placement="bottom"
83+
content={
84+
<div className="max-w-sm dark:text-slate-900">
85+
复制神秘代码
13786
</div>
138-
</div>
139-
<div className="text-zinc-500 self-end">
140-
<Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
141-
<div>
142-
<Icon icon="user" className="mr-1.5" />
143-
<span>{operation.uploader}</span>
144-
</div>
145-
</Tooltip2>
146-
</div>
147-
</div>
87+
}
88+
>
89+
<Button
90+
small
91+
icon="clipboard"
92+
onClick={(e) => {
93+
e.stopPropagation()
94+
handleCopyShortCode(operation)
95+
}}
96+
/>
97+
</Tooltip2>
98+
</div>
99+
<div className="flex items-center text-slate-900">
100+
<EDifficultyLevel
101+
level={
102+
findLevelByStageName(levels, operationDoc.stageName) ||
103+
createCustomLevel(operationDoc.stageName)
104+
}
105+
difficulty={operationDoc.difficulty}
106+
/>
148107
</div>
149-
<div className="flex md:flex-row flex-col gap-4">
150-
<div className="text-gray-700 leading-normal md:w-1/2">
151-
{/* <div className="text-sm text-zinc-600 mb-2 font-bold">作业描述</div> */}
108+
<div className='flex-1 flex flex-col gap-2 justify-center'>
109+
<div className="text-gray-700 leading-normal">
152110
<Paragraphs
153111
content={operationDoc.doc.details}
154112
limitHeight={21 * 13.5} // 13 lines, 21px per line; the extra 0.5 line is intentional so the `mask` effect is obvious
155113
/>
156114
</div>
157-
<div className="md:w-1/2">
115+
<div>
158116
<div className="text-sm text-zinc-600 mb-2 font-bold">
159117
干员/干员组
160118
</div>
161119
<OperatorTags operationDoc={operationDoc} />
162120
</div>
163121
</div>
122+
123+
<div className='flex'>
124+
<div className="flex items-center gap-1.5">
125+
<Icon icon="star" />
126+
<OperationRating
127+
className="text-sm"
128+
operation={operation}
129+
layout="horizontal"
130+
/>
131+
</div>
132+
<div className='flex-1' />
133+
134+
<Tooltip2 placement="top" content={`访问量：${operation.views}`}>
135+
<div>
136+
<Icon icon="eye-open" className="mr-1.5" />
137+
<span>{operation.views}</span>
138+
</div>
139+
</Tooltip2>
140+
</div>
141+
142+
<div className='flex'>
143+
<div>
144+
<Icon icon="time" className="mr-1.5" />
145+
<RelativeTime
146+
Tooltip2Props={{ placement: 'top' }}
147+
moment={operation.uploadTime}
148+
/>
149+
</div>
150+
<div className='flex-1' />
151+
<div className="text-zinc-500">
152+
<Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
153+
<div>
154+
<Icon icon="user" className="mr-1.5" />
155+
<span>{operation.uploader}</span>
156+
</div>
157+
</Tooltip2>
158+
</div>
159+
</div>
164160
</Card>
165161
</>
166162
)

‎src/components/OperationList.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@ export const OperationList: ComponentType<UseOperationsParams> =
3030

3131
return (
3232
<>
33-
{operationsWithDoc.map(({ operation, doc }) => (
34-
<OperationCard
35-
operation={operation}
36-
operationDoc={doc}
37-
key={operation.id}
38-
/>
39-
))}
33+
<div className='grid gap-4' style={{ gridTemplateColumns: "repeat(auto-fill, minmax(20rem, 1fr)" }}>
34+
{operationsWithDoc.map(({ operation, doc }) => (
35+
<OperationCard
36+
operation={operation}
37+
operationDoc={doc}
38+
key={operation.id}
39+
/>
40+
))}
41+
</div>
4042

4143
{isReachingEnd && operations.length === 0 && (
4244
<NonIdealState

‎src/components/entity/ELevel.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { H4, Tag } from '@blueprintjs/core'
1+
import { Tag } from '@blueprintjs/core'
22

33
import { FC } from 'react'
44

@@ -20,14 +20,14 @@ export const ELevel: FC<{
2020
}
2121

2222
return (
23-
<Tag className="transition border border-solid !text-xs tracking-tight !p-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
24-
<div className="flex items-center mx-1">
25-
<div className="flex flex-col mr-2">
26-
<H4 className="inline-block font-bold my-auto">{catThree}</H4>
27-
</div>
28-
<div className="flex flex-col">
29-
<span className="text-xs font-light">{catOne}</span>
23+
<Tag className="transition border border-solid !text-xs tracking-tight !px-2 !py-1 !my-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
24+
<div className="flex items-center">
25+
<div className="flex whitespace-pre">
26+
<span className="inline-block font-bold my-auto">{catThree}</span>
27+
{" | "}
3028
<span className="text-xs">{catTwo}</span>
29+
{" | "}
30+
<span className="text-xs">{catOne}</span>
3131
</div>
3232
</div>
3333
</Tag>

0 commit comments

Comments
 (0)