mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-20 03:35:51 +00:00
updated mobile filter modal
This commit is contained in:
Jake
8
assets/img/uses/usecase-filter.svg
Normal file
8
assets/img/uses/usecase-filter.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="4" y1="6.375" x2="20" y2="6.375" stroke="white"/>
|
||||
<line x1="4" y1="12" x2="20" y2="12" stroke="white"/>
|
||||
<line x1="4" y1="17.75" x2="20" y2="17.75" stroke="white"/>
|
||||
<rect x="9.5" y="10.25" width="3.5" height="3.5" rx="0.5" fill="#111112" stroke="white"/>
|
||||
<rect x="13.625" y="16" width="3.5" height="3.5" rx="0.5" fill="#111112" stroke="white"/>
|
||||
<rect x="14.375" y="4.5" width="3.5" height="3.5" rx="0.5" fill="#111112" stroke="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 548 B |
@@ -11,7 +11,6 @@ $(document).ready(() => {
|
||||
$(`#use_case_companies_list .card-uses.category_${category}`).show()
|
||||
}
|
||||
|
||||
|
||||
const featured_count = show_cats_arr.filter( (current) => {
|
||||
return current == "infrastructure" || current == "developer_tooling"
|
||||
})
|
||||
@@ -24,28 +23,40 @@ $(document).ready(() => {
|
||||
|
||||
// update category counts
|
||||
if (featured_count.length === 0) {
|
||||
$("#featured_count").hide()
|
||||
$(".featured_count").hide()
|
||||
}else {
|
||||
$("#featured_count").html(featured_count.length)
|
||||
$("#featured_count").show()
|
||||
$(".featured_count").html(featured_count.length)
|
||||
$(".featured_count").show()
|
||||
}
|
||||
|
||||
if (other_count.length === 0) {
|
||||
$("#other_count").hide()
|
||||
$(".other_count").hide()
|
||||
}else{
|
||||
$("#other_count").html(other_count.length)
|
||||
$("#other_count").show()
|
||||
}
|
||||
$(".other_count").html(other_count.length)
|
||||
$(".other_count").show()
|
||||
}
|
||||
|
||||
if(show_cats_arr.length === 0) {
|
||||
$(".total_count").hide()
|
||||
}else {
|
||||
$(".total_count").html(show_cats_arr.length)
|
||||
$(".total_count").show()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$(".cat_checkbox input").change((event) => {
|
||||
const lang = $(event.target).val().toLowerCase().split(' ').join('_')
|
||||
|
||||
// const lang = $(event.target).val().toLowerCase().split(' ').join('_')
|
||||
const lang = $(event.target).val()
|
||||
const lang_checked = $(event.target).prop("checked")
|
||||
|
||||
$(".input_"+lang).prop("checked", lang_checked)
|
||||
|
||||
if (lang_checked) {
|
||||
if ( show_cats_arr.indexOf(lang) === -1){
|
||||
show_cats_arr.push(lang)
|
||||
}
|
||||
} else {
|
||||
show_cats_arr.indexOf(lang) !== -1 && show_cats_arr.splice(show_cats_arr.indexOf(lang), 1)
|
||||
}
|
||||
|
||||
@@ -567,6 +567,22 @@ pre code {
|
||||
|
||||
// Use Cases & Featured Projects page
|
||||
.page-uses {
|
||||
|
||||
.card-body {
|
||||
background: #FFFFFF;
|
||||
|
||||
color: #343437
|
||||
}
|
||||
|
||||
.modal-footer,
|
||||
.modal-header {
|
||||
background-color: #FCFCFD;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
|
||||
##{$usecase} {
|
||||
content: url("../img/icons/lightmode/#{$usecase}.svg");
|
||||
|
||||
@@ -30,107 +30,48 @@
|
||||
padding-right: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cleanup bootstrap modal */
|
||||
.modal {
|
||||
padding: 0;
|
||||
}
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
background-color: #000;
|
||||
|
||||
background-clip: padding-box;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
|
||||
background: #111112;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border: none;
|
||||
background: #111112;
|
||||
box-shadow: 0px 1px 2px #000000;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border: none;
|
||||
background: #111112;
|
||||
box-shadow: 0px -1px 2px #000000;
|
||||
|
||||
align-items: unset;
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="overflow-hidden">
|
||||
<section class="py-26 text-center">
|
||||
<div class="col-lg-6 mx-auto text-center">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h1 class="mb-0">{% trans %}Powering Innovative Technology{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Use Cases{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-lg-5 p-3 mb-5">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h3 class="h4 h2-sm">{% trans %}Powering innovative use cases and projects{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="card-grid card-grid-3xN ls-none mt-4 pt-2" id="use-case-card-grid">
|
||||
{% set uses = [
|
||||
|
||||
{"id": "infrastructure",
|
||||
"title": _("Infrastructure"),
|
||||
"description": _("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"),
|
||||
"description": _("Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.")},
|
||||
|
||||
{"id": "interoperability",
|
||||
"title": _("Interoperability"),
|
||||
"description": _("Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.")},
|
||||
|
||||
{"id": "wallet",
|
||||
"title": _("Wallet"),
|
||||
"description": _("Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.")},
|
||||
|
||||
{"id": "nfts",
|
||||
"title": _("NFTs"),
|
||||
"description": _("XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).")},
|
||||
|
||||
{"id": "exchanges",
|
||||
"title": _("Exchanges"),
|
||||
"description": _("Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.")},
|
||||
|
||||
{"id": "gaming",
|
||||
"title": _("Gaming"),
|
||||
"description": _("The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.")},
|
||||
|
||||
{"id": "security",
|
||||
"title": _("Security"),
|
||||
"description": _("Build services and tools that help prevent and combat fraudulent activity with the XRPL.")},
|
||||
|
||||
{"id": "payments",
|
||||
"title": _("Payments"),
|
||||
"description": _("Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.")},
|
||||
|
||||
{"id": "web_monetization",
|
||||
"title": _("Web Monetization"),
|
||||
"description": _("Support creators and their content directly leveraging the power of the XRP Ledger.")},
|
||||
|
||||
{"id": "sustainability",
|
||||
"title": _("Sustainability"),
|
||||
"description": _("Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).")},
|
||||
|
||||
{"id": "cbdc",
|
||||
"title": _("CBDC"),
|
||||
"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).")},
|
||||
|
||||
{"id": "custody",
|
||||
"title": _("Custody"),
|
||||
"description": _("Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.")},
|
||||
|
||||
{"id": "defi",
|
||||
"title": _("DeFi"),
|
||||
"description": _("Provide access to financial products and services replacing the traditional role of financial institutions.")},
|
||||
|
||||
] %}
|
||||
{% for use in uses %}
|
||||
<li class="col ls-none p-3">
|
||||
<img id="{{use.id}}" alt="{{use.title}} icon">
|
||||
<h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
|
||||
<p class="mt-6-until-sm mt-3 mb-0">{{use.description}}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-12 col-lg-8 col-xl-6 p-3 mb-5">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h3 class="h4 h2-sm">{% trans %}Businesses and projects running<br class="until-sm"> on the XRP Ledger{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="mb-0 longform mt-8-until-sm mt-3 ">{% trans %}There are companies and developer projects around the world that leverage the XRP Ledger to solve interesting problems across a variety of industries and use cases.{% endtrans %}</p>
|
||||
</div>
|
||||
|
||||
{% set cards = [
|
||||
{% set cards = [
|
||||
{
|
||||
"id": "",
|
||||
"title": _("Aesthetes"),
|
||||
@@ -460,7 +401,177 @@
|
||||
"link": "https://linktr.ee/yoniverse.one",
|
||||
},
|
||||
|
||||
] %}
|
||||
|
||||
|
||||
{% set featured_categories = {
|
||||
"infrastructure": "Infrastructure",
|
||||
"developer_tooling": "Developer Tooling",
|
||||
} %}
|
||||
|
||||
{% set other_categories = {
|
||||
"interoperability": "Interoperability",
|
||||
"wallet": "Wallet",
|
||||
"nfts": "NFTs",
|
||||
"exchanges": "Exchanges",
|
||||
"gaming": "Gaming",
|
||||
"security": "Security",
|
||||
"payments": "Payments",
|
||||
"web_monetization": "Web Monetization",
|
||||
"sustainability": "Sustainability",
|
||||
"cbdcs": "CBDCs",
|
||||
"custody": "Custody",
|
||||
"defi": "DeFi",
|
||||
"other": "Other",
|
||||
} %}
|
||||
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade " id="categoryFilterModal" tabindex="-1" aria-labelledby="categoryFilterModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<!-- <h5 class="modal-title" id="categoryFilterModalLabel"></h5>
|
||||
<button type="button" class="" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">Cancel</span>
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- -->
|
||||
<div class="p-3 page-events">
|
||||
<form >
|
||||
<p class="category-header mb-4">Featured Categories <span id="featured_count_old" class="featured_count category_count">2</span></p>
|
||||
{% for category_id, category_name in featured_categories.items() %}
|
||||
<div class="cat_checkbox category-checkbox pb-2">
|
||||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}" checked>
|
||||
<label for="input_{{category_id}}">{{ category_name }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<br><br>
|
||||
|
||||
<p class="category-header pt-lg-4 mt-lg-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>
|
||||
{% for category_id, category_name in other_categories.items() %}
|
||||
<div class="cat_checkbox category-checkbox pb-2">
|
||||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}">
|
||||
<label for="input_{{category_id}}">{{ category_name }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</form>
|
||||
</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal">Apply</button>
|
||||
<a class="btn " data-dismiss="modal">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end modal -->
|
||||
|
||||
|
||||
<div class="overflow-hidden">
|
||||
|
||||
<section class="container-new py-26 text-lg-center">
|
||||
<div class="p-0 col-lg-6 mx-lg-auto">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h1 class="mb-0">{% trans %}Powering Innovative Technology{% endtrans %}</h1>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Use Cases{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-lg-5 p-3 mb-5">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h3 class="h4 h2-sm">{% trans %}Powering innovative use cases and projects{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}XRPL Ecosystem{% endtrans %}</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="card-grid card-grid-3xN ls-none mt-4 pt-2" id="use-case-card-grid">
|
||||
{% set uses = [
|
||||
|
||||
{"id": "infrastructure",
|
||||
"title": _("Infrastructure"),
|
||||
"description": _("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"),
|
||||
"description": _("Developers can leverage open-source libraries, SDKs and more to help build their project and access essential XRP Ledger functionality.")},
|
||||
|
||||
{"id": "interoperability",
|
||||
"title": _("Interoperability"),
|
||||
"description": _("Developers and node operators can build and run custom sidechains while leveraging the XRPL’s lean and efficient feature set.")},
|
||||
|
||||
{"id": "wallet",
|
||||
"title": _("Wallet"),
|
||||
"description": _("Build digital wallets to store passwords and interact with various blockchains to send and receive digital assets, including XRP.")},
|
||||
|
||||
{"id": "nfts",
|
||||
"title": _("NFTs"),
|
||||
"description": _("XRPL supports the issuance of IOUs that represent a currency of any value, as well as non-fungible tokens (NFTs).")},
|
||||
|
||||
{"id": "exchanges",
|
||||
"title": _("Exchanges"),
|
||||
"description": _("Build sophisticated exchanges where users can invest and trade crypto and assets such as stocks, ETFs, and commodities.")},
|
||||
|
||||
{"id": "gaming",
|
||||
"title": _("Gaming"),
|
||||
"description": _("The XRPL supports gaming at high speed given its reliable throughput, low fees, and sidechain interoperability.")},
|
||||
|
||||
{"id": "security",
|
||||
"title": _("Security"),
|
||||
"description": _("Build services and tools that help prevent and combat fraudulent activity with the XRPL.")},
|
||||
|
||||
{"id": "payments",
|
||||
"title": _("Payments"),
|
||||
"description": _("Leverage the efficiency and speed of the XRP Ledger to move value all over the globe.")},
|
||||
|
||||
{"id": "web_monetization",
|
||||
"title": _("Web Monetization"),
|
||||
"description": _("Support creators and their content directly leveraging the power of the XRP Ledger.")},
|
||||
|
||||
{"id": "sustainability",
|
||||
"title": _("Sustainability"),
|
||||
"description": _("Use the XRP Ledger to tokenize carbon offsets as non-fungible tokens (NFTs).")},
|
||||
|
||||
{"id": "cbdc",
|
||||
"title": _("CBDC"),
|
||||
"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).")},
|
||||
|
||||
{"id": "custody",
|
||||
"title": _("Custody"),
|
||||
"description": _("Use the XRP Ledger to build crypto custody and securely hold, store and use your assets.")},
|
||||
|
||||
{"id": "defi",
|
||||
"title": _("DeFi"),
|
||||
"description": _("Provide access to financial products and services replacing the traditional role of financial institutions.")},
|
||||
|
||||
] %}
|
||||
{% for use in uses %}
|
||||
<li class="col ls-none p-3">
|
||||
<img id="{{use.id}}" alt="{{use.title}} icon">
|
||||
<h4 class="mt-3 mb-0 h5">{{use.title}}</h4>
|
||||
<p class="mt-6-until-sm mt-3 mb-0">{{use.description}}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="container-new py-26">
|
||||
<div class="col-12 col-lg-8 col-xl-6 p-3 mb-5">
|
||||
<div class="d-flex flex-column-reverse">
|
||||
<h3 class="h4 h2-sm">{% trans %}Businesses and projects running<br class="until-sm"> on the XRP Ledger{% endtrans %}</h3>
|
||||
<h6 class="eyebrow mb-3">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h6>
|
||||
</div>
|
||||
<p class="mb-0 longform mt-8-until-sm mt-3 ">{% trans %}There are companies and developer projects around the world that leverage the XRP Ledger to solve interesting problems across a variety of industries and use cases.{% endtrans %}</p>
|
||||
</div>
|
||||
|
||||
<a class="btn d-block d-lg-none" data-toggle="modal" data-target="#categoryFilterModal">
|
||||
<span class="mr-3"><img src="./assets/img/uses/usecase-filter.svg" class=""></span>Filter by Categories <span class="ml-3 total_count category_count">2</span>
|
||||
</a>
|
||||
|
||||
<!-- temp -->
|
||||
<style>
|
||||
@@ -533,58 +644,40 @@
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- // TODO:rename events- css -->
|
||||
|
||||
<!-- Start company cards -->
|
||||
<div class="row col-12 m-0 p-0 mt-4 pt-2">
|
||||
<div class="col-3 m-0 p-0 mt-2 d-none d-lg-block">
|
||||
|
||||
{% set featured_categories = [
|
||||
"Infrastructure",
|
||||
"Developer Tooling",
|
||||
] %}
|
||||
|
||||
{% set other_categories = [
|
||||
"Interoperability",
|
||||
"Wallet",
|
||||
"NFTs",
|
||||
"Exchanges",
|
||||
"Gaming",
|
||||
"Security",
|
||||
"Payments",
|
||||
"Web Monetization",
|
||||
"Sustainability",
|
||||
"CBDCs",
|
||||
"Custody",
|
||||
"DeFi",
|
||||
"Other",
|
||||
] %}
|
||||
<div class="left col-3 m-0 p-0 mt-2 d-none d-lg-block">
|
||||
|
||||
<!-- Side bar Desktop. -->
|
||||
<div class="p-3 page-events">
|
||||
<form >
|
||||
<p class="category-header mb-4">Featured Categories <span id="featured_count" class="category_count">2</span></p>
|
||||
{% for category in featured_categories %}
|
||||
<p class="category-header mb-4">Featured Categories <span id="featured_count_old" class="featured_count category_count">2</span></p>
|
||||
{% for category_id, category_name in featured_categories.items() %}
|
||||
<div class="cat_checkbox category-checkbox pb-2">
|
||||
<input class="events-filter" type="checkbox" name="categories" id="input_{{category}}" value="{{category}}" checked>
|
||||
<label for="input_{{category}}">{{ category }}</label>
|
||||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}" checked>
|
||||
<label for="input_{{category_id}}">{{ category_name }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<br><br>
|
||||
|
||||
<p class="category-header pt-4 mt-3 mb-4">Other Categories <span id="other_count" class="category_count">2</span></p>
|
||||
{% for category in other_categories %}
|
||||
<p class="category-header pt-4 mt-3 mb-4">Other Categories <span id="other_count_old" class="other_count category_count">0</span></p>
|
||||
{% for category_id, category_name in other_categories.items() %}
|
||||
<div class="cat_checkbox category-checkbox pb-2">
|
||||
<input class="events-filter" type="checkbox" name="categories" id="input_{{category}}" value="{{category}}">
|
||||
<label for="input_{{category}}">{{ category }}</label>
|
||||
<input class="events-filter input_{{category_id}}" type="checkbox" name="categories" id="input_{{category_id}}" value="{{category_id}}">
|
||||
<label for="input_{{category_id}}">{{ category_name }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</form>
|
||||
</div>
|
||||
<!-- End sidebar desktop -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- cards -->
|
||||
@@ -602,9 +695,13 @@
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
<!-- end cards -->
|
||||
|
||||
</div>
|
||||
<!-- end company cards -->
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user