Merge pull request #74 from penumbra-zone/ui-block-page

updated `block/[HEIGHT]` page and ABCIEventsTable to match basic responsive design updates.
penumbra-zone · Mar 13, 2024 · a9426fd · a9426fd
2 parents ce34ad1 + b4020e6
commit a9426fd
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/src/app/block/[ht]/page.tsx b/src/app/block/[ht]/page.tsx
@@ -49,7 +49,7 @@ const Page : FC<PageProps> = ({ params }) => {
         <div>
           {blockData ? (
           <div className="flex flex-col gap-5 pt-5 items-center">
-            <h1 className="sm:text-2xl font-bold">Block Summary</h1>
+            <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
             <div className="sm:w-11/12 w-full">
               <Block blockData={blockData}/>
             </div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -78,8 +78,8 @@
 @layer utilities {
   .xs-container {
     @media (max-width: 639px) {
-      padding-left: 1rem;
-      padding-right: 1rem;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
     }
   }
 }
diff --git a/src/components/ABCIEventsTable/columns.tsx b/src/components/ABCIEventsTable/columns.tsx
@@ -11,26 +11,26 @@ export type ABCIEventsColumns = Record<number, {
 export const columns : Array<ColumnDef<ABCIEventsColumns>> = [
   {
     accessorKey: "type",
-    header: () => <div className="font-semibold text-gray-800 text-center sm:text-lg text-sm">Type</div>,
+    header: () => <div className="font-semibold text-gray-800 text-center sm:text-base text-sm">Type</div>,
     cell: ({ getValue }) => {
       const abciType = getValue() as string;
-      return <pre className="text-center">{abciType}</pre>;
+      return <pre className="text-center sm:whitespace-normal whitespace-pre-wrap sm:break-normal break-all sm:w-auto sm:text-sm text-xs">{abciType}</pre>;
     },
   },
   {
     accessorKey: "key",
-    header: () => <div className="font-semibold text-gray-800 text-center sm:text-lg text-sm">Key</div>,
+    header: () => <div className="font-semibold text-gray-800 text-center sm:text-base text-sm">Key</div>,
     cell: ({ getValue }) => {
       const abciKey = getValue() as string;
-      return <pre className="text-center">{abciKey}</pre>;
+      return <pre className="sm:whitespace-normal whitespace-pre-wrap sm:break-normal break-all text-center sm:text-sm text-xs">{abciKey}</pre>;
     },
   },
   {
     accessorKey: "value",
-    header: () => <div className="font-semibold text-gray-800 text-center sm:text-lg text-sm">Value</div>,
+    header: () => <div className="font-semibold text-gray-800 text-center sm:text-base text-sm">Value</div>,
     cell: ({ getValue }) => {
       const abciValue : string = getValue() as string | null ?? "None";
-      return <pre className="text-center">{abciValue}</pre>;
+      return <pre className="text-center break-all whitespace-pre-wrap sm:w-auto w-[120px] sm:text-sm text-xs">{abciValue}</pre>;
     },
   },
 ];
diff --git a/src/components/Block/index.tsx b/src/components/Block/index.tsx
@@ -13,27 +13,25 @@ const Block : FC<BlockEventProps> = ({ blockData }) => {
   const abciEvents = blockData.events;
 
   return (
-    <div className="bg-white rounded-sm">
-      <div className="flex flex-wrap justify-between p-5 gap-y-10 w-full">
-        <div className="flex justify-start w-full">
-          <p className="w-1/6">Block Height</p>
-          <pre>{blockData.height.toString()}</pre>
+    <div className="bg-white rounded-sm shadow-md">
+      <div className="flex flex-wrap justify-between sm:p-5 p-2 sm:gap-y-10 gap-y-5 w-full">
+        <div className="flex flex-wrap justify-start w-full">
+          <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
+          <pre className="sm:w-0 w-full">{blockData.height.toString()}</pre>
         </div>
-        <div className="flex justify-start w-full">
-          <p className="w-1/6">Timestamp</p>
-          <pre>{blockData.created_at}</pre>
+        <div className="flex flex-wrap justify-start w-full">
+          <p className="w-1/6 font-semibold">Timestamp</p>
+          <pre className="sm:w-0 w-full">{blockData.created_at}</pre>
         </div>
-        <div className="flex justify-start w-full">
-          <p className="w-1/6">Transactions</p>
+        <div className="flex justify-start flex-wrap w-full">
+          <p className="sm:w-1/6 w-full font-bold">Transactions</p>
           {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
-          {blockData.tx_results.map(({ tx_hash }, i) => (
-            // <div key={i} className="w-full">
-              <Link href={`/transaction/${tx_hash}`} key={i}><pre className="underline break-all whitespace-pre-wrap">{tx_hash}</pre></Link>
-            // </div>
-          ))}
+          {blockData.tx_results.length !== 0 ? blockData.tx_results.map(({ tx_hash }, i) => (
+              <Link href={`/transaction/${tx_hash}`} key={i}><pre className="underline sm:max-w-full max-w-[200px] overflow-hidden overflow-ellipsis sm:text-base">{tx_hash}</pre></Link>
+          )) : <p className="sm:w-0 w-full overflow-hidden text-ellipsis">None</p>}
         </div>
         <div className="flex flex-col items-center gap-5 w-full">
-          <p className="font-semibold">Block Event Attributes</p>
+          <p className="font-bold text-base">Block Event Attributes</p>
           <ABCIEventsTable className="w-full" data={abciEvents}/>
         </div>
       </div>