Table res (#4)

* added responsiveness to list component * added container queris * reorder
damianmarti · Aug 4, 2023 · 0fb8289 · 0fb8289
1 parent e5ceaf0
commit 0fb8289
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 14 deletions.
diff --git a/packages/nextjs/components/attestation/List.tsx b/packages/nextjs/components/attestation/List.tsx
@@ -68,23 +68,23 @@ export const List = () => {
   }, scaffoldConfig.pollingInterval);
 
   return (
-    <div className="flex flex-col justify-center items-center bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] py-10 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
+    <div className="list__container flex flex-col justify-center items-center bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] py-10 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
       <div className="flex justify-center">
         <table className="table table-zebra w-full shadow-lg">
           <thead>
             <tr>
-              <th className="bg-primary text-white">UID</th>
-              <th className="bg-primary text-white">Attester</th>
-              <th className="bg-primary text-white">BuidlGuidl Member</th>
-              <th className="bg-primary text-white">Attested at</th>
+              <th className="bg-primary text-white p-1.5 sml:p-4">UID</th>
+              <th className="bg-primary text-white p-1.5 sml:p-4">Attester</th>
+              <th className="bg-primary text-white p-1.5 sml:p-4 address__container-text">BuidlGuidl Member</th>
+              <th className="bg-primary text-white p-1.5 sml:p-4">Attested at</th>
             </tr>
           </thead>
           {isLoading ? (
             <tbody>
               {[...Array(10)].map((_, rowIndex) => (
                 <tr key={rowIndex} className="bg-base-200 hover:bg-base-300 transition-colors duration-200 h-12">
                   {[...Array(4)].map((_, colIndex) => (
-                    <td className="w-1/4" key={colIndex}>
+                    <td className="w-1/4 p-1 sml:p-4" key={colIndex}>
                       <div className="h-2 bg-gray-200 rounded-full animate-pulse"></div>
                     </td>
                   ))}
@@ -96,26 +96,29 @@ export const List = () => {
               {attestations.map(attestation => {
                 return (
                   <tr key={attestation.id} className="hover text-sm">
-                    <td className="w-1/4">
+                    <td className="w-1/4 p-1 sml:p-4">
                       <a
                         href={`https://optimism.easscan.org/attestation/view/${attestation.id}`}
                         title={attestation.id}
                         target="_blank"
                         rel="noreferrer"
+                        className="flex"
                       >
-                        {attestation.id.slice(0, 20) + "..."}
+                        <span className="list__container--first_row-data">{attestation.id.slice(0, 20)}</span>...
                       </a>
                     </td>
-                    <td className="w-1/4">
+                    <td className="w-1/4 p-1 sml:p-4">
                       <Address address={attestation.attester} size="sm" />
                     </td>
-                    <td className="w-1/4">
+                    <td className="w-1/4 p-1 sml:p-4">
                       <Address
                         address={schemaEncoder.decodeData(attestation.data)[0].value.value.toString()}
                         size="sm"
                       />
                     </td>
-                    <td className="text-right">{new Date(attestation.timeCreated * 1000).toLocaleString()}</td>
+                    <td className="text-right list__container--last_row-data p-1 sml:p-4">
+                      {new Date(attestation.timeCreated * 1000).toLocaleString()}
+                    </td>
                   </tr>
                 );
               })}

diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -77,7 +77,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
 
   return (
     <div className="flex items-center">
-      <div className="flex-shrink-0">
+      <div className="flex-shrink-0 address__container-image">
         {ensAvatar ? (
           // Don't want to use nextJS Image here (and adding remote patterns for the URL)
           // eslint-disable-next-line
@@ -105,7 +105,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
         </span>
       ) : (
         <a
-          className={`ml-1.5 text-${size} font-normal`}
+          className={`ml-1.5 text-${size} font-normal address__container-text`}
           target="_blank"
           href={blockExplorerAddressLink}
           rel="noopener noreferrer"

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
@@ -11,7 +11,7 @@ const Home: NextPage = () => {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree&display=swap" rel="stylesheet" />
       </MetaHeader>
-      <div className="grid lg:grid-cols-2 flex-grow" data-theme="exampleUi">
+      <div className="grid xl:grid-cols-2 flex-grow " data-theme="exampleUi">
         <Attest />
         <List />
       </div>

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -30,3 +30,47 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+
+.list__container {
+  container-type: inline-size;
+}
+
+@container (max-width: 670px) {
+  .list__container .list__container--last_row-data {
+    max-width: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@container (max-width: 760px) {
+  .list__container .list__container--first_row-data {
+    width: 47px;
+    display: inline-block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: clip;
+  }
+}
+
+@container (max-width: 610px) {
+  .list__container .list__container--first_row-data {
+    width: 27px;
+  }
+}
+
+@container (max-width: 550px) {
+  .list__container .address__container-text {
+    max-width: 65px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@container (max-width: 400px) {
+  .list__container .address__container-image {
+    display: none;
+  }
+}
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -90,6 +90,10 @@ module.exports = {
   theme: {
     // Extend Tailwind classes (e.g. font-bai-jamjuree, animate-grow)
     extend: {
+      screens: {
+        sml: "560px",
+        xl: "1174px",
+      },
       fontFamily: {
         "bai-jamjuree": ["Bai Jamjuree", "sans-serif"],
       },