Merge remote-tracking branch 'GZTimeWalker/develop' into develop

kengwang · Sep 1, 2024 · 2021242 · 2021242
2 parents 260d440 + 1d2c244
commit 2021242
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 56 deletions.
diff --git a/src/GZCTF/ClientApp/src/components/MobileScoreboardItemModal.tsx b/src/GZCTF/ClientApp/src/components/MobileScoreboardItemModal.tsx
@@ -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
@@ -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>
@@ -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>
                       )
                     })}

diff --git a/src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx b/src/GZCTF/ClientApp/src/components/MobileScoreboardTable.tsx
@@ -175,13 +175,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>

diff --git a/src/GZCTF/ClientApp/src/components/ScoreboardItemModal.tsx b/src/GZCTF/ClientApp/src/components/ScoreboardItemModal.tsx
@@ -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 {
@@ -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>
@@ -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>

diff --git a/src/GZCTF/ClientApp/src/components/WithNavbar.tsx b/src/GZCTF/ClientApp/src/components/WithNavbar.tsx
@@ -56,7 +56,7 @@ const WithNavBar: FC<WithNavBarProps> = ({
         rotate={-12}
         textSize={14}
         gutter={22}
-        opacity={colorScheme === 'dark' ? 0.02 : 0.03}
+        opacity={colorScheme === 'dark' ? 0.02 : 0.025}
       >
         <AppShell
           padding={0}

diff --git a/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx b/src/GZCTF/ClientApp/src/components/WithWiderScreen.tsx
@@ -1,8 +1,9 @@
-import { Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Stack, Text, Title } from '@mantine/core'
 import { useViewportSize } from '@mantine/hooks'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import IconWiderScreenRequired from '@Components/icon/WiderScreenRequiredIcon'
+import classes from '@Styles/Placeholder.module.css'
 
 interface WithWiderScreenProps extends React.PropsWithChildren {
   minWidth?: number
@@ -12,16 +13,13 @@ const WithWiderScreen: FC<WithWiderScreenProps> = ({ children, minWidth = 1080 }
   const view = useViewportSize()
 
   const { t } = useTranslation()
-  const theme = useMantineTheme()
 
   const tooSmall = minWidth > 0 && view.width > 0 && view.width < minWidth
 
   return tooSmall ? (
-    <Stack gap={0} align="center" justify="center" h="calc(100vh - 32px)">
+    <Stack gap={0} className={classes.board}>
       <IconWiderScreenRequired />
-      <Title order={1} c={theme.primaryColor} fw="lighter">
-        {t('common.content.wider.title')}
-      </Title>
+      <Title order={1}>{t('common.content.wider.title')}</Title>
       <Text fw="bold">{t('common.content.wider.text')}</Text>
     </Stack>
   ) : (

diff --git a/src/GZCTF/ClientApp/src/locales/en_US/common.json b/src/GZCTF/ClientApp/src/locales/en_US/common.json
@@ -54,7 +54,7 @@
     "no_data": "No data",
     "report_error": "Please report this error to the administrator if you think this is a bug",
     "wider": {
-      "text": "Please use a broader device to browse this page",
+      "text": "Try to use a wider device",
       "title": "Not wide enough"
     }
   },

diff --git a/src/GZCTF/ClientApp/src/pages/[...all].tsx b/src/GZCTF/ClientApp/src/pages/[...all].tsx
@@ -1,17 +1,17 @@
-import { Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Stack, Text, Title } from '@mantine/core'
 import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
 import WithNavBar from '@Components/WithNavbar'
 import Icon404 from '@Components/icon/404Icon'
 import { usePageTitle } from '@Utils/usePageTitle'
+import classes from '@Styles/Placeholder.module.css'
 
 const Error404: FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
 
   const { t } = useTranslation()
-  const theme = useMantineTheme()
 
   usePageTitle(t('common.title.404'))
 
@@ -23,11 +23,9 @@ const Error404: FC = () => {
 
   return (
     <WithNavBar minWidth={0}>
-      <Stack gap={0} align="center" justify="center" h="calc(100vh - 32px)">
+      <Stack gap={0} className={classes.board}>
         <Icon404 />
-        <Title order={1} c={theme.primaryColor} fw="lighter">
-          {t('common.content.404.title')}
-        </Title>
+        <Title order={1}>{t('common.content.404.title')}</Title>
         <Text fw="bold">{t('common.content.404.text')}</Text>
       </Stack>
     </WithNavBar>

diff --git a/src/GZCTF/ClientApp/src/styles/components/Placeholder.module.css b/src/GZCTF/ClientApp/src/styles/components/Placeholder.module.css
@@ -0,0 +1,15 @@
+.board {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
+  justify-content: center;
+  height: calc(100vh - 3.75rem * var(--mantine-scale));
+  padding: var(--mantine-spacing-lg);
+  align-items: center;
+}
+
+.board > * {
+  text-align: center;
+}
+
+.board > h1 {
+  color: light-dark(var(--mantine-primary-color-filled), var(--mantine-primary-color-4));
+}
diff --git a/src/GZCTF/ClientApp/src/styles/shared/Input.module.css b/src/GZCTF/ClientApp/src/styles/shared/Input.module.css
@@ -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;
+}
diff --git a/src/GZCTF/ClientApp/src/styles/shared/Table.module.css b/src/GZCTF/ClientApp/src/styles/shared/Table.module.css
@@ -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 {

diff --git a/src/GZCTF/Services/Mail/MailSender.cs b/src/GZCTF/Services/Mail/MailSender.cs
@@ -30,7 +30,8 @@ public MailSender(
         _options = options.Value;
         _cancellationToken = _cancellationTokenSource.Token;
 
-        if (_options is not { SendMailAddress: not null, Smtp.Host: not null, Smtp.Port: not null })
+        if (string.IsNullOrWhiteSpace(_options.SendMailAddress) ||
+            string.IsNullOrWhiteSpace(_options.Smtp?.Host) || _options.Smtp.Port is not null)
             return;
 
         _smtpClient = new();