frontend: fix styles

GZTimeWalker · May 5, 2023 · 1858151 · 1858151
1 parent 12e618d
commit 1858151
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 36 deletions.
diff --git a/src/GZCTF/ClientApp/package.json b/src/GZCTF/ClientApp/package.json
@@ -50,7 +50,7 @@
     "@types/node": "18.15.11",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.2.5",
-    "@types/react-dom": "^18.2.3",
+    "@types/react-dom": "^18.2.4",
     "@types/react-pdf": "^6.2.0",
     "@typescript-eslint/eslint-plugin": "^5.59.2",
     "@typescript-eslint/parser": "^5.59.2",

diff --git a/src/GZCTF/ClientApp/pnpm-lock.yaml b/src/GZCTF/ClientApp/pnpm-lock.yaml
diff --git a/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx b/src/GZCTF/ClientApp/src/components/ChallengeDetailModal.tsx
@@ -307,7 +307,7 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
         >
           <LoadingOverlay visible={!challenge} />
           <Group grow noWrap position="right" align="flex-start" spacing={2}>
-            <Box className={classes.root} style={{ minHeight: '4rem' }}>
+            <Box className={classes.root} mih="4rem">
               {challenge?.context?.url && (
                 <Popover
                   opened={downloadOpened}
@@ -327,9 +327,9 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
                       onMouseEnter={downloadOpen}
                       onMouseLeave={downloadClose}
                       onClick={() => window.open(challenge.context?.url ?? '#')}
-                      style={{
-                        float: 'right',
-                      }}
+                      top={0}
+                      right={0}
+                      pos="absolute"
                     >
                       <Icon path={mdiDownload} size={1} />
                     </ActionIcon>
@@ -341,7 +341,17 @@ const ChallengeDetailModal: FC<ChallengeDetailModalProps> = (props) => {
                   </Popover.Dropdown>
                 </Popover>
               )}
-              <MarkdownRender source={challenge?.content ?? ''} />
+              <MarkdownRender
+                source={challenge?.content ?? ''}
+                sx={{
+                  '& div > p:first-child:before': {
+                    content: '""',
+                    float: 'right',
+                    width: 45,
+                    height: 45,
+                  },
+                }}
+              />
             </Box>
           </Group>
           {challenge?.hints && challenge.hints.length > 0 && (

diff --git a/src/GZCTF/ClientApp/src/components/MarkdownRender.tsx b/src/GZCTF/ClientApp/src/components/MarkdownRender.tsx
@@ -3,11 +3,12 @@ import 'katex/dist/katex.min.css'
 import { marked } from 'marked'
 import Prism from 'prismjs'
 import { forwardRef } from 'react'
-import { TypographyStylesProvider } from '@mantine/core'
+import { Sx, TypographyStylesProvider } from '@mantine/core'
 import { useTypographyStyles } from '@Utils/useTypographyStyles'
 
 interface MarkdownProps extends React.ComponentPropsWithoutRef<'div'> {
   source: string
+  sx?: Sx | (Sx | undefined)[]
 }
 
 const RenderReplacer = (func: any, replacer: (text: string) => string) => {
@@ -59,7 +60,7 @@ export const MarkdownRender = forwardRef<HTMLDivElement, MarkdownProps>((props,
       className={others.className ? cx(classes.root, others.className) : classes.root}
       {...others}
     >
-      <div className="line-numbers" dangerouslySetInnerHTML={{ __html: marked.parse(source) }} />
+      <div dangerouslySetInnerHTML={{ __html: marked.parse(source) }} />
     </TypographyStylesProvider>
   )
 })

diff --git a/src/GZCTF/ClientApp/src/components/RecentGame.tsx b/src/GZCTF/ClientApp/src/components/RecentGame.tsx
@@ -52,19 +52,19 @@ const RecentGame: FC<RecentGameProps> = ({ game, ...others }) => {
     >
       <Card.Section pos="relative">
         {poster ? (
-          <Image src={poster} h={POSTER_HEIGHT} alt="poster" />
+          <Image src={poster} height={POSTER_HEIGHT} alt="poster" />
         ) : (
-          <Center h={POSTER_HEIGHT}>
+          <Center mah={POSTER_HEIGHT}>
             <Icon path={mdiFlagOutline} size={4} color={theme.colors.gray[5]} />
           </Center>
         )}
       </Card.Section>
 
       <Card.Section
         inheritPadding
+        pos="relative"
+        mt={`calc(16px - ${POSTER_HEIGHT})`}
         style={{
-          position: 'relative',
-          marginTop: `calc(16px - ${POSTER_HEIGHT})`,
           alignContent: 'flex-end',
         }}
       >
@@ -76,22 +76,22 @@ const RecentGame: FC<RecentGameProps> = ({ game, ...others }) => {
       </Card.Section>
 
       <Card.Section
+        h={34}
+        pos="relative"
+        mt={`calc(${POSTER_HEIGHT} - 2rem - 34px)`}
+        bg="rgba(0,0,0,.5)"
+        display="flex"
+        p="0 16px"
         style={{
-          position: 'relative',
-          marginTop: `calc(${POSTER_HEIGHT} - 2rem - 34px)`,
-          background: 'rgba(0,0,0,.5)',
-          display: 'flex',
-          height: 34,
-          padding: '0 16px',
           alignItems: 'center',
         }}
       >
-        <Title lineClamp={1} order={4} align="left" style={{ color: theme.colors.gray[0] }}>
+        <Title lineClamp={1} order={4} align="left" color={theme.colors.gray[0]}>
           &gt; {title}
         </Title>
       </Card.Section>
 
-      <Stack spacing={0} style={{ marginTop: 16 }}>
+      <Stack spacing={0} mt={16}>
         <Group noWrap spacing={0} position="apart">
           <Text size="sm" weight={700}>
             {status === GameStatus.Coming ? '开始于' : '结束于'}

diff --git a/src/GZCTF/ClientApp/src/components/RecentGameCarousel.tsx b/src/GZCTF/ClientApp/src/components/RecentGameCarousel.tsx
@@ -13,7 +13,7 @@ const RecentGameCarousel: FC<RecentGameCarouselProps> = ({ games, ...props }) =>
 
   return (
     <Carousel
-      sx={{ width: '100%' }}
+      w="100%"
       mx="auto"
       loop
       withIndicators

diff --git a/src/GZCTF/ClientApp/src/components/WriteupSubmitModal.tsx b/src/GZCTF/ClientApp/src/components/WriteupSubmitModal.tsx
@@ -121,7 +121,7 @@ export const WriteupSubmitModal: FC<WriteupSubmitModalProps> = ({ gameId, wpddl,
         },
       }}
     >
-      <Stack spacing="xs" mt="sm">
+      <Stack spacing="xs" mt={0}>
         <Divider />
         <Title order={5}>提交说明</Title>
         <List

diff --git a/src/GZCTF/ClientApp/src/components/admin/ChallengePreviewModal.tsx b/src/GZCTF/ClientApp/src/components/admin/ChallengePreviewModal.tsx
@@ -124,6 +124,9 @@ const ChallengePreviewModal: FC<ChallengePreviewModalProps> = (props) => {
                       variant="filled"
                       size="lg"
                       color="brand"
+                      top={0}
+                      right={0}
+                      pos="absolute"
                       onMouseEnter={downloadOpen}
                       onMouseLeave={downloadClose}
                       onClick={() =>
@@ -134,9 +137,6 @@ const ChallengePreviewModal: FC<ChallengePreviewModalProps> = (props) => {
                           withCloseButton: false,
                         })
                       }
-                      style={{
-                        float: 'right',
-                      }}
                     >
                       <Icon path={mdiDownload} size={1} />
                     </ActionIcon>
@@ -148,7 +148,17 @@ const ChallengePreviewModal: FC<ChallengePreviewModalProps> = (props) => {
                   </Popover.Dropdown>
                 </Popover>
               )}
-              <MarkdownRender source={challenge?.content ?? ''} />
+              <MarkdownRender
+                source={challenge?.content ?? ''}
+                sx={{
+                  '& div > p:first-child:before': {
+                    content: '""',
+                    float: 'right',
+                    width: 45,
+                    height: 45,
+                  },
+                }}
+              />
             </Box>
           </Group>
           {challenge?.hints && challenge.hints.length > 0 && (

diff --git a/src/GZCTF/ClientApp/src/pages/account/Login.tsx b/src/GZCTF/ClientApp/src/pages/account/Login.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { PasswordInput, Grid, TextInput, Button, Anchor } from '@mantine/core'
 import { useInputState, getHotkeyHandler } from '@mantine/hooks'
 import { showNotification } from '@mantine/notifications'
@@ -11,7 +11,7 @@ import { usePageTitle } from '@Utils/usePageTitle'
 import api from '@Api'
 
 const Login: FC = () => {
-  const params = useParams()
+  const params = useSearchParams()[0]
   const navigate = useNavigate()
 
   const [pwd, setPwd] = useInputState('')
@@ -49,8 +49,7 @@ const Login: FC = () => {
           withCloseButton: false,
         })
         api.account.mutateAccountProfile()
-        const from = params['from']
-        navigate(from ? (from as string) : '/')
+        navigate(params.get('from') ?? '/')
       })
       .catch((err) => {
         showErrorNotification(err)

diff --git a/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx b/src/GZCTF/ClientApp/src/pages/admin/games/[id]/Review.tsx
@@ -186,7 +186,7 @@ const ParticipationItem: FC<ParticipationItemProps> = (props) => {
                 </Text>
               </Box>
             </Group>
-            <Group position="apart" w="calc(30%)">
+            <Group position="apart" w="30%">
               <Box>
                 <Text>{participation.organization}</Text>
                 <Text size="sm" color="dimmed" weight={700}>
@@ -200,7 +200,7 @@ const ParticipationItem: FC<ParticipationItemProps> = (props) => {
             </Group>
           </Group>
         </Accordion.Control>
-        <Group w={`0 ${theme.spacing.xl}`} miw={`calc(${theme.spacing.xl} * 3)`} position="right">
+        <Group m={`0 ${theme.spacing.xl}`} miw={`calc(${theme.spacing.xl} * 3)`} position="right">
           {StatusMap.get(participation.status!)?.transformTo.map((value) => {
             const s = StatusMap.get(value)!
             return (