fix: mobile layout

hyochan · Sep 18, 2023 · 1bc65aa · 1bc65aa · vercel · Sep 18, 2023
1 parent 036d3ee
commit 1bc65aa
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 68 deletions.
diff --git a/app/[lang]/(common)/AdFitResponsive.tsx b/app/[lang]/(common)/AdFitResponsive.tsx
@@ -1,38 +1,61 @@
 'use client';
 
-import { useMediaQuery } from "usehooks-ts";
-import AdFit from "./AdFit";
+import {useMediaQuery} from 'usehooks-ts';
+import AdFit from './AdFit';
+import {useEffect, useState} from 'react';
 
-export default function AdFitResponsive({className}: {className?: string}): JSX.Element {
-  const isMobile = useMediaQuery('(max-width: 768px)')
+export default function AdFitResponsive({
+  className,
+}: {
+  className?: string;
+}): JSX.Element {
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const [loaded, setLoaded] = useState(false);
 
-  return <div className={className}>
-    {/* Begin: AdFit */}
-    {!isMobile ? (
-      <div>
-        <AdFit
-          unit="DAN-SEcRVdSHkh05H0jO"
-          height={90}
-          width={728}
-          className="adfit-top"
-          style={{
-            flex: 1,
-          }}
-        />
-      </div>
-    ) : null}
-    {isMobile ? (
-      <div>
-        <AdFit
-          unit="DAN-dAqcoLWvKpYEtbtq"
-          height={100}
-          width={320}
-          className="adfit-top-mobile"
-          style={{
-            flex: 1,
-          }}
-        />
-      </div>
-    ) : null}
-  </div>
-}
+  console.log('isMobile: ', isMobile);
+  console.log('loaded: ', loaded);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoaded(true);
+    }, 100);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [loaded]);
+
+  if (loaded) null;
+
+  return (
+    <div className={className}>
+      {/* Begin: AdFit */}
+      {!isMobile ? (
+        <div>
+          <AdFit
+            unit="DAN-SEcRVdSHkh05H0jO"
+            height={90}
+            width={728}
+            className="adfit-top-mobile"
+            style={{
+              flex: 1,
+            }}
+          />
+        </div>
+      ) : null}
+      {isMobile ? (
+        <div>
+          <AdFit
+            unit="DAN-dAqcoLWvKpYEtbtq"
+            height={100}
+            width={320}
+            className="adfit-top-mobile"
+            style={{
+              flex: 1,
+            }}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/app/[lang]/(home)/Hero/index.tsx b/app/[lang]/(home)/Hero/index.tsx
@@ -19,6 +19,7 @@ import StatsSymbols from './StatsSymbol';
 import StatsUrlCard from './StatsUrlCards';
 import { useMediaQuery } from 'usehooks-ts';
 import AdFit from '../../(common)/AdFit';
+import AdFitResponsive from '../../(common)/AdFitResponsive';
 
 const rootUrl = `${process.env.NEXT_PUBLIC_ROOT_URL}/api`;
 
@@ -115,34 +116,7 @@ function Hero({t, statsInfo}: Props): ReactElement {
           {t.developerPowerMeterDesc}
         </p>
         {/* Begin: AdFit */}
-        {!isMobile ? (
-          <div>
-            <AdFit
-              unit="DAN-SEcRVdSHkh05H0jO"
-              height={90}
-              width={728}
-              className="adfit-top"
-              style={{
-                flex: 1,
-                marginBottom: 40,
-              }}
-            />
-          </div>
-        ) : null}
-        {isMobile ? (
-          <div>
-            <AdFit
-              unit="DAN-dAqcoLWvKpYEtbtq"
-              height={100}
-              width={320}
-              className="adfit-top-mobile"
-              style={{
-                flex: 1,
-                marginBottom: 40,
-              }}
-            />
-          </div>
-        ) : null}
+        <AdFitResponsive className='mb-6'/>
         {/* End: AdFit */}
         {/* Begin: Search Form */}
         <form

diff --git a/app/[lang]/recent-list/page.tsx b/app/[lang]/recent-list/page.tsx
@@ -44,6 +44,7 @@ export default async function Page({
         <H1
           className={clsx(
             'text-[44px] font-bold',
+            'max-[480px]:hidden',
             'max-[560px]:text-[28px]',
             inter.className,
           )}

diff --git a/app/[lang]/stats/page.tsx b/app/[lang]/stats/page.tsx
@@ -17,10 +17,10 @@ export default async function Page({
 
   return (
     <Container t={t}>
-      <div className="max-[480px]:p-6">
+      <div className="max-[480px]:pt-10 max-[480px]:px-6">
         <p className="text-dark dark:text-paper-light">{t.searchUserHint}.</p>
       </div>
-      <AdFitResponsive className='mt-8'/>
+      <AdFitResponsive className="mt-8 max-[480px]:px-6" />
     </Container>
   );
 }
diff --git a/styles/output.css b/styles/output.css
@@ -1151,6 +1151,10 @@ input[type='search']::-webkit-search-decoration,
   margin-left: 1rem;
 }
 
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
 .ml-\[6px\] {
   margin-left: 6px;
 }
@@ -1231,10 +1235,6 @@ input[type='search']::-webkit-search-decoration,
   margin-top: 80px;
 }
 
-.ml-6 {
-  margin-left: 1.5rem;
-}
-
 .flex {
   display: flex;
 }
@@ -2260,6 +2260,10 @@ input[type='search']::-webkit-search-decoration,
     padding: 1.5rem;
   }
 
+  .max-\[480px\]\:p-2 {
+    padding: 0.5rem;
+  }
+
   .max-\[480px\]\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
@@ -2270,6 +2274,18 @@ input[type='search']::-webkit-search-decoration,
     padding-right: 1.5rem;
   }
 
+  .max-\[480px\]\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .max-\[480px\]\:pt-12 {
+    padding-top: 3rem;
+  }
+
+  .max-\[480px\]\:pt-10 {
+    padding-top: 2.5rem;
+  }
+
   .max-\[480px\]\:text-\[28px\] {
     font-size: 28px;
   }