ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-04 20:05:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve wallet grid layout with dynamic column sizing

Browse Source
This commit is contained in:
AKCodez
2025-02-26 15:58:04 -08:00
parent 095fb7ae85
commit 0fd62f761c
3 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
about/xrp.page.tsx
View File

@@ -111,7 +111,7 @@ export default function XrpOverview() {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const totalCols = Math.max(softwallets.length, hardwallets.length) + 1;
return (
<div className="landing">
<div>
@@ -376,7 +376,7 @@ export default function XrpOverview() {
"Digital wallets are pieces of software that allow people to send, receive, and store cryptocurrencies, including XRP. There are two types of digital wallets: hardware and software."
)}
</h5>
<ul className="nav nav-grid-lg cols-of-6" id="wallets">
<ul className={`nav nav-grid-lg cols-of-${totalCols}`} id="wallets">
<li className="nav-item nav-grid-head">
<h6 className="fs-4-5">{translate("Software Wallets")}</h6>
</li>

2
static/css/devportal2024-v1.css
View File

File diff suppressed because one or more lines are too long

22
styles/_cards.scss
View File

@@ -150,7 +150,27 @@ a.card:hover h3 {
.light .circled-logo {
border: none;
}
.cols-of-1{
grid-template-rows:repeat(1, min-content)
}
.cols-of-2{
grid-template-rows:repeat(2, min-content)
}
.cols-of-3{
grid-template-rows:repeat(3, min-content)
}
.cols-of-4{
grid-template-rows:repeat(4, min-content)
}
.cols-of-5{
grid-template-rows:repeat(5, min-content)
}
.cols-of-6{
grid-template-rows:repeat(6, min-content)
}
.cols-of-7{
grid-template-rows:repeat(7, min-content)
}
.card-deck {
margin-top: 2.5rem;
margin-left: (-$card-deck-margin);