Skip to content

Commit

Permalink
Fix/mobile responsiveness mainnet (#669)
Browse files Browse the repository at this point in the history 
Improve mobile responsiveness of mainnet, contract addresses page
Improve responsiveness of EVM Chain  & IBC channel cards.
Made the Asset table responsive by sticky cols.
Made the footer responsive
Remove dead logics
Correct footer items spacing
  • Loading branch information
@Code-Victor
Code-Victor authored Dec 18, 2023
1 parent 6944606 commit 2ada63c
Show file tree
Hide file tree
Showing 4 changed files with 212 additions and 156 deletions.
245 changes: 132 additions & 113 deletions src/components/evm/assets.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,40 @@ const COLUMNS = [
{ id: "chain", title: "Chain" },
{ id: "denom", title: "Denom" },
{ id: "contract_address", title: "Contract address" },
{ id: "add_token", title: "", headerClassName: "text-right", className: "text-right" },
{
id: "add_token",
title: "",
headerClassName: "text-right",
className: "text-right",
},
];

export default ({ environment = "mainnet" }) => {
const _evm_chains = evm_chains?.[environment] || [];
const _evm_assets = evm_assets?.[environment] || [];

const [chainData, setChainData] = useState(null);
const [assetData, setAssetData] = useState(_evm_assets.find(a => a?.id === (environment === "testnet" ? "uausdc" : "uusdc")));
const [assetData, setAssetData] = useState(
_evm_assets.find(
(a) => a?.id === (environment === "testnet" ? "uausdc" : "uusdc")
)
);

const assets = _evm_assets.filter(a => !assetData || a?.id === assetData.id).flatMap(a => a?.contracts?.map(c => {
return {
...a,
...c,
};
}).filter(a => !chainData || equals_ignore_case(a.chain, chainData.id)) || []);
const assets = _evm_assets
.filter((a) => !assetData || a?.id === assetData.id)
.flatMap(
(a) =>
a?.contracts
?.map((c) => {
return {
...a,
...c,
};
})
.filter(
(a) => !chainData || equals_ignore_case(a.chain, chainData.id)
) || []
);

return (
<div className="asset-list">
Expand All @@ -39,9 +57,16 @@ export default ({ environment = "mainnet" }) => {
hasAllOptions={true}
allOptionsName="All Chains"
defaultSelectedKey={chainData?.id || ""}
onSelect={c => {
onSelect={(c) => {
setChainData(c);
if (c && _evm_assets.findIndex(a => (!assetData || a?.id === assetData.id) && a?.contracts?.findIndex(_c => _c?.chain === c?.id) > -1) < 0) {
if (
c &&
_evm_assets.findIndex(
(a) =>
(!assetData || a?.id === assetData.id) &&
a?.contracts?.findIndex((_c) => _c?.chain === c?.id) > -1
) < 0
) {
setAssetData("");
}
}}
Expand All @@ -54,64 +79,68 @@ export default ({ environment = "mainnet" }) => {
hasAllOptions={true}
allOptionsName="All Assets"
defaultSelectedKey={assetData?.id || ""}
onSelect={a => setAssetData(a)}
onSelect={(a) => setAssetData(a)}
/>
</div>
<table className="max-w-fit block shadow rounded-lg overflow-x-auto">
<thead className="bg-gray-100 dark:bg-black uppercase text-xs">
<tr className="border-none">
{COLUMNS.map((c, i) => (
<th
key={i}
scope="col"
className={`${i === 0 ? "rounded-tl-lg" : i === COLUMNS.length - 1 ? "rounded-tr-lg" : ""} border-none whitespace-nowrap font-bold py-3 px-4 ${c.headerClassName || ""}`}
>
{c.title}
</th>
))}
</tr>
</thead>
<tbody>
{assets.map((a, i) => {
const {
id,
address,
symbol,
image,
chain,
} = { ...a };

const chain_data = _evm_chains.find(c => c?.id === chain);
const explorer_url = chain_data?.provider_params?.[0]?.blockExplorerUrls?.[0];

return (
<tr
key={i}
className="border-none border-b"
>
{COLUMNS.map((c, j) => (
<td
key={j}
scope="col"
className={`${i % 2 === 0 ? "bg-transparent" : "bg-gray-50 dark:bg-black"} ${i === assets.length - 1 ? j === 0 ? "rounded-bl-lg" : j === COLUMNS.length - 1 ? "rounded-br-lg" : "" : ""} border-none whitespace-nowrap py-3 px-4 ${c.className || ""}`}
>
{c.id === "asset" ?
<div className="asset-icon min-w-max flex items-center space-x-2">
{image && (
<img
src={image}
alt=""
width={28}
height={28}
className="rounded-full"
/>
)}
<span className="whitespace-nowrap text-base font-semibold">
{symbol}
</span>
</div>
:
c.id === "chain" ?
<div className="asset-table">
<table className="max-w-fit block shadow rounded-lg overflow-x-auto">
<thead className="bg-gray-100 dark:bg-black uppercase text-xs">
<tr className="border-none">
{COLUMNS.map((c, i) => (
<th
key={i}
scope="col"
className={`${
c.id === "chain" ? "sticky-col" : ""
} border-none whitespace-nowrap font-bold py-3 px-4 ${
c.headerClassName || ""
}`}
>
{c.title}
</th>
))}
</tr>
</thead>
<tbody>
{assets.map((a, i) => {
const { id, address, symbol, image, chain } = { ...a };
const chain_data = _evm_chains.find((c) => c?.id === chain);
const explorer_url =
chain_data?.provider_params?.[0]?.blockExplorerUrls?.[0];
return (
<tr key={i} className="border-none border-b">
{COLUMNS.map((c, j) => (
<td
key={j}
scope="col"
className={`${c.id === "chain" ? "sticky-col" : ""} ${
i === assets.length - 1
? j === 0
? "rounded-bl-lg"
: j === COLUMNS.length - 1
? "rounded-br-lg"
: ""
: ""
} border-none whitespace-nowrap py-3 px-4 ${
c.className || ""
}`}
>
{c.id === "asset" ? (
<div className="asset-icon min-w-max flex items-center space-x-2">
{image && (
<img
src={image}
alt=""
width={28}
height={28}
className="rounded-full"
/>
)}
<span className="whitespace-nowrap text-base font-semibold">
{symbol}
</span>
</div>
) : c.id === "chain" ? (
<div className="chain-icon min-w-max flex items-center space-x-2.5">
{chain_data?.image && (
<img
Expand All @@ -131,53 +160,43 @@ export default ({ environment = "mainnet" }) => {
</span>
</div>
</div>
:
c.id === "denom" ?
<div className="flex items-center text-base space-x-1.5">
<span className="whitespace-nowrap text-base font-semibold">
{id}
) : c.id === "denom" ? (
<div className="flex items-center text-base space-x-1.5">
<span className="whitespace-nowrap text-base font-semibold">
{id}
</span>
</div>
) : c.id === "contract_address" ? (
<div className="flex items-center text-base space-x-1.5">
{address ? (
<a
href={`${explorer_url}/address/${address}`}
target="_blank"
rel="noopener noreferrer"
className="no-underline text-blue-500 dark:text-white font-medium"
>
{ellipse(address, 16)}
</a>
) : (
<span className="text-gray-400 dark:text-gray-600">
-
</span>
</div> :
c.id === "contract_address" ?
<div className="flex items-center text-base space-x-1.5">
{address ?
<a
href={`${explorer_url}/address/${address}`}
target="_blank"
rel="noopener noreferrer"
className="no-underline text-blue-500 dark:text-white font-medium"
>
{ellipse(address, 16)}
</a>
:
<span className="text-gray-400 dark:text-gray-600">
-
</span>
}
{address && (
<Copy
value={address}
hide={true}
size={20}
/>
)}
</div>
:
c.id === "add_token" ?
<AddToken
environment={environment}
{ ...a }
/>
:
null
}
</td>
))}
</tr>
);
})}
</tbody>
</table>
)}
{address && (
<Copy value={address} hide={true} size={20} />
)}
</div>
) : c.id === "add_token" ? (
<AddToken environment={environment} {...a} />
) : null}
</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
};
};
43 changes: 22 additions & 21 deletions src/layouts/MainLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,27 +132,28 @@ const shownDescription = description || 'The Axelar Documentation tells you how
</svg><br/>
Empowering developers to build scalable, interchain dApps
</div>
<div>
<strong>Learn</strong><br/>
<div><a href="https://axelar.network">Website</a></div>
<div><a href="https://axelar.network/wp-content/uploads/2021/07/axelar_whitepaper.pdf">Whitepaper</a></div>
<div><a href="https://axelar.network/blog">Blog</a></div>
<div><a href="https://github.com/axelarnetwork">Github</a></div>
</div>
<div>
<strong>Community</strong><br/>

<div><a href="https://twitter.com/axelarcore">Twitter</a></div>
<div><a href="https://discord.gg/aRZ3Ra6f7D">Discord</a></div>
<div><a href="https://t.me/axelarcommunity">Telegram</a></div>
<div><a href="https://community.axelar.network/">Discussion</a></div>
</div>
<div>
<strong>Others</strong><br/>
<div><a href="/bug-bounty">Bug Bounty</a></div>
<div><a href="/terms-of-use">Terms of Use</a></div>
<div><a href="https://stackoverflow.com/questions/ask?tags=axelar">Support</a></div>
<div><a href="https://dashboard.mailerlite.com/forms/215012/95435869033334492/share">Developer Newsletter</a></div>
<div class="footer-links">
<div>
<strong>Learn</strong><br/>
<div><a href="https://axelar.network">Website</a></div>
<div><a href="https://axelar.network/wp-content/uploads/2021/07/axelar_whitepaper.pdf">Whitepaper</a></div>
<div><a href="https://axelar.network/blog">Blog</a></div>
<div><a href="https://github.com/axelarnetwork">Github</a></div>
</div>
<div>
<strong>Community</strong><br/>
<div><a href="https://twitter.com/axelarcore">Twitter</a></div>
<div><a href="https://discord.gg/aRZ3Ra6f7D">Discord</a></div>
<div><a href="https://t.me/axelarcommunity">Telegram</a></div>
<div><a href="https://community.axelar.network/">Discussion</a></div>
</div>
<div>
<strong>Others</strong><br/>
<div><a href="/bug-bounty">Bug Bounty</a></div>
<div><a href="/terms-of-use">Terms of Use</a></div>
<div><a href="https://stackoverflow.com/questions/ask?tags=axelar">Support</a></div>
<div><a href="https://dashboard.mailerlite.com/forms/215012/95435869033334492/share">Developer Newsletter</a></div>
</div>
</div>
</div>
<div style="text-align:center;font-weight:bold;">&copy; 2023 Axelar Network. All Rights Reserved.</div>
Expand Down
6 changes: 4 additions & 2 deletions src/styles/dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,10 @@ html.dark body {
tr {
border-bottom: 2px solid rgb(48, 48, 49);
}

tr:nth-child(2n + 2) {
tr:nth-child(2n + 1) td {
background-color: #111111;
}
tr:nth-child(2n + 2) td {
background-color: #1d1f22;
}
}
Expand Down
Loading

1 comment on commit 2ada63c

@vercel
Copy link

@vercel vercel bot commented on 2ada63c Dec 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

axelar-docs – ./

docs.axelar.dev
axelar-docs-xi.vercel.app
axelar-docs-axelar-network.vercel.app
axelar-docs-git-main-axelar-network.vercel.app

Please sign in to comment.