Skip to content

Commit 58b5261

Browse files
GZTimeWalkerGZTimeWalker
committed
fix(style): game tab list
1 parent 8812318 commit 58b5261

File tree

8 files changed

+145
-171
lines changed

8 files changed

+145
-171
lines changed

‎src/GZCTF/ClientApp/src/components/admin/WithGameEditTab.tsx‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
1-
import { Group, GroupProps, LoadingOverlay, Stack, Tabs, useMantineTheme } from '@mantine/core'
1+
import {
2+
Button,
3+
Group,
4+
GroupPosition,
5+
GroupProps,
6+
LoadingOverlay,
7+
Stack,
8+
Tabs,
9+
useMantineTheme,
10+
} from '@mantine/core'
211
import {
312
mdiAccountGroupOutline,
413
mdiBullhornOutline,
514
mdiFileDocumentCheckOutline,
615
mdiFlagOutline,
16+
mdiKeyboardBackspace,
717
mdiTextBoxOutline,
818
} from '@mdi/js'
919
import { Icon } from '@mdi/react'
@@ -15,10 +25,19 @@ import AdminPage from '@Components/admin/AdminPage'
1525
interface GameEditTabProps extends React.PropsWithChildren {
1626
head?: React.ReactNode
1727
headProps?: GroupProps
28+
contentPos?: GroupPosition
1829
isLoading?: boolean
30+
backUrl?: string
1931
}
2032

21-
const WithGameEditTab: FC<GameEditTabProps> = ({ children, isLoading, ...others }) => {
33+
const WithGameEditTab: FC<GameEditTabProps> = ({
34+
children,
35+
isLoading,
36+
contentPos,
37+
head,
38+
backUrl,
39+
...others
40+
}) => {
2241
const navigate = useNavigate()
2342
const location = useLocation()
2443
const { id } = useParams()
@@ -47,15 +66,35 @@ const WithGameEditTab: FC<GameEditTabProps> = ({ children, isLoading, ...others
4766
}, [location])
4867

4968
return (
50-
<AdminPage {...others}>
69+
<AdminPage
70+
{...others}
71+
head={
72+
<>
73+
<Button
74+
w="9rem"
75+
styles={{ inner: { justifyContent: 'space-between' } }}
76+
leftIcon={<Icon path={mdiKeyboardBackspace} size={1} />}
77+
onClick={() => navigate(backUrl ?? '/admin/games')}
78+
>
79+
{t('admin.button.back')}
80+
</Button>
81+
<Group position={contentPos ?? 'apart'} w="calc(100% - 10rem)">
82+
{head}
83+
</Group>
84+
</>
85+
}
86+
>
5187
<Group noWrap position="apart" align="flex-start" w="100%">
5288
<Tabs
5389
orientation="vertical"
5490
value={activeTab}
5591
onTabChange={(value) => navigate(`/admin/games/${id}/${value}`)}
5692
styles={{
5793
root: {
58-
width: '8rem',
94+
width: '9rem',
95+
},
96+
tabsList: {
97+
width: '9rem',
5998
},
6099
}}
61100
>
@@ -67,7 +106,7 @@ const WithGameEditTab: FC<GameEditTabProps> = ({ children, isLoading, ...others
67106
))}
68107
</Tabs.List>
69108
</Tabs>
70-
<Stack w="calc(100% - 9rem)" pos="relative">
109+
<Stack w="calc(100% - 10rem)" pos="relative">
71110
<LoadingOverlay
72111
visible={isLoading ?? false}
73112
overlayOpacity={1}

‎src/GZCTF/ClientApp/src/pages/admin/games/[id]/Info.tsx‎

Lines changed: 32 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ import {
2626
mdiClose,
2727
mdiContentSaveOutline,
2828
mdiDeleteOutline,
29-
mdiKeyboardBackspace,
3029
mdiRefresh,
3130
} from '@mdi/js'
3231
import { Icon } from '@mdi/react'
@@ -184,51 +183,44 @@ const GameInfoEdit: FC = () => {
184183
return (
185184
<WithGameEditTab
186185
headProps={{ position: 'apart' }}
186+
contentPos="right"
187187
isLoading={!game}
188188
head={
189189
<>
190190
<Button
191-
leftIcon={<Icon path={mdiKeyboardBackspace} size={1} />}
192-
onClick={() => navigate('/admin/games')}
191+
disabled={disabled}
192+
color="red"
193+
leftIcon={<Icon path={mdiDeleteOutline} size={1} />}
194+
variant="outline"
195+
onClick={() =>
196+
modals.openConfirmModal({
197+
title: t('admin.button.games.delete'),
198+
children: (
199+
<Text size="sm">
200+
{t('admin.content.games.info.delete', { name: game?.title })}
201+
</Text>
202+
),
203+
onConfirm: () => onConfirmDelete(),
204+
confirmProps: { color: 'red' },
205+
})
206+
}
193207
>
194-
{t('admin.button.back')}
208+
{t('admin.button.games.delete')}
209+
</Button>
210+
<Button
211+
leftIcon={<Icon path={mdiClipboard} size={1} />}
212+
disabled={disabled}
213+
onClick={onCopyPublicKey}
214+
>
215+
{t('admin.button.games.copy_public_key')}
216+
</Button>
217+
<Button
218+
leftIcon={<Icon path={mdiContentSaveOutline} size={1} />}
219+
disabled={disabled}
220+
onClick={onUpdateInfo}
221+
>
222+
{t('admin.button.save')}
195223
</Button>
196-
<Group position="right">
197-
<Button
198-
disabled={disabled}
199-
color="red"
200-
leftIcon={<Icon path={mdiDeleteOutline} size={1} />}
201-
variant="outline"
202-
onClick={() =>
203-
modals.openConfirmModal({
204-
title: t('admin.button.games.delete'),
205-
children: (
206-
<Text size="sm">
207-
{t('admin.content.games.info.delete', { name: game?.title })}
208-
</Text>
209-
),
210-
onConfirm: () => onConfirmDelete(),
211-
confirmProps: { color: 'red' },
212-
})
213-
}
214-
>
215-
{t('admin.button.games.delete')}
216-
</Button>
217-
<Button
218-
leftIcon={<Icon path={mdiClipboard} size={1} />}
219-
disabled={disabled}
220-
onClick={onCopyPublicKey}
221-
>
222-
{t('admin.button.games.copy_public_key')}
223-
</Button>
224-
<Button
225-
leftIcon={<Icon path={mdiContentSaveOutline} size={1} />}
226-
disabled={disabled}
227-
onClick={onUpdateInfo}
228-
>
229-
{t('admin.button.save')}
230-
</Button>
231-
</Group>
232224
</>
233225
}
234226
>

‎src/GZCTF/ClientApp/src/pages/admin/games/[id]/Notices.tsx‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Button, Center, Group, ScrollArea, Stack, Text, Title } from '@mantine/core'
1+
import { Button, Center, ScrollArea, Stack, Text, Title } from '@mantine/core'
22
import { useModals } from '@mantine/modals'
33
import { showNotification } from '@mantine/notifications'
4-
import { mdiCheck, mdiKeyboardBackspace, mdiPlus } from '@mdi/js'
4+
import { mdiCheck, mdiPlus } from '@mdi/js'
55
import { Icon } from '@mdi/react'
66
import React, { FC, useState } from 'react'
77
import { useTranslation } from 'react-i18next'
8-
import { useNavigate, useParams } from 'react-router-dom'
8+
import { useParams } from 'react-router-dom'
99
import GameNoticeEditCard from '@Components/admin/GameNoticeEditCard'
1010
import GameNoticeEditModal from '@Components/admin/GameNoticeEditModal'
1111
import WithGameTab from '@Components/admin/WithGameEditTab'
@@ -47,31 +47,20 @@ const GameNoticeEdit: FC = () => {
4747
.catch((e) => showErrorNotification(e, t))
4848
}
4949

50-
const navigate = useNavigate()
5150
return (
5251
<WithGameTab
5352
headProps={{ position: 'apart' }}
53+
contentPos="right"
5454
head={
55-
<>
56-
<Button
57-
leftIcon={<Icon path={mdiKeyboardBackspace} size={1} />}
58-
onClick={() => navigate('/admin/games')}
59-
>
60-
{t('admin.button.back')}
61-
</Button>
62-
63-
<Group position="right">
64-
<Button
65-
leftIcon={<Icon path={mdiPlus} size={1} />}
66-
onClick={() => {
67-
setActiveGameNotice(null)
68-
setIsEditModalOpen(true)
69-
}}
70-
>
71-
{t('admin.button.notices.new')}
72-
</Button>
73-
</Group>
74-
</>
55+
<Button
56+
leftIcon={<Icon path={mdiPlus} size={1} />}
57+
onClick={() => {
58+
setActiveGameNotice(null)
59+
setIsEditModalOpen(true)
60+
}}
61+
>
62+
{t('admin.button.notices.new')}
63+
</Button>
7564
}
7665
>
7766
<ScrollArea pos="relative" h="calc(100vh - 180px)" offsetScrollbars>

‎src/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx‎

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
Avatar,
44
Badge,
55
Box,
6-
Button,
76
Center,
87
Group,
98
ScrollArea,
@@ -20,7 +19,6 @@ import {
2019
mdiCheck,
2120
mdiClose,
2221
mdiEmailOutline,
23-
mdiKeyboardBackspace,
2422
mdiPhoneOutline,
2523
mdiStar,
2624
} from '@mdi/js'
@@ -230,23 +228,13 @@ const GameTeamReview: FC = () => {
230228
headProps={{ position: 'apart' }}
231229
isLoading={!participations}
232230
head={
233-
<>
234-
<Button
235-
leftIcon={<Icon path={mdiKeyboardBackspace} size={1} />}
236-
onClick={() => navigate('/admin/games')}
237-
>
238-
{t('admin.button.back')}
239-
</Button>
240-
<Group w="calc(100% - 9rem)" position="left">
241-
<Select
242-
placeholder={t('admin.content.show_all')}
243-
clearable
244-
data={Array.from(participationStatusMap, (v) => ({ value: v[0], label: v[1].title }))}
245-
value={selectedStatus}
246-
onChange={(value: ParticipationStatus) => setSelectedStatus(value)}
247-
/>
248-
</Group>
249-
</>
231+
<Select
232+
placeholder={t('admin.content.show_all')}
233+
clearable
234+
data={Array.from(participationStatusMap, (v) => ({ value: v[0], label: v[1].title }))}
235+
value={selectedStatus}
236+
onChange={(value: ParticipationStatus) => setSelectedStatus(value)}
237+
/>
250238
}
251239
>
252240
<ScrollArea type="auto" pos="relative" h="calc(100vh - 180px)" offsetScrollbars>

‎src/GZCTF/ClientApp/src/pages/admin/games/[id]/Writeups.tsx‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Button, Center, Group, ScrollArea, Stack, Text, Title } from '@mantine/core'
2-
import { mdiFolderDownloadOutline, mdiKeyboardBackspace } from '@mdi/js'
2+
import { mdiFolderDownloadOutline } from '@mdi/js'
33
import { Icon } from '@mdi/react'
44
import React, { FC, useEffect, useState } from 'react'
55
import { ErrorBoundary } from 'react-error-boundary'
66
import { useTranslation } from 'react-i18next'
7-
import { useNavigate, useParams } from 'react-router-dom'
7+
import { useParams } from 'react-router-dom'
88
import PDFViewer from '@Components/admin/PDFViewer'
99
import TeamWriteupCard from '@Components/admin/TeamWriteupCard'
1010
import WithGameTab from '@Components/admin/WithGameEditTab'
@@ -15,7 +15,6 @@ import api, { WriteupInfoModel } from '@Api'
1515
const GameWriteups: FC = () => {
1616
const { id } = useParams()
1717
const numId = parseInt(id ?? '-1')
18-
const navigate = useNavigate()
1918
const [selected, setSelected] = useState<WriteupInfoModel>()
2019

2120
const { data: writeups } = api.admin.useAdminWriteups(numId, OnceSWRConfig)
@@ -30,25 +29,16 @@ const GameWriteups: FC = () => {
3029
return (
3130
<WithGameTab
3231
headProps={{ position: 'apart' }}
32+
contentPos="right"
3333
head={
34-
<>
35-
<Button
36-
leftIcon={<Icon path={mdiKeyboardBackspace} size={1} />}
37-
onClick={() => navigate('/admin/games')}
38-
>
39-
{t('admin.button.back')}
40-
</Button>
41-
42-
<Group grow miw="15rem" maw="15rem" position="apart">
43-
<Button
44-
fullWidth
45-
leftIcon={<Icon path={mdiFolderDownloadOutline} size={1} />}
46-
onClick={() => window.open(`/api/admin/writeups/${id}/all`, '_blank')}
47-
>
48-
{t('admin.button.writeups.download_all')}
49-
</Button>
50-
</Group>
51-
</>
34+
<Button
35+
fullWidth
36+
w="15rem"
37+
leftIcon={<Icon path={mdiFolderDownloadOutline} size={1} />}
38+
onClick={() => window.open(`/api/admin/writeups/${id}/all`, '_blank')}
39+
>
40+
{t('admin.button.writeups.download_all')}
41+
</Button>
5242
}
5343
>
5444
{!writeups?.length || !selected ? (

0 commit comments

Comments
 (0)