Merge pull request #4524 from thematters/fix/billboard-size

fix(billboard): fix responsive issue
thematters · Jun 6, 2024 · f4362c0 · f4362c0
2 parents 3d09a8b + f7ebac5
commit f4362c0
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 44 deletions.
diff --git a/src/components/Billboard/index.tsx b/src/components/Billboard/index.tsx
@@ -7,7 +7,6 @@ import {
   BillboardDialog,
   BillboardExposureTracker,
   Icon,
-  Spinner,
   TextIcon,
 } from '~/components'
 
@@ -34,7 +33,7 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
     cacheTime: 60_000,
   })
 
-  if (!id || isError || !data || !data.contentURI) {
+  if (!id || isError || isLoading || !data || !data.contentURI) {
     return null
   }
 
@@ -43,43 +42,40 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
       {({ openDialog: openBillboardDialog }) => {
         return (
           <div className={styles.billboard}>
-            {isLoading && <Spinner />}
-            {!isLoading && (
-              <>
-                <a
-                  href={data.redirectURI}
-                  target="_blank"
-                  onClick={() =>
-                    analytics.trackEvent('click_billboard', {
-                      id,
-                      type,
-                      target: data.redirectURI,
-                    })
-                  }
-                >
-                  <img src={data.contentURI} alt="ad" />
-                </a>
-                <button
-                  className={styles.button}
-                  type="button"
-                  aria-label={intl.formatMessage({
-                    defaultMessage: "What's this?",
-                    id: '4wOWfp',
-                    description: 'src/components/Billboard/index.tsx',
-                  })}
-                  onClick={openBillboardDialog}
-                >
-                  <TextIcon icon={<Icon icon={IconInfo} />} size={12}>
-                    <FormattedMessage
-                      defaultMessage="What's this?"
-                      id="4wOWfp"
-                      description="src/components/Billboard/index.tsx"
-                    />
-                  </TextIcon>
-                </button>
-                <BillboardExposureTracker id={id} type={type} />
-              </>
-            )}
+            <a
+              href={data.redirectURI}
+              target="_blank"
+              onClick={() =>
+                analytics.trackEvent('click_billboard', {
+                  id,
+                  type,
+                  target: data.redirectURI,
+                })
+              }
+            >
+              <img src={data.contentURI} alt="ad" />
+            </a>
+
+            <button
+              className={styles.button}
+              type="button"
+              aria-label={intl.formatMessage({
+                defaultMessage: "What's this?",
+                id: '4wOWfp',
+                description: 'src/components/Billboard/index.tsx',
+              })}
+              onClick={openBillboardDialog}
+            >
+              <TextIcon icon={<Icon icon={IconInfo} />} size={12}>
+                <FormattedMessage
+                  defaultMessage="What's this?"
+                  id="4wOWfp"
+                  description="src/components/Billboard/index.tsx"
+                />
+              </TextIcon>
+            </button>
+
+            <BillboardExposureTracker id={id} type={type} />
           </div>
         )
       }}

diff --git a/src/components/Billboard/styles.module.css b/src/components/Billboard/styles.module.css
@@ -1,20 +1,34 @@
 .billboard {
-  display: block;
-  max-width: 21.4375rem;
+  max-width: 100%;
+
+  @media (--sm-up) {
+    max-width: 50%;
+  }
+
+  @media (--md-up) {
+    max-width: 100%;
+  }
 
   & a {
     @mixin flex-center-all;
 
-    line-height: 0;
+    position: relative;
+
+    &::after {
+      display: block;
+      padding-bottom: 56.06%;
+      content: '';
+    }
 
     & img {
-      width: 100%;
-      max-height: 10.5rem;
+      @mixin object-fit-cover;
+
       border-radius: 1.25rem;
     }
   }
 
   & .button {
+    margin-top: var(--sp8);
     color: var(--color-grey);
   }
 }