Skip to content

Commit

Permalink
Merge pull request #2982 from XRPLF/use-cases-logo-sizing
Browse files Browse the repository at this point in the history 
Refactor use cases page styling and modal layout
  • Loading branch information
@mDuo13
mDuo13 authored Feb 13, 2025
2 parents 9c96d20 + bb72274 commit 1d7caad
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 33 deletions.
33 changes: 16 additions & 17 deletions about/uses.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import arrow from "../static/js/ecosystem/arrow-animation.json";
export const frontmatter = {
seo: {
title: 'Use Cases & Featured Projects',
description: "Here’s how the XRP Ledger is used to power innovative technology across the payments and public blockchain landscape.",
description: "Here's how the XRP Ledger is used to power innovative technology across the payments and public blockchain landscape.",
}
};

Expand Down Expand Up @@ -247,7 +247,7 @@ const cardsData = [
id: "Edge",
title: "Edge",
description:
"Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you’re always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry’s best customer support.",
"Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you're always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry's best customer support.",
category_id: "wallet",
category_name: "Wallet",
link: "https://edge.app/ripple-wallet/",
Expand Down Expand Up @@ -430,89 +430,89 @@ const uses = [
title: "Infrastructure",
number: 7,
description:
"Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more.",
"Build and operate components or systems that help the functionality of the XRP Ledger, such as Nodes, dev tools, storage, security and more."
},

{
id: "developer_tooling",
title: "Developer Tooling",
number: 4,
description:
"Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.",
"Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality."
},
{
id: "interoperability",
title: "Interoperability",
number: 1,
description:
"Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.",
"Developers and node operators can build and run custom sidechains while leveraging the XRPL's lean and efficient feature set."
},
{
id: "wallet",
title: "Wallet",
number: 4,
description:
"Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.",
"Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP."
},
{
id: "nfts",
title: "NFTs",
number: 7,
description:
"XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).",
"XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs)."
},
{
id: "exchanges",
title: "Exchanges",
number: 5,
description:
"Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.",
"Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities."
},
{
id: "gaming",
title: "Gaming",
number: 4,
description:
"The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.",
"The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability."
},
{
id: "security",
title: "Security",
number: 1,
description:
"Build services and tools that help prevent and combat fraudulent activity with the XRPL.",
"Build services and tools that help prevent and combat fraudulent activity with the XRPL."
},

{
id: "payments",
title: "Payments",
number: 2,
description:
"Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.",
"Leverage the efficiency and speed of the XRP Ledger to move value all over the globe."
},

{
id: "cbdc",
title: "CBDC",
number: 1,
description:
"A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs).",
"A private version of the XRP Ledger provides Central Banks a secure, controlled, and flexible solution to issue and manage Central Bank Issued Digital Currencies (CBDCs)."
},

{
id: "sustainability",
title: "Sustainability",
number: 1,
description:
"Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).",
"Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs)."
},

{
id: "custody",
title: "Custody",
number: 2,
description:
"Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.",
"Use the XRP Ledger to build crypto custody and securely hold, store and use your assets."
},
];

Expand Down Expand Up @@ -601,10 +601,9 @@ export default function Uses() {
}, [theme]);
const [modalData, setModalData] = React.useState({
id: "",
src: "",
title: "",
description: "",
number: "",
number: ""
});
const { View } = useLottie(options);

Expand Down Expand Up @@ -791,7 +790,7 @@ export default function Uses() {
</ul>
</section>
<div
className={`modal modal-uses ${displayModal ? "d-block" : ""}`}
className={`modal modal-uses ${modalData?.id} ${displayModal ? "d-block" : ""}`}
id="myModal"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion static/css/devportal2024-v1.css
View file

Large diffs are not rendered by default.

74 changes: 59 additions & 15 deletions styles/_use-cases.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,31 @@ $custody-logos: "gatehub", "bitgo";
}
}
}

.modal-uses.exchanges{
.logo-item{
max-height: 58px;
margin: 5px;
width: 145px;
height: 28px;
max-width: none;
}
}
.modal-content-uses {
.carbonland-trust{
max-width: 218px;
}
.first-ledger-bot{
min-height: 80px !important;
min-height: 100px !important;
position: relative;
bottom: 20px;
content: url("../img/uses/first-ledger-bot.svg");
}
.orchestra-finance{
min-height: 56px !important;
content: url("../img/uses/orchestra-finance.svg");
}
.moai-finance{
min-height: 80px !important;
min-height: 100px !important;
position: relative;
bottom: 20px;
content: url("../img/uses/moai-finance.svg");
Expand Down Expand Up @@ -186,20 +198,24 @@ html.light {
}

.modal-content-uses {
padding-top: 40px;
position: relative;
/* Add position: relative to modal-content-uses */
background-color: #232325;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
padding: 40px 20px 20px 20px;
width: 60% !important;
height: 60%;
height: 520px;
display: flex;
flex-direction: column;
align-items: center;
overflow: scroll;
overflow-y: hidden;

@media only screen and (max-width: 1024px) {
overflow-y: auto;
}
}

.modal-content-uses::before {
Expand Down Expand Up @@ -293,10 +309,13 @@ html.light {
border: 0;
border-top: 1px solid #ccc;
}

.logo-item.anchain {
height: 34px !important;
max-width: 146px !important;
}
.threezy-logo {
margin: 4px;
max-height: 38px;
max-height: 55px !important;
}

.blockforce-logo {
Expand Down Expand Up @@ -325,16 +344,29 @@ html.light {
.bottom-row {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;

@media only screen and (max-width: 768px) {
flex-wrap: wrap;
justify-content: space-around;
gap: 10px;
margin-bottom: 0;
}
}

.top-row {
margin-bottom: 10px;
}

.bottom-row {
margin-top: 10px;
}

.logo-item {
max-height: 30px;
max-width: 130px;
margin: 10px 11px;
max-height: 45px;
max-width: 108px;
margin: 5px;
}

.close {
Expand Down Expand Up @@ -362,9 +394,11 @@ html.light {
@include media-breakpoint-up(lg) {
grid-template-columns: repeat(4, 1fr);
}
}


@media (max-width: 1220px) and (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr); // Adjust to 3 columns for screens between 1024px and 1220px
}
}

.use-case-circle {
display: flex;
Expand Down Expand Up @@ -947,3 +981,13 @@ html.light {
display: block;
}
}

body, .landing.page-uses {
overflow-x: hidden; // Prevent horizontal scrolling
}

.container-new {
max-width: 100%; // Ensure container does not exceed viewport width
padding: 0 15px; // Add padding to ensure content is not flush with the edges
box-sizing: border-box; // Include padding in the element's total width
}

0 comments on commit 1d7caad

Please sign in to comment.