From 5041716765ea490f0bf254d677b87efe6facc9ca Mon Sep 17 00:00:00 2001 From: ybgbob Date: Wed, 28 Aug 2024 17:09:48 +0800 Subject: [PATCH] feat: RWD homepage --- src/components/home/Banner.tsx | 8 +++++--- src/components/home/CateList.tsx | 21 ++++++++++++++------- src/components/home/Disclaimer.tsx | 2 +- src/components/home/Links.tsx | 26 ++++++++++++++++++-------- src/components/home/Trending.tsx | 6 ++---- src/components/search-box/index.tsx | 5 +++-- src/components/ui/masmonry/index.tsx | 2 +- src/pages/Home.tsx | 8 ++------ src/pages/Search.tsx | 11 ++--------- 9 files changed, 48 insertions(+), 41 deletions(-) diff --git a/src/components/home/Banner.tsx b/src/components/home/Banner.tsx index a005ccd..8b66a30 100644 --- a/src/components/home/Banner.tsx +++ b/src/components/home/Banner.tsx @@ -26,7 +26,8 @@ export const Banner = () => { @@ -40,8 +41,8 @@ export const Banner = () => { The leading decentralized marketplace for borderless creativity. </Desc> - <Box w="800px" mt="40px" ml="auto" mr="auto"> - <Search width="800px" /> + <Box w={['70%', '600px', '800px']} mt="40px" ml="auto" mr="auto"> + <Search width="100%" /> {cates && ( <Flex @@ -52,6 +53,7 @@ export const Banner = () => { gap="12px" alignItems="center" justifyContent="center" + flexWrap={['wrap', null, 'nowrap']} > <Box>Trending:</Box> {cates.slice(0, 4).map((category) => { diff --git a/src/components/home/CateList.tsx b/src/components/home/CateList.tsx index 1af1b7b..27b5692 100644 --- a/src/components/home/CateList.tsx +++ b/src/components/home/CateList.tsx @@ -23,7 +23,13 @@ export const CateList = () => { } return ( - <CateContainer> + <Flex + my={['20px', null, '40px']} + px={['30px', null, '0px']} + justifyContent={['space-evenly', null, 'space-between']} + gap={['12px', null, '24px']} + flexWrap={['wrap', 'wrap', 'nowrap']} + > {cates .filter((c) => CATE_ID.includes(c.id)) .map((category, index) => { @@ -31,23 +37,24 @@ export const CateList = () => { return ( <CateItem key={category.id} + minWidth="0" bg={`linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(${imageUrl}) center center`} bgSize="cover" to={`/search?c=${category.id}`} + flex={[ + '1 0 calc(49% - 10px)', + '1 0 calc(33.33% - 30px)', + '1 1 calc(100% / 6 - 10px)', + ]} > {category.name} </CateItem> ); })} - </CateContainer> + </Flex> ); }; -const CateContainer = styled(Flex)` - justify-content: space-between; - gap: 24px; -`; - const CateItem = styled(MPLink)` color: #f7f7f8; width: 180px; diff --git a/src/components/home/Disclaimer.tsx b/src/components/home/Disclaimer.tsx index ff7ec6b..1d64856 100644 --- a/src/components/home/Disclaimer.tsx +++ b/src/components/home/Disclaimer.tsx @@ -3,7 +3,7 @@ import { Box } from '@totejs/uikit'; export const Disclaimer = () => { return ( - <Box w="1200px" my="20px" mx="auto" pb="80px"> + <Box my="20px" px="30px" pb="80px" maxW="1200px"> <Box fontSize="20px" fontWeight={700} color="#F7F7F8" as="h3" mb="8px"> Disclaimer </Box> diff --git a/src/components/home/Links.tsx b/src/components/home/Links.tsx index c2edba6..d8bfcf5 100644 --- a/src/components/home/Links.tsx +++ b/src/components/home/Links.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/styled'; -import { Box, Flex } from '@totejs/uikit'; +import { Box, Flex, theme } from '@totejs/uikit'; import CopyrightIcon from '../svgIcon/CopyrightIcon'; import { LockIcon } from '../svgIcon/LockIcon'; import StorageIcon from '../svgIcon/StorageIcon'; @@ -13,14 +13,21 @@ export const Links = () => { flexDirection={'column'} gap={16} py="60px" + px="30px" mt="20px" mb="20px" mx="auto" + maxW="1200px" > <TitleCon mb="30px"> <CardTitle>What Makes Us Different?</CardTitle> </TitleCon> - <CardCon gap={24}> + + <Flex + gap={24} + flexWrap={['wrap', 'wrap', 'nowrap']} + justifyContent="space-between" + > <CardItem gap={16} flexDirection={'column'}> <Box className="icon"> <StorageIcon w={32} h={32} /> @@ -61,7 +68,7 @@ export const Links = () => { Web3 marketplace. </Box> </CardItem> - </CardCon> + </Flex> </Flex> ); }; @@ -74,12 +81,15 @@ const CardTitle = styled.div` color: #ffffff; `; -const CardCon = styled(Flex)` - /* align-items: stretch; */ -`; - const CardItem = styled(Flex)` - width: 282px; + flex: 1 0 calc(50% - 10px); + @media (min-width: 768px) { + flex: 1 0 calc(24% - 10px); + } + @media (min-width: 1200px) { + flex: 1; + } + min-width: 0; border-radius: 8px; color: #c4c5cb; font-size: 14px; diff --git a/src/components/home/Trending.tsx b/src/components/home/Trending.tsx index 7e13fd6..814e3da 100644 --- a/src/components/home/Trending.tsx +++ b/src/components/home/Trending.tsx @@ -35,7 +35,7 @@ export const Trending = () => { // console.log('trendingList', trendingList); return ( - <Container> + <Box w="100%" px={['30px', null, '0px']} maxW="1200px"> <Title as="h2">Trending Images { list={trendingList} handleLoadMore={handleNextPage} /> - + ); }; -const Container = styled(Box)``; - const Title = styled(Box)` margin-bottom: 40px; color: #f7f7f8; diff --git a/src/components/search-box/index.tsx b/src/components/search-box/index.tsx index dcff14c..23c7f23 100644 --- a/src/components/search-box/index.tsx +++ b/src/components/search-box/index.tsx @@ -97,6 +97,7 @@ const Search: React.FC = ({ bg="#35363C" boxShadow="0px 4px 24px rgba(0, 0, 0, 0.08)" minWidth={[0, 230, 230]} + w="100%" > = ({ onConfirm={setSearchKw} onReset={() => setSearchKw('')} hideBg - style={{ width, height }} + style={{ height }} /> @@ -203,7 +204,7 @@ const Container = styled.div` display: flex; justify-content: center; align-items: center; - width: 420px; + /* width: 420px; */ `; const NoDataCon = styled(Flex)` diff --git a/src/components/ui/masmonry/index.tsx b/src/components/ui/masmonry/index.tsx index 8f671f5..2bb0d06 100644 --- a/src/components/ui/masmonry/index.tsx +++ b/src/components/ui/masmonry/index.tsx @@ -83,7 +83,7 @@ const Card = styled(Box)` const MasmonryContainer = styled(Box)` position: relative; - width: 1200px; + width: 100%; margin-left: auto; margin-right: auto; `; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2b28989..f9fb9ad 100755 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -12,13 +12,9 @@ const Home = () => { - - - + - - - + diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx index 720b526..32fb2b0 100644 --- a/src/pages/Search.tsx +++ b/src/pages/Search.tsx @@ -14,7 +14,7 @@ const Search = () => { const category = useGetCategory(Number(c)); return ( - + {kw || category?.name} {kw && } @@ -28,19 +28,12 @@ const Search = () => { /> )} */} - + ); }; export default Search; -const Container = styled(Box)` - width: 1200px; - margin-left: auto; - margin-right: auto; - margin-top: 40px; -`; - const Keyword = styled(Flex)` color: #f7f7f8; font-size: 32px;