feat: RWD homepage

bnb-chain · Aug 28, 2024 · 5041716 · 5041716
1 parent b90b3fa
commit 5041716
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 41 deletions.
diff --git a/src/components/home/Banner.tsx b/src/components/home/Banner.tsx
@@ -26,7 +26,8 @@ export const Banner = () => {
     <Container
       bg={`linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)),
     url('${bgImage}')
-      no-repeat center center`}
+      no-repeat`}
+      bgSize="cover"
     >
       <BigImageBg>
         <Title>
@@ -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
@@ -23,31 +23,38 @@ 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) => {
           const imageUrl = CATE_IMAGE[index];
           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
@@ -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
@@ -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
@@ -35,20 +35,18 @@ export const Trending = () => {
   // console.log('trendingList', trendingList);
 
   return (
-    <Container>
+    <Box w="100%" px={['30px', null, '0px']} maxW="1200px">
       <Title as="h2">Trending Images</Title>
 
       <MindPressMasmonry
         hasMore={hasNextPage}
         list={trendingList}
         handleLoadMore={handleNextPage}
       />
-    </Container>
+    </Box>
   );
 };
 
-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
@@ -97,6 +97,7 @@ const Search: React.FC<IProps> = ({
         bg="#35363C"
         boxShadow="0px 4px 24px rgba(0, 0, 0, 0.08)"
         minWidth={[0, 230, 230]}
+        w="100%"
       >
         <Box
           borderRadius={8}
@@ -110,7 +111,7 @@ const Search: React.FC<IProps> = ({
             onConfirm={setSearchKw}
             onReset={() => setSearchKw('')}
             hideBg
-            style={{ width, height }}
+            style={{ height }}
           />
         </Box>
 
@@ -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
@@ -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
@@ -12,13 +12,9 @@ const Home = () => {
     <Container flexDirection={'column'} alignItems={'center'}>
       <Banner />
 
-      <Box mt="40px" mb="40px">
-        <CateList />
-      </Box>
+      <CateList />
 
-      <Box w="1200px" ml="auto" mr="auto">
-        <Trending />
-      </Box>
+      <Trending />
 
       <Links />
 

diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx
@@ -14,7 +14,7 @@ const Search = () => {
   const category = useGetCategory(Number(c));
 
   return (
-    <Container>
+    <Box px="30px" maxW="1200px" mt="40px">
       <Keyword>{kw || category?.name}</Keyword>
 
       {kw && <Kw kw={kw} />}
@@ -28,19 +28,12 @@ const Search = () => {
           />
         </Box>
       )} */}
-    </Container>
+    </Box>
   );
 };
 
 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;