Skip to content

Commit

Permalink
style(scoreboard): update item modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@GZTimeWalker
GZTimeWalker committed Sep 1, 2024
1 parent ae9e26f commit 1d2c244
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 41 deletions.
44 changes: 15 additions & 29 deletions src/GZCTF/ClientApp/src/components/MobileScoreboardItemModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ import {
Text,
Title,
} from '@mantine/core'
import cx from 'clsx'
import dayjs from 'dayjs'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { ScoreboardItemModalProps } from '@Components/ScoreboardItemModal'
import TeamRadarMap from '@Components/TeamRadarMap'
import { ChallengeInfo } from '@Api'
import inputClasses from '@Styles/Input.module.css'
import tableClasses from '@Styles/Table.module.css'
import { ScoreboardItemModalProps } from './ScoreboardItemModal'

const MobileScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
const { item, scoreboard, ...modalProps } = props
Expand Down Expand Up @@ -120,14 +120,12 @@ const MobileScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
</Stack>
{item?.solvedCount && item?.solvedCount > 0 ? (
<ScrollArea scrollbarSize={6} h="12rem" w="100%">
<Table className={cx(tableClasses.table, tableClasses.nopadding)} fz="sm">
<Table className={tableClasses.table} fz="sm">
<Table.Thead>
<Table.Tr>
<Table.Th style={{ minWidth: '3rem' }}>{t('common.label.challenge')}</Table.Th>
<Table.Th style={{ minWidth: '3rem' }}>
{t('game.label.score_table.score')}
</Table.Th>
<Table.Th style={{ minWidth: '3rem' }}>{t('common.label.time')}</Table.Th>
<Table.Th>{t('common.label.challenge')}</Table.Th>
<Table.Th>{t('game.label.score_table.score')}</Table.Th>
<Table.Th>{t('common.label.time')}</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
Expand All @@ -138,36 +136,24 @@ const MobileScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
.map((chal) => {
const info = challengeIdMap.get(chal.id!)
return (
<Table.Tr key={chal.id}>
<Table.Tr key={chal.id} ff="monospace">
<Table.Td>
<Input
variant="unstyled"
value={info?.title}
readOnly
size="sm"
sx={{
wrapper: {
width: '100%',
},

input: {
userSelect: 'none',
fontSize: '0.85rem',
lineHeight: '0.9rem',
height: '0.9rem',
fontWeight: 500,

'&:hover': {
textDecoration: 'underline',
},
},
__vars={{
'--input-height': 'var(--mantine-line-height-sm)',
}}
classNames={{
input: inputClasses.input,
wrapper: inputClasses.wrapper,
}}
/>
</Table.Td>
<Table.Td ff="monospace">{chal.score}</Table.Td>
<Table.Td ff="monospace">
{dayjs(chal.time).format('MM/DD HH:mm')}
</Table.Td>
<Table.Td>{chal.score}</Table.Td>
<Table.Td>{dayjs(chal.time).format('MM/DD HH:mm')}</Table.Td>
</Table.Tr>
)
})}
Expand Down
5 changes: 2 additions & 3 deletions src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,13 +167,12 @@ const MobileScoreboardTable: FC<ScoreboardProps> = ({ organization, setOrganizat
</Table>
</Box>
</Box>
<Group justify="center">
<Group justify="center" wrap="nowrap">
<Pagination
size="md"
size="sm"
value={activePage}
onChange={setPage}
total={Math.ceil((filtered?.length ?? 1) / ITEM_COUNT_PER_PAGE)}
boundaries={1}
/>
</Group>
</Stack>
Expand Down
36 changes: 28 additions & 8 deletions src/GZCTF/ClientApp/src/components/ScoreboardItemModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ import {
Table,
Text,
Title,
Input,
} from '@mantine/core'
import dayjs from 'dayjs'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import TeamRadarMap from '@Components/TeamRadarMap'
import { BloodsTypes, BonusLabel } from '@Utils/Shared'
import { ChallengeInfo, ScoreboardItem, ScoreboardModel, SubmissionType } from '@Api'
import inputClasses from '@Styles/Input.module.css'
import tableClasses from '@Styles/Table.module.css'

export interface ScoreboardItemModalProps extends ModalProps {
Expand Down Expand Up @@ -125,7 +127,7 @@ const ScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
<Progress value={solved * 100} />
</Stack>
{item?.solvedCount && item?.solvedCount > 0 ? (
<ScrollArea scrollbarSize={6} h="12rem" w="100%">
<ScrollArea scrollbarSize={6} h="12rem" w="100%" scrollbars="y">
<Table className={tableClasses.table}>
<Table.Thead>
<Table.Tr>
Expand All @@ -145,21 +147,39 @@ const ScoreboardItemModal: FC<ScoreboardItemModalProps> = (props) => {
const info = challengeIdMap.get(chal.id!)!
return (
<Table.Tr key={chal.id}>
<Table.Td style={{ fontWeight: 500 }}>{chal.userName}</Table.Td>
<Table.Td>{info.title}</Table.Td>
<Table.Td ff="monospace">{info.tag}</Table.Td>
<Table.Td ff="monospace">
<Table.Td fw="bold">{chal.userName}</Table.Td>
<Table.Td>
<Input
variant="unstyled"
value={info.title}
readOnly
size="sm"
miw="16rem"
maw="20rem"
__vars={{
'--input-height': 'var(--mantine-line-height-sm)',
}}
classNames={{
input: inputClasses.input,
wrapper: inputClasses.wrapper,
}}
/>
</Table.Td>
<Table.Td ff="monospace" fz="sm">
{info.tag}
</Table.Td>
<Table.Td ff="monospace" fz="sm">
{chal.score}
{info.score &&
chal.score! > info.score &&
chal.type &&
BloodsTypes.includes(chal.type) && (
<Text span c="dimmed" ff="monospace">
{` (${bloodBonusMap.get(chal.type)?.descr})`}
<Text size="sm" c="dimmed" span>
{`(${bloodBonusMap.get(chal.type)?.descr})`}
</Text>
)}
</Table.Td>
<Table.Td ff="monospace">
<Table.Td ff="monospace" fz="sm">
{dayjs(chal.time).format('MM/DD HH:mm:ss')}
</Table.Td>
</Table.Tr>
Expand Down
12 changes: 12 additions & 0 deletions src/GZCTF/ClientApp/src/styles/shared/Input.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.wapper {
width: 100%;
height: 0.9rem;
}

.input {
user-select: none;
font-size: var(--mantine-font-size-sm);
line-height: var(--mantine-line-height-sm);
height: var(--mantine-line-height-sm);
font-weight: 500;
}
13 changes: 12 additions & 1 deletion src/GZCTF/ClientApp/src/styles/shared/Table.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,23 @@
}

.table {
& thead tr th {
& thead {
position: sticky;
top: 0;
z-index: 195;

background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));

& tr::after {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 0px;
width: 100%;
height: rem(2px);
background-color: var(--table-border-color);
}
}

& tbody tr td {
Expand Down

0 comments on commit 1d2c244

Please sign in to comment.