Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor use cases page styling and modal layout #2982

Merged
merged 1 commit into from
Feb 13, 2025
Merged

Refactor use cases page styling and modal layout #2982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions about/uses.page.tsx
View file
Open in desktop
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
Open in desktop

Large diffs are not rendered by default.

74 changes: 59 additions & 15 deletions styles/_use-cases.scss
View file
Open in desktop
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
}