From 272dc12d0752cbc9153e155475e57ba2cd7746cb Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Mon, 20 Nov 2023 08:04:34 +0900 Subject: [PATCH] style: mobile responsive design --- public/icons/show-more.svg | 5 + src/components/BU/About/BUAbout.tsx | 42 ++++++- src/components/BU/BUHero.tsx | 117 ++++++++++-------- src/components/BU/Media/BUMedia.tsx | 2 + src/components/BU/Milestones/BUMilestones.tsx | 7 +- src/components/BU/Team/BUTeam.tsx | 4 +- src/components/Challenges/ChallengeList.tsx | 7 +- src/components/Jobs/JobList.tsx | 10 +- 8 files changed, 127 insertions(+), 67 deletions(-) create mode 100644 public/icons/show-more.svg diff --git a/public/icons/show-more.svg b/public/icons/show-more.svg new file mode 100644 index 0000000..2c0c336 --- /dev/null +++ b/public/icons/show-more.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/BU/About/BUAbout.tsx b/src/components/BU/About/BUAbout.tsx index 242eaad..8fb499e 100644 --- a/src/components/BU/About/BUAbout.tsx +++ b/src/components/BU/About/BUAbout.tsx @@ -1,4 +1,6 @@ +import { breakpoints } from '@/configs/ui.configs' import styled from '@emotion/styled' +import { useState } from 'react' import BUSection from '../BUSection' type Props = { @@ -6,13 +8,22 @@ type Props = { } const BUAbout = ({ data }: Props) => { + const [showMore, setShowMore] = useState(false) + + const handleShowMore = () => { + setShowMore(!showMore) + } + return ( -

{data?.description}

+ {data?.description} + + {'show-more'} + } /> @@ -25,8 +36,35 @@ const Container = styled.div` flex-direction: column; padding: 0 16px; - p { + @media (max-width: ${breakpoints.md}px) { + padding: 0 8px; + } +` + +const Paragraph = styled.p<{ showMore: boolean }>` + @media (max-width: ${breakpoints.md}px) { padding-top: 24px; + display: ${({ showMore }) => (showMore ? 'block' : '-webkit-box')}; + -webkit-box-orient: vertical; + -webkit-line-clamp: 7; + overflow: hidden; + } +` + +const ShowMore = styled.button` + background: transparent; + margin-top: 12px; + display: flex; + padding: 9px 12px; + box-sizing: border-box; + justify-content: center; + align-items: center; + border-radius: 999px; + background: #f2f2f2; + border: none; + + @media (min-width: ${breakpoints.md}px) { + display: none; } ` diff --git a/src/components/BU/BUHero.tsx b/src/components/BU/BUHero.tsx index bc78549..034c528 100644 --- a/src/components/BU/BUHero.tsx +++ b/src/components/BU/BUHero.tsx @@ -38,59 +38,61 @@ export const BUHero = ({ data }: Props) => { - - - - - - - - - - - - - -
Development statusVertical
{data?.devStatus}{data?.vertical}
- - - - - - - - - - - - - -
AchievementsFounders
{data?.achievements}{data?.founders}
- {data?.description} - - - - - - - - - - - - - -
Connect:Programme lead:
- {data?.connect?.map((item: any) => ( - - {item?.label} - - ))} - {data?.lead}
+
+ + + + + + + + + + + + + +
Development statusVertical
{data?.devStatus}{data?.vertical}
+ + + + + + + + + + + + + +
AchievementsFounders
{data?.achievements}{data?.founders}
+ {data?.description} + + + + + + + + + + + + + +
Connect:Programme lead:
+ {data?.connect?.map((item: any) => ( + + {item?.label} + + ))} + {data?.lead}
+
{data?.website && ( @@ -287,6 +289,10 @@ const Content = styled.div` } table { + margin-bottom: 16px; + } + + table:last-of-type { margin-bottom: 0; } @@ -295,9 +301,10 @@ const Content = styled.div` font-size: 14px; padding: 16px 0 8px 0; } - } - @media (max-width: ${breakpoints.md}px) { + tbody { + } + padding-bottom: 80px; button { diff --git a/src/components/BU/Media/BUMedia.tsx b/src/components/BU/Media/BUMedia.tsx index 99f3dd2..1753437 100644 --- a/src/components/BU/Media/BUMedia.tsx +++ b/src/components/BU/Media/BUMedia.tsx @@ -65,6 +65,8 @@ const Container = styled.div` padding: 0 16px; @media (max-width: ${breakpoints.md}px) { + padding: 0 8px; + & > div > div { border-bottom: 0; margin-bottom: 8px; diff --git a/src/components/BU/Milestones/BUMilestones.tsx b/src/components/BU/Milestones/BUMilestones.tsx index d984d9a..db3a247 100644 --- a/src/components/BU/Milestones/BUMilestones.tsx +++ b/src/components/BU/Milestones/BUMilestones.tsx @@ -38,6 +38,10 @@ const Container = styled.div` display: flex; flex-direction: column; padding: 0 16px; + + @media (max-width: ${breakpoints.md}px) { + padding: 0 8px; + } ` const ScrollableContainer = styled.div` @@ -54,8 +58,9 @@ const ScrollableContainer = styled.div` } @media (max-width: ${breakpoints.md}px) { - width: 100vw; + width: calc(100vw - 8px); margin-top: 8px; + margin-left: -8px; } ` diff --git a/src/components/BU/Team/BUTeam.tsx b/src/components/BU/Team/BUTeam.tsx index abd9d0c..63cf01a 100644 --- a/src/components/BU/Team/BUTeam.tsx +++ b/src/components/BU/Team/BUTeam.tsx @@ -76,6 +76,8 @@ const Container = styled.div` padding: 0 16px; @media (max-width: ${breakpoints.md}px) { + padding: 0 8px; + & > div > div { border-bottom: 0; } @@ -85,7 +87,7 @@ const Container = styled.div` } h3 { - margin-top: 8px; + margin-bottom: 8px; font-size: 22px; line-height: 122%; } diff --git a/src/components/Challenges/ChallengeList.tsx b/src/components/Challenges/ChallengeList.tsx index 917ba65..4158f80 100644 --- a/src/components/Challenges/ChallengeList.tsx +++ b/src/components/Challenges/ChallengeList.tsx @@ -108,15 +108,10 @@ const NoChallenges = styled.p` text-decoration: none; ` -// const Mark = styled(Image)` -// @media (max-width: ${breakpoints.md}px) { -// display: none; -// } -// ` - const CustomBox = styled(Box)` @media (max-width: ${breakpoints.md}px) { margin-bottom: 80px; + padding: 0 8px; } ` diff --git a/src/components/Jobs/JobList.tsx b/src/components/Jobs/JobList.tsx index 7fac0a2..ecb080f 100644 --- a/src/components/Jobs/JobList.tsx +++ b/src/components/Jobs/JobList.tsx @@ -27,7 +27,7 @@ const JobList = ({ } return ( - + {Object.entries(jobs) .filter(([businessUnit, _]) => !activeBUs?.length ? true : activeBUs.includes(businessUnit), @@ -46,7 +46,7 @@ const JobList = ({ ))} - + ) } @@ -100,4 +100,10 @@ const NoJobs = styled.p` text-decoration: none; ` +const CustomBox = styled(Box)` + @media (max-width: ${breakpoints.md}px) { + padding: 0 8px; + } +` + export default JobList