From 360d6440faa4e43959a83e961ada6769ada7512a Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Sun, 18 Aug 2024 19:19:32 -0400 Subject: [PATCH 1/4] fix: Inconsistent column spacing on the homepage --- .../Cards/SurfaceCards/SurfaceCardBase.tsx | 1 + apps/web/src/pages/index.tsx | 58 ++++++++----------- 2 files changed, 25 insertions(+), 34 deletions(-) diff --git a/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx b/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx index a25c4a139..9736abccb 100644 --- a/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx +++ b/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx @@ -16,6 +16,7 @@ export const SurfaceCardBase: FC = function ({ className={` dark:bg-neutral-850 ${truncateText ? "truncate" : ""} + h-28 rounded-md border border-border-light diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 26b8da521..4fd2f1b69 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -28,8 +28,6 @@ import { const LATEST_ITEMS_LENGTH = 5; const DAILY_STATS_TIMEFRAME = "15d"; -const CARD_HEIGHT = "sm:h-28"; - const Home: NextPage = () => { const router = useRouter(); const { @@ -208,20 +206,14 @@ const Home: NextPage = () => { {Array(LATEST_ITEMS_LENGTH) .fill(0) .map((_, i) => ( -
- -
+ ))} ) : ( ({ id: b.hash, - element: ( -
- -
- ), + element: , }))} /> )} @@ -247,9 +239,7 @@ const Home: NextPage = () => { {Array(LATEST_ITEMS_LENGTH) .fill(0) .map((_, i) => ( -
- -
+ ))} ) : ( @@ -257,21 +247,20 @@ const Home: NextPage = () => { items={transactions.map((tx) => ({ id: tx.hash, element: ( -
- -
+ ), }))} /> @@ -297,9 +286,7 @@ const Home: NextPage = () => { {Array(LATEST_ITEMS_LENGTH) .fill(0) .map((_, i) => ( -
- -
+ ))} ) : ( @@ -307,9 +294,12 @@ const Home: NextPage = () => { items={blobs.map((b) => ({ id: b.versionedHash, element: ( -
- -
+ ), }))} /> From ba2655d91b237e1e4b6f3d957dd2371ad3132422 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Sun, 18 Aug 2024 19:20:05 -0400 Subject: [PATCH 2/4] chore: update changeset --- .changeset/swift-dots-happen.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/swift-dots-happen.md diff --git a/.changeset/swift-dots-happen.md b/.changeset/swift-dots-happen.md new file mode 100644 index 000000000..27f8baece --- /dev/null +++ b/.changeset/swift-dots-happen.md @@ -0,0 +1,5 @@ +--- +"@blobscan/web": patch +--- + +Fixed inconsistent column spacing on the homepage From 9b57dc48ceec3bb078897aca517a689d0be5d797 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Tue, 27 Aug 2024 19:52:38 -0400 Subject: [PATCH 3/4] refactor: Add className prop to BlobCard, BlobTransactionCard, and BlockCard components --- .../Cards/SurfaceCards/BlobCard.tsx | 4 ++- .../SurfaceCards/BlobTransactionCard.tsx | 6 ++++- .../Cards/SurfaceCards/BlockCard.tsx | 4 ++- .../Cards/SurfaceCards/SurfaceCardBase.tsx | 1 - apps/web/src/pages/index.tsx | 25 ++++++++++++++++--- 5 files changed, 32 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx index a6972bbea..406e82fcb 100644 --- a/apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx +++ b/apps/web/src/components/Cards/SurfaceCards/BlobCard.tsx @@ -18,12 +18,14 @@ type BlobCardProps = Partial<{ >; transactions: { rollup: Rollup | null }[]; compact?: boolean; + className?: string; }>; const BlobCard: FC = ({ blob: { versionedHash, commitment, size, dataStorageReferences, proof } = {}, transactions, compact, + className, }) => { const breakpoint = useBreakpoint(); const isCompact = @@ -33,7 +35,7 @@ const BlobCard: FC = ({ breakpoint === "default"; return ( - +
{versionedHash ? (
diff --git a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx index 04a1d9432..110c0938b 100644 --- a/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx +++ b/apps/web/src/components/Cards/SurfaceCards/BlobTransactionCard.tsx @@ -42,6 +42,7 @@ type BlobTransactionCardProps = Partial<{ "versionedHash" | "index" | "size" >[]; compact?: boolean; + className?: string; }>; const TableCol: FC<{ children: React.ReactNode }> = function ({ children }) { @@ -69,6 +70,7 @@ const BlobTransactionCard: FC = function ({ } = {}, blobs: blobsOnTx, compact, + className, }) { const [opened, setOpened] = useState(false); const breakpoint = useBreakpoint(); @@ -83,7 +85,9 @@ const BlobTransactionCard: FC = function ({ return (
{hash ? ( diff --git a/apps/web/src/components/Cards/SurfaceCards/BlockCard.tsx b/apps/web/src/components/Cards/SurfaceCards/BlockCard.tsx index 0f86d3523..a55094bd8 100644 --- a/apps/web/src/components/Cards/SurfaceCards/BlockCard.tsx +++ b/apps/web/src/components/Cards/SurfaceCards/BlockCard.tsx @@ -13,6 +13,7 @@ import { CardField } from "../Card"; import { SurfaceCardBase } from "./SurfaceCardBase"; type BlockCardProps = { + className?: string; block: { hash: string; number: number; @@ -28,6 +29,7 @@ type BlockCardProps = { const BlockCard: FC> = function ({ block: { blobGasPrice, blobGasUsed, number, timestamp, transactions } = {}, + className, }) { const hasOneTx = transactions?.length === 1; const blobCount = useMemo( @@ -40,7 +42,7 @@ const BlockCard: FC> = function ({ const hasOneBlob = blobCount === 1; return ( - +
{number ? ( diff --git a/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx b/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx index 9736abccb..a25c4a139 100644 --- a/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx +++ b/apps/web/src/components/Cards/SurfaceCards/SurfaceCardBase.tsx @@ -16,7 +16,6 @@ export const SurfaceCardBase: FC = function ({ className={` dark:bg-neutral-850 ${truncateText ? "truncate" : ""} - h-28 rounded-md border border-border-light diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 586543f4a..b95b944b2 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -27,6 +27,7 @@ import { const LATEST_ITEMS_LENGTH = 5; const DAILY_STATS_TIMEFRAME = "15d"; +const CARD_HEIGHT = "h-28"; const Home: NextPage = () => { const router = useRouter(); @@ -207,14 +208,20 @@ const Home: NextPage = () => { {Array(LATEST_ITEMS_LENGTH) .fill(0) .map((_, i) => ( - + ))}
) : ( ({ id: b.hash, - element: , + element: ( + + ), }))} /> )} @@ -241,7 +248,11 @@ const Home: NextPage = () => { {Array(LATEST_ITEMS_LENGTH) .fill(0) .map((_, i) => ( - + ))}
) : ( @@ -250,6 +261,7 @@ const Home: NextPage = () => { id: tx.hash, element: ( { {Array(LATEST_ITEMS_LENGTH) .fill(0) .map((_, i) => ( - + ))}
) : ( @@ -302,6 +318,7 @@ const Home: NextPage = () => { transactions={[b.tx]} compact key={b.versionedHash} + className={CARD_HEIGHT} /> ), }))} From b1f22307e6eff98180c512b9bdad966c9c892675 Mon Sep 17 00:00:00 2001 From: Luis Herasme Date: Tue, 27 Aug 2024 20:02:31 -0400 Subject: [PATCH 4/4] feat: Update CARD_HEIGHT to use responsive class --- apps/web/src/pages/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index b95b944b2..0c732752d 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -27,7 +27,8 @@ import { const LATEST_ITEMS_LENGTH = 5; const DAILY_STATS_TIMEFRAME = "15d"; -const CARD_HEIGHT = "h-28"; + +const CARD_HEIGHT = "sm:h-28"; const Home: NextPage = () => { const router = useRouter();