Skip to content

Commit fcaa599

Browse files
carlhongcarlhong
committed
chore: update mobile style
1 parent 26d62c2 commit fcaa599

File tree

15 files changed

+97
-84
lines changed

15 files changed

+97
-84
lines changed

‎src/components/Footer/Footer.tsx‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,54 @@ import { Image } from '@heroui/react'
44

55
const Footer: React.FC = () => {
66
return (
7-
<footer className="py-8 mt-auto">
8-
<div className="container mx-auto">
9-
<div className="flex flex-col md:flex-row items-center justify-between gap-6">
10-
<div className="flex items-center gap-7">
11-
<div className="flex items-center text-sm gap-1">
7+
<footer className="py-4 sm:py-6 md:py-8 mt-auto">
8+
<div className="container mx-auto px-4 sm:px-0">
9+
<div className="flex flex-col md:flex-row items-center justify-between gap-4 md:gap-6">
10+
<div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-7">
11+
<div className="flex items-center text-xs sm:text-sm gap-1">
1212
<span className="text-[#97959D]">Funded by</span>
13-
<Image alt="polakdot" src="/images/polakdot.png" width={16} height={16} />
14-
Polkadot Treasury
13+
<Image alt="polakdot" src="/images/polakdot.png" width={16} height={16} className="" />
14+
<span>Polkadot Treasury</span>
1515
</div>
16-
<span className="flex items-center text-sm gap-1">
16+
<span className="flex items-center text-xs sm:text-sm gap-1">
1717
<span className="text-[#97959D]">Developed by </span>
18-
<Image alt="subscan" src="/images/subscan.png" width={16} height={16} />
19-
Subscan Team
18+
<Image alt="subscan" src="/images/subscan.png" width={16} height={16} className="" />
19+
<span>Subscan Team</span>
2020
</span>
2121
</div>
2222

23-
<div className="flex items-center space-x-4">
23+
<div className="flex items-center space-x-4 mt-3 md:mt-0">
2424
<Link
2525
className="text-black"
2626
href="https://github.com/subscan-explorer/subscan-essentials-ui-react"
2727
target="_blank"
2828
rel="noopener noreferrer">
29-
<div className="transition-colors">
30-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
29+
<div className="transition-colors hover:text-gray-600">
30+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="sm:w-[24px] sm:h-[24px]">
3131
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
3232
</svg>
3333
</div>
3434
</Link>
3535
<Link className="text-black" href="https://twitter.com/subscan_io" target="_blank" rel="noopener noreferrer">
36-
<div className="transition-colors">
37-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
36+
<div className="transition-colors hover:text-gray-600">
37+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" className="sm:w-[24px] sm:h-[24px]">
3838
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
3939
</svg>
4040
</div>
4141
</Link>
4242
<Link className="text-black" href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">
43-
<div className="transition-colors">
43+
<div className="transition-colors hover:text-gray-600">
4444
<svg
4545
xmlns="http://www.w3.org/2000/svg"
46-
width="24"
47-
height="24"
46+
width="20"
47+
height="20"
4848
viewBox="0 0 24 24"
4949
fill="none"
5050
stroke="currentColor"
5151
strokeWidth="2"
5252
strokeLinecap="round"
53-
strokeLinejoin="round">
53+
strokeLinejoin="round"
54+
className="sm:w-[24px] sm:h-[24px]">
5455
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
5556
<polyline points="22,6 12,13 2,6" />
5657
</svg>

‎src/components/contract/info.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const Component: React.FC<Props> = ({ children, className, contract }) => {
4747
<div>
4848
<div className="mb-2">Contract ABI</div>
4949
<div>
50-
<JsonView value={contract.abi || {}}></JsonView>
50+
<JsonView collapsed={2} value={contract.abi || {}}></JsonView>
5151
</div>
5252
</div>
5353
<div>

‎src/components/home/BlockItem.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,22 +14,22 @@ const BlockItem: React.FC<BlockItemProps> = ({ item }) => {
1414
const hoverBgColor = 'hover:shadow-md'
1515

1616
return (
17-
<div className={`${bgColor} ${hoverBgColor} p-4 rounded-lg mb-4 transition-shadow`}>
18-
<div className="flex justify-between items-center">
17+
<div className={`${bgColor} ${hoverBgColor} p-3 sm:p-4 rounded-lg mb-2 sm:mb-4 transition-shadow`}>
18+
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center">
1919
<div>
2020
<div className="flex items-center">
21-
<span className="font-medium">Block# </span>
22-
<Link color={getThemeColor(true)} size='md' href={linkHref} className="ml-1 font-semibold">
21+
<span className="font-medium text-sm sm:text-base">Block# </span>
22+
<Link color={getThemeColor(true)} size='md' href={linkHref} className="ml-1 font-semibold text-sm sm:text-base">
2323
{item.block_num}
2424
</Link>
2525
</div>
26-
<div className="text-sm mt-1">
27-
<span className="mr-2">Include</span>
28-
<span className="mx-2">{`${item.extrinsics_count} Extrinsics`}</span>
26+
<div className="text-xs sm:text-sm mt-1">
27+
<span className="mr-1 sm:mr-2">Include</span>
28+
<span className="mx-1 sm:mx-2">{`${item.extrinsics_count} Extrinsics`}</span>
2929
<span className="">{`${item.event_count} Events`}</span>
3030
</div>
3131
</div>
32-
<div className="text-sm text-gray-500">{timeAgo(item.block_timestamp)}</div>
32+
<div className="text-xs sm:text-sm text-gray-500 mt-1 sm:mt-0">{timeAgo(item.block_timestamp)}</div>
3333
</div>
3434
</div>
3535
)

‎src/components/home/BlockList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const BlockList: React.FC<BlockListProps> = ({}) => {
1717
const extrinsicsData = unwrap(data)
1818
const blocks = extrinsicsData?.blocks
1919
return (
20-
<div className='bg-pink-50 rounded-lg p-5'>
21-
<h2 className="text-lg font-semibold mb-4">Substrate Block</h2>
20+
<div className='bg-pink-50 rounded-lg p-3 sm:p-5'>
21+
<h2 className="text-base sm:text-lg font-semibold mb-2 sm:mb-4">Substrate Block</h2>
2222
<Skeleton className="w-full rounded-lg" isLoaded={!isLoading}>
2323
<div>
2424
{_.map(blocks, (block) => (

‎src/components/home/ExtrinsicItem.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,20 @@ const ExtrinsicItem: React.FC<ExtrinsicItemProps> = ({ item }) => {
1515
const hoverBgColor = 'hover:shadow-md'
1616

1717
return (
18-
<div className={`${bgColor} ${hoverBgColor} p-4 rounded-lg mb-4 transition-shadow`}>
19-
<div className="flex justify-between items-center">
18+
<div className={`${bgColor} ${hoverBgColor} p-3 sm:p-4 rounded-lg mb-2 sm:mb-4 transition-shadow`}>
19+
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center">
2020
<div>
2121
<div className="flex items-center">
22-
<span className="font-medium">Extrinsic# </span>
23-
<Link color={getThemeColor(true)} size='md' href={linkHref} className="ml-1 font-semibold">
22+
<span className="font-medium text-sm sm:text-base">Extrinsic# </span>
23+
<Link color={getThemeColor(true)} size='md' href={linkHref} className="ml-1 font-semibold text-sm sm:text-base truncate max-w-[180px] sm:max-w-none">
2424
{item.extrinsic_index}
2525
</Link>
2626
</div>
27-
<div className="text-sm mt-1">
27+
<div className="text-xs sm:text-sm mt-1 truncate">
2828
{`${item.call_module}(${item.call_module_function})`}
2929
</div>
3030
</div>
31-
<div className="text-sm text-gray-500">{timeAgo(item.block_timestamp)}</div>
31+
<div className="text-xs sm:text-sm text-gray-500 mt-1 sm:mt-0">{timeAgo(item.block_timestamp)}</div>
3232
</div>
3333
</div>
3434
)

‎src/components/home/ExtrinsicList.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const ExtrinsicList: React.FC<ExtrinsicListProps> = ({ }) => {
1818
const extrinsicsData = unwrap(data)
1919
const transactions = extrinsicsData?.extrinsics
2020
return (
21-
<div className='bg-pink-50 rounded-lg p-5'>
22-
<h2 className="text-lg font-semibold mb-4">Substrate Extrinsic</h2>
21+
<div className='bg-pink-50 rounded-lg p-3 sm:p-5'>
22+
<h2 className="text-base sm:text-lg font-semibold mb-2 sm:mb-4">Substrate Extrinsic</h2>
2323
<Skeleton className="w-full rounded-lg" isLoaded={!isLoading}>
2424
<div>
2525
{_.map(transactions, (tx) => (
@@ -30,7 +30,6 @@ const ExtrinsicList: React.FC<ExtrinsicListProps> = ({ }) => {
3030
))}
3131
</div>
3232
</Skeleton>
33-
3433
</div>
3534
)
3635
}

‎src/components/home/HomePage.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,20 @@ const HomePage: React.FC = () => {
1414
}
1515
const columns = metadata.enable_evm && metadata.enable_substrate ? 2 : 1
1616
return (
17-
<div className="mx-auto">
18-
<div className={`grid grid-cols-1 gap-6 ${columns === 2 ? 'md:grid-cols-2' : ''}`}>
17+
<div className="mx-auto px-2 sm:px-0">
18+
<div className={`grid grid-cols-1 gap-4 sm:gap-6 ${columns === 2 ? 'lg:grid-cols-2' : ''}`}>
1919
{metadata.enable_substrate && (
2020
<div>
21-
<div className="bg-pink-50 rounded-lg p-5 mb-5">
22-
<div className="mb-4 text-lg font-semibold">Substrate</div>
21+
<div className="bg-pink-50 rounded-lg p-3 sm:p-5 mb-4 sm:mb-5">
22+
<div className="mb-3 sm:mb-4 text-base sm:text-lg font-semibold">Substrate</div>
2323
<div className={`grid gap-4 mb-4 ${columns === 2 ? 'grid-cols-2' : 'grid-cols-4'}`}>
2424
<InfoCard title="Substrate Block" value={formatNumber(metadata.finalized_blockNum)} href="/sub/block" color="text-danger" />
2525
<InfoCard title="Extrinsic" value={formatNumber(metadata.count_extrinsic)} href="/sub/extrinsic" color="text-danger" />
2626
<InfoCard title="Account" value={formatNumber(metadata.total_account)} href="/sub/account" color="text-danger" />
2727
<InfoCard title="Transfer" value={formatNumber(metadata.total_transfer)} href="/sub/transfer" color="text-danger" />
2828
</div>
2929
</div>
30-
<div className={`grid gap-4 grid-cols-1 ${columns === 1 ? 'md:grid-cols-2' : ''}`}>
30+
<div className={`grid gap-4 grid-cols-1 ${columns === 1 ? 'lg:grid-cols-2' : ''}`}>
3131
{columns === 1 && (
3232
<BlockList />
3333
)}
@@ -38,16 +38,16 @@ const HomePage: React.FC = () => {
3838

3939
{metadata.enable_evm && (
4040
<div>
41-
<div className="bg-blue-50 rounded-lg p-5 mb-5">
42-
<div className="mb-4 text-lg font-semibold">PVM</div>
41+
<div className="bg-blue-50 rounded-lg p-3 sm:p-5 mb-4 sm:mb-5">
42+
<div className="mb-3 sm:mb-4 text-base sm:text-lg font-semibold">PVM</div>
4343
<div className={`grid gap-4 mb-4 ${columns === 2 ? 'grid-cols-2' : 'grid-cols-4'}`}>
4444
<InfoCard title="PVM Block" value={metadata.finalized_blockNum} href="/block" />
4545
<InfoCard title="Transaction" value={metadata.total_transaction} href="/tx" />
4646
<InfoCard title="PVM Account" value={metadata.total_evm_account} href="/address" />
4747
<InfoCard title="PVM Contract" value={metadata.total_evm_contract} href="/contract" />
4848
</div>
4949
</div>
50-
<div className={`grid gap-4 grid-cols-1 ${columns === 1 ? 'md:grid-cols-2' : ''}`}>
50+
<div className={`grid gap-4 grid-cols-1 ${columns === 1 ? 'lg:grid-cols-2' : ''}`}>
5151
{columns === 1 && (
5252
<PVMBlockList />
5353
)}

‎src/components/home/InfoCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ interface InfoCardProps {
1111
const InfoCard: React.FC<InfoCardProps> = ({ title, value, href, color = 'pink-100' }) => {
1212
return (
1313
<Link href={href} className='block'>
14-
<div className={`bg-white p-4 rounded-lg hover:shadow-md transition-shadow`}>
15-
<div className="text-zinc-500">{title}</div>
16-
<div className={`${color} mt-1 font-semibold text-xl`}>{value || '-'}</div>
14+
<div className={`bg-white p-2 sm:p-4 rounded-lg hover:shadow-md transition-shadow`}>
15+
<div className="text-zinc-500 text-xs sm:text-sm truncate">{title}</div>
16+
<div className={`${color} mt-1 font-semibold text-base sm:text-xl truncate`}>{value || '-'}</div>
1717
</div>
1818
</Link>
1919
);

‎src/components/home/PVMBlockItem.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@ const PVMBlockItem: React.FC<PVMBlockItemProps> = ({ item }) => {
1515
const hoverBgColor = 'hover:shadow-md'
1616

1717
return (
18-
<div className={`${bgColor} ${hoverBgColor} p-4 rounded-lg mb-4 transition-shadow`}>
19-
<div className="flex justify-between items-center">
18+
<div className={`${bgColor} ${hoverBgColor} p-3 sm:p-4 rounded-lg mb-2 sm:mb-4 transition-shadow`}>
19+
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center">
2020
<div>
2121
<div className="flex items-center">
22-
<span className="font-medium">Block# </span>
23-
<Link size='md' href={linkHref} className="text-blue-600 ml-1 font-semibold">
22+
<span className="font-medium text-sm sm:text-base">Block# </span>
23+
<Link size='md' href={linkHref} className="text-blue-600 ml-1 font-semibold text-sm sm:text-base">
2424
{item.block_num}
2525
</Link>
2626
</div>
27-
<div className="text-sm mt-1">
28-
<span className="mr-2">Include</span>
29-
<span className="mx-2">{`${item.transactions} Transactions`}</span>
27+
<div className="text-xs sm:text-sm mt-1">
28+
<span className="mr-1 sm:mr-2">Include</span>
29+
<span className="mx-1 sm:mx-2">{`${item.transactions} Transactions`}</span>
3030
</div>
3131
</div>
32-
<div className="text-sm text-gray-500">{timeAgo(item.block_timestamp)}</div>
32+
<div className="text-xs sm:text-sm text-gray-500 mt-1 sm:mt-0">{timeAgo(item.block_timestamp)}</div>
3333
</div>
3434
</div>
3535
)

‎src/components/home/PVMBlockList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const PVMBlockList: React.FC<PVMBlockListProps> = ({}) => {
1616
const extrinsicsData = unwrap(data)
1717
const blocks = extrinsicsData?.list
1818
return (
19-
<div className="bg-blue-50 rounded-lg p-5">
20-
<h2 className="text-lg font-semibold mb-4">PVM Block</h2>
19+
<div className="bg-blue-50 rounded-lg p-3 sm:p-5">
20+
<h2 className="text-base sm:text-lg font-semibold mb-2 sm:mb-4">PVM Block</h2>
2121
<Skeleton className="w-full rounded-lg" isLoaded={!isLoading}>
2222
<div>
2323
{_.map(blocks, (block) => (

0 commit comments

Comments
 (0)