Use 'max-width' to limit content width.

TWValues · Feb 16, 2024 · 747d47c · 747d47c
1 parent ba2e159
commit 747d47c
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 138 deletions.
diff --git a/src/components/ValueCard.jsx b/src/components/ValueCard.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Card, Typography, Progress, Image, Flex } from 'antd'
-import useBreakpoint from '../utils/useBreakpoint'
+import { useBreakpoint } from '../utils/useBreakpoint'
 import { useTranslation } from 'react-i18next'
 
 const { Text } = Typography

diff --git a/src/modules/main/Main.jsx b/src/modules/main/Main.jsx
@@ -3,7 +3,6 @@ import { Layout } from 'antd'
 import { Outlet } from 'react-router-dom'
 import Header from './header/Header'
 import Footer from './footer/Footer'
-import useBreakpoint from '../../utils/useBreakpoint'
 import { reduceWithDelimiter } from '../../utils/range'
 
 import bg1 from '../../assets/background/background-1.webp'
@@ -18,17 +17,6 @@ const Main = () => {
     [],
   )
 
-  const screens = useBreakpoint()
-
-  const getContentStyles = () =>
-    ({
-      sm: { padding: '10px 10px 10px 10px' },
-      md: { padding: '10px 20px 10px 20px' },
-      lg: { padding: '10px 10% 10px 10%' },
-      xl: { padding: '10px 15% 10px 15%' },
-      xxl: { padding: '10px 20% 10px 20%' },
-    })[screens.size]
-
   useEffect(() => {
     window.addEventListener('scroll', (ev) => {
       const y = ev.target.documentElement.scrollTop
@@ -54,7 +42,7 @@ const Main = () => {
           backgroundRepeat: 'repeat',
           backgroundPositionY: reduceWithDelimiter(bgPositionY, ','),
           transition: 'all 0.25s ease-out 0s',
-          ...getContentStyles(),
+          width: '100%',
         }}
       >
         <Outlet />

diff --git a/src/modules/main/footer/Footer.jsx b/src/modules/main/footer/Footer.jsx
@@ -1,51 +1,49 @@
 import React from 'react'
-import { Layout, Typography } from 'antd'
-import useBreakpoint from '../../../utils/useBreakpoint'
+import { Layout, Typography, Flex } from 'antd'
+import { getHeaderFooterMaxWidth } from '../../../utils/useBreakpoint'
 import { useNavigate } from 'react-router-dom'
 
 const { Title } = Typography
 
 const Footer = () => {
   const navigate = useNavigate()
-  const screens = useBreakpoint()
-
-  const getFooterStyles = () =>
-    ({
-      sm: { padding: '0 10px 0 10px' },
-      md: { padding: '0 20px 0 20px' },
-      lg: { padding: '0 10% 0 10%' },
-      xl: { padding: '0 15% 0 15%' },
-      xxl: { padding: '0 20% 0 20%' },
-    })[screens.size]
 
   return (
     <Layout.Footer
       style={{
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        ...getFooterStyles(),
-        height: '40px',
+        width: '100%',
+        height: 'auto',
         backgroundColor: 'crimson',
+        padding: '5px',
       }}
     >
-      <Title
-        level={5}
+      <Flex
+        vertical={false}
+        justify='space-between'
+        align='center'
         style={{
-          cursor: 'pointer',
-          color: 'white',
-          margin: 'auto 0 auto 0',
-        }}
-        onClick={() => {
-          navigate('/')
+          ...getHeaderFooterMaxWidth(),
+          width: '100%',
+          margin: '0 auto',
         }}
       >
-        TW Values
-      </Title>
-      <Title level={5} style={{ color: 'white', margin: 'auto 0 auto 0' }}>
-        Copyright (c) 2023-2024 TW Values
-      </Title>
+        <Title
+          level={5}
+          style={{
+            cursor: 'pointer',
+            color: 'white',
+            margin: 'auto 0 auto 0',
+          }}
+          onClick={() => {
+            navigate('/')
+          }}
+        >
+          TW Values
+        </Title>
+        <Title level={5} style={{ color: 'white', margin: 'auto 0 auto 0' }}>
+          Copyright (c) 2023-2024 TW Values
+        </Title>
+      </Flex>
     </Layout.Footer>
   )
 }

diff --git a/src/modules/main/header/Header.jsx b/src/modules/main/header/Header.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { Layout, Typography, Button, Space } from 'antd'
+import { Layout, Typography, Button, Space, Flex } from 'antd'
 import { GithubOutlined } from '@ant-design/icons'
 import { useNavigate } from 'react-router-dom'
-import useBreakpoint from '../../../utils/useBreakpoint'
+import { getHeaderFooterMaxWidth } from '../../../utils/useBreakpoint'
 import packageInfo from '../../../../package.json'
 import { useTranslation } from 'react-i18next'
 
@@ -11,7 +11,6 @@ const { Title } = Typography
 const Header = () => {
   const navigate = useNavigate()
   const { i18n } = useTranslation()
-  const screens = useBreakpoint()
 
   const languages = [
     {
@@ -33,96 +32,80 @@ const Header = () => {
     i18n.changeLanguage(language)
   }
 
-  const getHeaderStyles = () =>
-    ({
-      sm: { padding: '0 10px 0 10px' },
-      md: { padding: '0 20px 0 20px' },
-      lg: { padding: '0 10% 0 10%' },
-      xl: { padding: '0 15% 0 15%' },
-      xxl: { padding: '0 20% 0 20%' },
-    })[screens.size]
-
-  const getButtonStyles = () =>
-    ({
-      sm: { fontSize: 'small' },
-      md: { fontSize: 'medium' },
-      lg: { fontSize: 'medium' },
-      xl: { fontSize: 'medium' },
-      xxl: { fontSize: 'medium' },
-    })[screens.size]
-
-  const getRepoLinkStyles = () =>
-    ({
-      sm: { fontSize: 'large' },
-      md: { fontSize: 'x-large' },
-      lg: { fontSize: 'x-large' },
-      xl: { fontSize: 'x-large' },
-      xxl: { fontSize: 'x-large' },
-    })[screens.size]
-
   return (
     <Layout.Header
       style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        ...getHeaderStyles(),
-        height: '60px',
+        width: '100%',
+        height: 'auto',
         backgroundColor: 'crimson',
+        padding: '0',
       }}
     >
-      <Title
-        level={1}
+      <Flex
+        vertical={false}
+        justify='space-between'
+        align='center'
         style={{
-          cursor: 'pointer',
-          color: 'white',
-          margin: 'auto 0 auto 0',
-        }}
-        onClick={() => {
-          navigate('/')
+          ...getHeaderFooterMaxWidth(),
+          width: '100%',
+          margin: '0 auto',
         }}
       >
-        TW Values
-      </Title>
-      <Space size={8}>
-        {languages.map((value, index) => (
+        <Title
+          level={1}
+          style={{
+            cursor: 'pointer',
+            color: 'white',
+            margin: '0 5px',
+            padding: '0',
+          }}
+          onClick={() => {
+            navigate('/')
+          }}
+        >
+          TW Values
+        </Title>
+        <Space size={8}>
+          {languages.map((value, index) => (
+            <Button
+              key={index}
+              onClick={() => {
+                setLanguage(value.key)
+              }}
+              style={{
+                backgroundColor: 'transparent',
+                borderColor: i18n.language === value.key ? 'transparent' : 'white',
+                color: 'white',
+                padding: '0 5px',
+                fontSize: 'medium',
+              }}
+            >
+              {value.text}
+            </Button>
+          ))}
           <Button
-            key={index}
-            onClick={() => {
-              setLanguage(value.key)
-            }}
+            type='link'
+            href={`https://github.com/TWValues/TW-Values/tree/v${packageInfo.version}`}
+            target='_blank'
             style={{
               backgroundColor: 'transparent',
-              borderColor: i18n.language === value.key ? 'transparent' : 'white',
+              borderColor: 'transparent',
               color: 'white',
               padding: '0 5px',
-              ...getButtonStyles(),
+              fontSize: 'medium',
             }}
           >
-            {value.text}
+            {`v${packageInfo.version}`}
           </Button>
-        ))}
-        <Button
-          type='link'
-          href={`https://github.com/TWValues/TW-Values/tree/v${packageInfo.version}`}
-          target='_blank'
-          style={{
-            backgroundColor: 'transparent',
-            borderColor: 'transparent',
-            color: 'white',
-            padding: '0 5px',
-            ...getButtonStyles(),
-          }}
-        >
-          {`v${packageInfo.version}`}
-        </Button>
-        <Button
-          type='link'
-          href='https://github.com/TWValues/TW-Values'
-          target='_blank'
-          icon={<GithubOutlined style={{ color: 'white', ...getRepoLinkStyles() }} />}
-        />
-      </Space>
+          <Button
+            type='link'
+            href='https://github.com/TWValues/TW-Values'
+            target='_blank'
+            icon={<GithubOutlined style={{ color: 'white', fontSize: 'x-large' }} />}
+            style={{ margin: '0 5px' }}
+          />
+        </Space>
+      </Flex>
     </Layout.Header>
   )
 }

diff --git a/src/pages/Quiz.jsx b/src/pages/Quiz.jsx
@@ -4,6 +4,7 @@ import { useMemo, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, createSearchParams } from 'react-router-dom'
 import shuffle from '../utils/shuffle'
+import { getContentMaxWidth } from '../utils/useBreakpoint'
 import { getQuestions } from '../data/question'
 import { getMatchedIdeologyTags } from '../data/ideology_tag'
 import MULTIPLIER from '../utils/multiplier'
@@ -233,7 +234,9 @@ const Quiz = () => {
         backgroundColor: 'white',
         border: 'crimson solid 4px',
         borderRadius: '20px',
+        ...getContentMaxWidth(),
         width: '100%',
+        margin: '20px auto',
         padding: '10px',
       }}
     >

diff --git a/src/pages/Result.jsx b/src/pages/Result.jsx
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom'
 import { Card, Typography, Image, Button, Flex, Switch, Row, Col } from 'antd'
 import { useTranslation } from 'react-i18next'
 import ValueCard from '../components/ValueCard'
-import useBreakpoint from '../utils/useBreakpoint'
+import { useBreakpoint, getContentMaxWidth } from '../utils/useBreakpoint'
 import { getIdeologyTags } from '../data/ideology_tag'
 import { getIdeologyMatchScores, getPoliticalPartyMatchScores } from '../utils/match'
 import { getValueConstant } from '../utils/color'
@@ -206,12 +206,13 @@ const Result = () => {
       align='center'
       gap={20}
       style={{
-        width: '100%',
-        margin: '10px',
         backgroundColor: 'transparent',
         border: 'crimson solid 4px',
         borderRadius: '20px',
-        padding: '10px',
+        ...getContentMaxWidth(),
+        width: '100%',
+        margin: '20px',
+        padding: '5px',
       }}
     >
       <Card

diff --git a/src/pages/Welcome.jsx b/src/pages/Welcome.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Divider, Typography, Alert, Flex } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
-import useBreakpoint from '../utils/useBreakpoint'
+import { useBreakpoint, getContentMaxWidth } from '../utils/useBreakpoint'
 import * as stylex from '@stylexjs/stylex'
 
 const { Title, Text } = Typography
@@ -43,15 +43,6 @@ const Welcome = () => {
   const navigate = useNavigate()
   const screens = useBreakpoint()
 
-  const getLayoutStyles = () =>
-    ({
-      sm: { padding: '10px' },
-      md: { padding: '10px' },
-      lg: { padding: '20px' },
-      xl: { padding: '30px' },
-      xxl: { padding: '40px' },
-    })[screens.size]
-
   return (
     <Flex
       vertical={true}
@@ -61,7 +52,10 @@ const Welcome = () => {
         backgroundColor: 'white',
         border: 'crimson solid 4px',
         borderRadius: '20px',
-        ...getLayoutStyles(),
+        ...getContentMaxWidth(),
+        width: '100%',
+        margin: '20px auto',
+        padding: '40px',
       }}
     >
       <Title