feat: mobile layout fixed

Opty1712 · Jul 31, 2022 · 2e94f80 · 2e94f80 · vercel · Jul 31, 2022
1 parent df6336c
commit 2e94f80
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 55 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -29,18 +29,17 @@ export default class MyDocument extends Document<{
           />
           {this.props.emotionStyleTags}
         </Head>
-        <body>
-          <div
-            style={{
-              backgroundImage: `url(${background})`,
-              height: '100vh',
-              backgroundSize: 'cover',
-              backgroundPosition: 'center'
-            }}
-          >
-            <Main />
-            <NextScript />
-          </div>
+        <body
+          style={{
+            backgroundImage: `url(${background})`,
+            height: '100vh',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundAttachment: 'fixed'
+          }}
+        >
+          <Main />
+          <NextScript />
         </body>
       </Html>
     );

diff --git a/src/containers/Container.tsx b/src/containers/Container.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import { Box } from '@mui/material';
 import { useAccount } from '../context';
 import { Results, Search, Wallet } from './components';
@@ -17,23 +18,8 @@ export const NFTContainer = () => {
   } = useSearch(account);
 
   return (
-    <Box
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        maxHeight: '100vh'
-      }}
-    >
-      <Box
-        style={{
-          display: 'flex',
-          width: 'calc(100% - 80px)',
-          justifyContent: 'space-between',
-          alignItems: 'stretch',
-          paddingTop: '40px',
-          margin: '0 40px'
-        }}
-      >
+    <Box className={rootStyle}>
+      <Box className={headerStyle}>
         {account ? (
           <Search
             search={search}
@@ -50,16 +36,7 @@ export const NFTContainer = () => {
       </Box>
 
       {account && search.length > 2 ? (
-        <Box
-          style={{
-            width: 'calc(100% - 80px)',
-            margin: '40px',
-            overflow: 'auto',
-            background: '#fff',
-            borderRadius: '5px',
-            boxSizing: 'border-box'
-          }}
-        >
+        <Box className={resultStyle}>
           <Results result={searchResults} isLoading={isLoading} />
         </Box>
       ) : (
@@ -68,3 +45,39 @@ export const NFTContainer = () => {
     </Box>
   );
 };
+
+const headerStyle = css`
+  display: flex;
+  width: calc(100% - 80px);
+  justify-content: space-between;
+  align-items: stretch;
+  padding-top: 40px;
+  margin: 0 40px;
+
+  @media (max-width: 600px) {
+    display: block;
+  }
+`;
+
+const rootStyle = css`
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+
+  @media (max-width: 600px) {
+    max-height: inherit;
+  }
+`;
+
+const resultStyle = css`
+  width: calc(100% - 80px);
+  margin: 40px;
+  overflow: auto;
+  background: #fff;
+  border-radius: 5px;
+  box-sizing: border-box;
+
+  @media (max-width: 600px) {
+    overflow: inherit;
+  }
+`;
diff --git a/src/containers/components/Search.tsx b/src/containers/components/Search.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import { Box, TextField } from '@mui/material';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
@@ -23,16 +24,7 @@ export const Search = memo<SearchParams>(
 
     return (
       <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Box
-          style={{
-            background: '#fff',
-            borderRadius: '5px',
-            padding: '20px',
-            boxSizing: 'border-box',
-            width: '100%',
-            maxWidth: '50%'
-          }}
-        >
+        <Box className={searchStyle}>
           <TextField
             label="Name"
             onChange={handleSearch}
@@ -68,3 +60,18 @@ export const Search = memo<SearchParams>(
   }
 );
 Search.displayName = nameof(Search);
+
+const searchStyle = css`
+  background: #fff;
+  border-radius: 5px;
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 50%;
+
+  @media (max-width: 600px) {
+    width: 100%;
+    justify-content: flex-start;
+    max-width: 100%;
+  }
+`;
diff --git a/src/containers/components/Wallet/Wallet.tsx b/src/containers/components/Wallet/Wallet.tsx
@@ -1,3 +1,4 @@
+import { css } from '@emotion/css';
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 import LogoutIcon from '@mui/icons-material/Logout';
 import PixIcon from '@mui/icons-material/Pix';
@@ -12,12 +13,7 @@ export const Wallet = memo(() => {
   return (
     <>
       {account ? (
-        <Box
-          style={{
-            display: 'flex',
-            marginLeft: '40px'
-          }}
-        >
+        <Box className={walletStyle}>
           <Box
             style={{
               background: '#fff',
@@ -31,6 +27,7 @@ export const Wallet = memo(() => {
               startIcon={<LogoutIcon />}
               onClick={disconnectWallet}
               variant="contained"
+              className={buttonStyle}
               size="large"
             >
               Disconnect {formatAddress(account)}
@@ -61,6 +58,7 @@ export const Wallet = memo(() => {
           onClick={connectWallet}
           variant="contained"
           size="large"
+          className={buttonStyle}
           startIcon={<AccountBalanceWalletIcon />}
         >
           Connect Wallet
@@ -70,3 +68,20 @@ export const Wallet = memo(() => {
   );
 });
 Wallet.displayName = nameof(Wallet);
+
+const walletStyle = css`
+  display: flex;
+  margin-left: 40px;
+
+  @media (max-width: 600px) {
+    margin-left: 0;
+    margin-top: 40px;
+  }
+`;
+
+const buttonStyle = css`
+  @media (max-width: 600px) {
+    width: 100%;
+    justify-content: flex-start;
+  }
+`;