took care of the last of the QA feedback

This commit is contained in:
Calvin Jhunjhnuwala
2020-09-28 09:36:55 -07:00
parent 09a811f29a
commit 030467cc2e
13 changed files with 103 additions and 74 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -57,14 +57,15 @@ String.prototype.commarize = commarize
let slider = document.getElementById( 'myRange' ),
txns = document.querySelectorAll( '.slider-amt' ),
dataTypes = document.querySelectorAll( '.d-output' ),
dataTxns = document.querySelectorAll( '.dash' ),
dataViz = document.querySelectorAll( '.viz-output' );
// Update the current slider value (each time you drag the slider handle)
function doCalculations( val ){
function doCalculations(val){
[].slice.call( dataTypes ).forEach( function( dataType ){
[].slice.call(dataTypes).forEach( function( dataType ){
if ( dataType.classList.contains( 'active' ) ){
if (dataType.classList.contains('active')){
let data_type = dataType.getAttribute( 'data-type' ),
data_comp = dataType.getAttribute( 'data-comp' ),
@@ -73,28 +74,37 @@ function doCalculations( val ){
// comp = the number of kWh Portugal used in 2019
kwhComp = ( total / 50340000000 ).toFixed( 2 );
if ( data_comp === 'tons' ) {
total = total * 1000000;
if (data_comp === 'tons') {
total = parseInt(total * 1000000);
}
num.innerHTML = total.commarize();
num.style.transition = "all .2s ease-in-out";
if ( data_comp === 'kWh' && kwhComp > .02 ){
let dot = document.getElementById( data_comp + '-' + data_type + '-dot' );
if (data_comp === 'kWh' && kwhComp > .02){
let dot = document.getElementById(data_comp + '-' + data_type + '-dot');
dot.style.transition = "all .2s ease-in-out";
dot.style.transform = "scale(" + kwhComp * 100 + ")";
dot.style.webkitTransform = "scale(" + kwhComp * 100 + ")";
dot.style.msTransform = "scale(" + kwhComp * 100 + ")";
}
}
})
}
function highlightNum(val){
[].slice.call(dataTxns).forEach(function(dataTxn){
dataTxn.classList.remove('active');
if (dataTxn.dataset.num === val){
dataTxn.classList.add('active')
}
});
// $('#myRange .dash').removeClass('active');
// $('#myRange .dash[data-num="' + val + '"]').addClass('active');
}
function cryptoSelected(){
gasCryptoAnimation( );
gasCryptoAnimation();
co2CryptoAnimation();
}
@@ -110,69 +120,70 @@ function creditSelected(){
function changeDataType( type ){
[].slice.call( dataTypes ).forEach( function( dataType ){
if ( dataType.classList.contains( type ) ){
[].slice.call(dataTypes).forEach( function(dataType){
if (dataType.classList.contains(type)){
let dType = type.substring(2);
dataType.classList.add( 'active' );
dataType.classList.add('active');
document.getElementById('gasAnimation').innerHTML = '';
document.getElementById('co2Animation').innerHTML = '';
if ( dType === 'cash' ){
if (dType === 'cash'){
cashSelected();
} else if ( dType === 'credit' ){
} else if (dType === 'credit'){
creditSelected()
} else {
cryptoSelected();
}
} else {
dataType.classList.remove( 'active' );
dataType.classList.remove('active');
}
});
doCalculations( slider.value );
doCalculations(slider.value);
}
$('.tab-link').on('click', function(e){
$( '#data-selector li' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
$('#data-selector li').removeClass('active');
$(this).parent('li').addClass('active');
let type = $( this ).data("currencytype");
let type = $(this).data("currencytype");
changeDataType( type );
changeDataType(type);
e.preventDefault();
})
$( document ).ready( function(){
[].slice.call( txns ).forEach( function( txn ){
$(document).ready(function(){
[].slice.call(txns).forEach(function(txn){
txn.innerHTML = slider.value;
})
slider.oninput = function() {
var val = this.value;
[].slice.call( txns ).forEach( function( txn ){
[].slice.call(txns).forEach(function(txn){
txn.innerHTML = val;
})
doCalculations( val );
});
highlightNum(val);
doCalculations(val);
}
doCalculations( slider.value );
doCalculations(slider.value);
cryptoSelected();
$(window).on('load resize scroll', function() {
if ( $(window).width() < 993 ) {
if ($(window).width() < 993) {
let distance = $('#calculator-outputs').offset().top,
$window = $(window).scrollTop(),
data_toggle = $('#calculator-mobile-toggle'),
inputs = $('#calculator-inputs'),
inputs_offset = $( '#calculator-inputs-offset');
inputs_offset = $('#calculator-inputs-offset');
if ( distance < $window ){
data_toggle.addClass( 'show' ).removeClass( 'hide' );
if (distance < $window){
data_toggle.addClass('show').removeClass('hide');
} else {
inputs.removeClass( 'sticky' );
data_toggle.addClass( 'hide' ).removeClass( 'show' );
inputs_offset.removeClass( 'offset' );
inputs.removeClass('sticky');
data_toggle.addClass('hide').removeClass('show');
inputs_offset.removeClass('offset' );
$('#data-toggle').text('Change Inputs');
}
}
@@ -180,21 +191,20 @@ $( document ).ready( function(){
$('#calculator-mobile-toggle').on( 'click', function(e){
e.preventDefault();
console.log( "working");
let inputs = $('#calculator-inputs'),
inputs_offset = $( '#calculator-inputs-offset');
inputs_offset = $('#calculator-inputs-offset');
$( '#calculator-inputs' ).toggleClass( 'show' );
$('#calculator-inputs' ).toggleClass('show');
if ( inputs.hasClass( 'sticky' ) ) {
inputs.removeClass( 'sticky' );
inputs_offset.removeClass( 'offset' );
$( this ).text('Change Inputs');
if (inputs.hasClass('sticky')) {
inputs.removeClass('sticky');
inputs_offset.removeClass('offset');
$(this).text('Change Inputs');
} else {
inputs.addClass( 'sticky show' );
inputs_offset.addClass( 'offset' );
$( this ).text('Hide Inputs');
inputs.addClass('sticky show');
inputs_offset.addClass('offset');
$(this).text('Hide Inputs');
}
})
});

View File

@@ -176,4 +176,7 @@
.grey-400 {
color: $gray-400
}
.grey-500 {
color: $gray-500
}

View File

@@ -226,7 +226,7 @@
}
@include media-breakpoint-down(md) {
#calculator-inputs-offset.offset {
height: 248px;
height: 404px;
width: 100%;
}
#calculator-inputs-offset {
@@ -263,6 +263,12 @@
display: block;
}
}
@include media-breakpoint-down(sm) {
#calculator-inputs-offset.offset {
height: 486px;
width: 100%;
}
}
@include media-breakpoint-up(xl){
#data-selector li:first-child a {
border-top-left-radius: 8px;
@@ -311,10 +317,21 @@
#kWh-pap-dot {
}
.dash {
&.active {
font-weight: bold;
color: $primary;
}
}
.dash:before {
content: url(../img/icons/dash-line.png);
// content: url(../img/icons/dash-line.png);
content: '|';
font-size: 7px;
font-weight: bold;
color: $gray-500;
position: absolute;
top: -12px;
top: -10px;
margin-left: 13px;
}

View File

@@ -65,15 +65,15 @@
<li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#" data-currencytype="d-credit">{% trans %}Credit Cards{% endtrans %}</a></li>
<li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#" data-currencytype="d-cash">{% trans %}Cash{% endtrans %}</a></li>
</ul>
<p class="grey-400 mb-0">Number of Transactions</p>
<p class="grey-500 mb-0 mt-4 text-smaller">Number of Transactions:</p>
<div class="slidecontainer mb-10">
<input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
<ul class="d-flex p-0 ls-none justify-content-between position-relative mr-neg-8 ml-neg-8 mt-1" style="z-index: -1;">
<li class="dash text-center text-smaller grey-50">20M</li>
<li class="dash text-center text-smaller grey-50">40M</li>
<li class="dash text-center text-smaller grey-50">60M</li>
<li class="dash text-center text-smaller grey-50">80M</li>
<li class="dash text-center text-smaller grey-50">100M</li>
<li class="dash text-center text-smaller grey-500" data-num="20">20M</li>
<li class="dash text-center text-smaller grey-500" data-num="40">40M</li>
<li class="dash text-center text-smaller grey-500 active" data-num="60">60M</li>
<li class="dash text-center text-smaller grey-500" data-num="80">80M</li>
<li class="dash text-center text-smaller grey-500" data-num="100">100M</li>
</ul>
</div>
<div class="d-flex mb-3 ml-3">
@@ -127,7 +127,7 @@
<div class="dot" id="kWh-pap-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-cash.png" class="mw-100 mt-3">
<img src="assets/img/icons/bw-cash.png" class="mw-100 mt-3 mb-2">
<p class="h6 mt-2 mb-1">{% trans %}Cash{% endtrans %}</p>
<h5 class="h4 normal mb-0" id="kWh-pap"></h5>
<p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
@@ -151,7 +151,7 @@
<div class="dot" id="kWh-vsa-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" class="mw-100 mt-3">
<img src="assets/img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" class="mw-100 mb-2" style="margin-top: 1.85rem;">
<p class="h6 mt-2 mb-1">Visa</p>
<h5 class="h4 normal mb-0" id="kWh-vsa"></h5>
<p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
@@ -163,7 +163,7 @@
<div class="dot" id="kWh-mst-dot"></div>
</div>
<div class="num-wrapper">
<img src="assets/img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mt-3">
<img src="assets/img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mb-1" style="margin-top: 1.65rem;">
<p class="h6 mt-2 mb-1">{% trans %}Mastercard{% endtrans %}</p>
<h5 class="h4 normal mb-0" id="kWh-mst"></h5>
<p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
@@ -216,7 +216,7 @@
</ul>
</section>
<section class="min-vh100 mb-40 section3 clearfix">
<section class="min-vh100 section3 clearfix">
<h4>{% trans %}Gas Consumption by the Gallon{% endtrans %}</h4>
<p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>

View File

@@ -26,7 +26,7 @@
</div>
<p>{% trans %}Thank you for your interest in contributing to XRPL.org.{% endtrans %}</p>
<p>{% trans %}This website was created for the community and is meant to be a living, breathing source of truth for XRP resources.{% endtrans %}</p>
<p>{% trans %}If you'd like to recommend new content or provide feedback, see these community resources:{% endtrans %}</p>
<p>{% trans %}If you'd like to recommend new content or provide feedback, visit the community resources at the Xpring forum or XRP Chat.{% endtrans %}</p>
</div>
<div class="col-md-6 offset-md-1 mb-10 mt-10">
<div class="d-flex flex-wrap w-100">

View File

@@ -60,7 +60,7 @@
<a class="col-md-5 mb-20 card-b" href="https://coil.com/" target="_blank">
<img class="mw-100" src="assets/img/businesses/coil.png">
<h3 class="my-10 h4">{% trans %}Web Monetization{% endtrans %}</h3>
<p class="text-white">{% trans %}Coil provides an alternative to the status quo of paid advertisements with web monetization. Coil's web monetization uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRP Ledger's payment channels provide an ideal system for settling these micropayments at high speed and low cost.{% endtrans %}</p>
<p class="text-white">{% trans %}Coil provides an alternative to the status quo of paid advertisements with web monetization. Coil's web monetization uses the interledger protocol (ILP) to stream micropayments as users consume content. The XRP Ledger's payment channels provide an ideal system for settling these micropayments at high speed and low-cost.{% endtrans %}</p>
</a>
<a class="col-md-5 mb-20 card-b offset-md-1" href="https://www.forte.io/" target="_blank">
<img class="mw-100" src="assets/img/businesses/forte.png">

View File

@@ -57,7 +57,7 @@
<div class="col text-center"></div>
<div class="col text-center">
<img class="mw-100 mt-3" src="assets/img/icons/low-cost.png">
<h6 class="mt-8">{% trans %}Low Cost{% endtrans %}</h6>
<h6 class="mt-8">{% trans %}Low-Cost{% endtrans %}</h6>
</div>
<div class="col text-center" style="width: 33%;">
<img class="mw-100" src="assets/img/icons/sustainable.png">

View File

@@ -49,7 +49,7 @@
<div class="timeline-content">
<h4 class="mb-10">{% trans %}2012 XRP Launched{% endtrans %}</h4>
<p>{% trans %}In 2011 and early 2012, the trio of developers started a project to build a distributed ledger that improved upon these fundamental limitations of Bitcoin—their first ever code commit was in November 2011.{% endtrans %}</p>
<p>{% trans %}They wrote code, that when executed, would create a distributed ledger, which they named Ripple. It included a digital asset that would be called “ripples” (XRP as the currency code) to follow the same naming convention as bitcoin (BTC). At the time, Ripple stood for the open-source project, the unique consensus ledger (Ripple Consensus Ledger), transaction protocol (Ripple Transaction Protocol or RTXP), the network (Ripple network) and the digital asset (known as “ripples”).{% endtrans %}</p>
<p>{% trans %}They wrote code, that when executed, would create a distributed ledger, which they named Ripple. It included a digital asset that would be called “ripples” (XRP as the currency code) to follow the same naming convention as Bitcoin (BTC). At the time, Ripple stood for the open-source project, the unique consensus ledger (Ripple Consensus Ledger), transaction protocol (Ripple Transaction Protocol or RTXP), the network (Ripple network) and the digital asset (known as “ripples”).{% endtrans %}</p>
<p>{% trans %}In practice, this approach led to many, broad uses of “Ripple.” To clarify, the community simply started calling the digital asset, “XRP.”{% endtrans %}</p>
<p>{% trans %}By June 2012, Schwartz, McCaleb and Britto completed code development and the XRP Ledger was fully functioning.{% endtrans %}</p>
<p>{% trans %}At that time, they decided their next move would be to gift 80 billion XRP to a not-yet-formed private company that would work with the broader community as well as pursue its own payments mission. The ledger code itself would be open source and for anyone to use.{% endtrans %}</p>
@@ -62,7 +62,7 @@
<div class="timeline-block mb-10">
<div class="timeline-dot"></div>
<div class="timeline-content">
<h4 class="mb-10">{% trans %}2013 OpenCoin Rebranded to Ripple Labs{% endtrans %}</h4>
<h4 class="mb-10">{% trans %}2013 OpenCoin Rebranded To Ripple Labs{% endtrans %}</h4>
<p>{% trans %}At the outset of the company, OpenCoin set out to revolutionize the global financial system. Despite the revolutionary ideals of many of Bitcoins early believers, Larsen never thought blockchain technology should be used to overthrow the existing financial system. He believed that historys most transformative innovations have always relied on the great ideas that came before them—not disrupting them.{% endtrans %}</p>
<p>{% trans %}In early conversations with potential customers, the team was asked about the differences between the Ripple project and OpenCoin company. With the community starting to call the  digital asset by its currency code "XRP" more widely, company leaders decided to rebrand the company to Ripple Labs, which has been shortened over time to "Ripple."{% endtrans %}</p>
<p>{% trans %}Today, the company uses XRP and the XRP Ledger for liquidity management in its cross-border payments business. Ripple also remains a stakeholder and contributor to the broader XRP community.{% endtrans %}</p>

View File

@@ -24,7 +24,7 @@
<h6 class="text-primary mb-4">{% trans %}Impact{% endtrans %}</h6>
</div>
<div class="col-md-6 offset-md-1">
<h2 class="mt-12 mb-10">{% trans %}The digital asset XRP is a truly global currency—ideally suited to enable todays global economy.{% endtrans %}</h2>
<h2 class="mt-12 mb-10">{% trans %}The digital asset XRP is a truly global currency—ideally suited to enable todays growing digital economy.{% endtrans %}</h2>
<p>{% trans %}As an optimal medium of exchange, XRP and the XRP Ledger on which it operates help to move money around the world faster, cheaper and more sustainably than any other currency available today.{% endtrans %}</p>
<p class="mb-10">{% trans %}It was designed this way, and its proving its impact in global payments and beyond.{% endtrans %}</p>
<a href="carbon-calculator.html" class="arrow-link text-white bold">{% trans %}How Green Is Your Currency?{% endtrans %}</a>
@@ -65,7 +65,6 @@
<p class="col-md">{% trans %}This has spawned increasing adoption of the technology across the financial services industry, from retail and institutional investment to commercial use cases like cross-border payments.{% endtrans %}</p>
<p class="col-md">{% trans %}With usage growing, its critical that measures are taken today to ensure that the technology is environmentally sustainable tomorrow.{% endtrans %}</p>
</div>
<a href="#" class="btn btn-outline-secondary">{% trans %}Learn More{% endtrans %}</a>
</div>
</section>
@@ -95,7 +94,7 @@
</div>
<div class="col-md-8">
<h2 class="mb-10">{% trans %}What Makes XRP and the XRP Ledger Green?{% endtrans %}</h2>
<h5 class="mb-10 normal">{% trans %}Most currency today—whether digital or physical—is not environmentally friendly. The potential for long-term impact on our planet could hold startling consequences.{% endtrans %}</h5>
<h5 class="mb-10 normal">{% trans %}Most currency today—whether digital or physical—is not environmentally friendly. The potential long-term impact on our planet could hold startling consequences.{% endtrans %}</h5>
<div class="row mb-10">
<div class="col-md">
<p>{% trans %}The digital asset XRP was designed with sustainability in mind. The XRP Ledger processes transactions through a unique “consensus” mechanism that consumes negligible energy and all XRP currency is already in circulation.{% endtrans %}</p>

View File

@@ -51,13 +51,13 @@
<td class="">{% trans %}500 seconds to settle{% endtrans %}</td>
</tr>
<tr>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w32" src="assets/img/icons/low-cost.png"></div>{% trans %}Low Cost{% endtrans %}</td>
<td class="">{% trans %}$0.00002/transaction{% endtrans %}</td>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w32" src="assets/img/icons/low-cost.png"></div>{% trans %}Low-Cost{% endtrans %}</td>
<td class="">{% trans %}$0.0002/transaction{% endtrans %}</td>
<td class="">{% trans %}$0.50/transaction{% endtrans %}</td>
</tr>
<tr>
<td class="bold"><div class="w48 mr-3 text-center d-sm-inline-block no-wrap"><img class="w44" src="assets/img/icons/scalable.png"></div>{% trans %}Scalable{% endtrans %}</td>
<td class="">{% trans %}1500 transactions per second{% endtrans %}</td>
<td class="">{% trans %}1,500 transactions per second{% endtrans %}</td>
<td class="">{% trans %}3 transactions per second{% endtrans %}</td>
</tr>
<tr class="border-none">
@@ -117,7 +117,7 @@
<div class="w-100 mt-20"></div>
<div class="col-md-4 mb-20">
<h4>{% trans %}Businesses{% endtrans %}</h4>
<p class="my-10">{% trans %}Many businesses are building on the XRP Ledger, pursuing powerful use cases in decentralized finance micropayments, gaming, web monetization and more. Additionally, Ripple, the technology company, is focused on building a network and infrastructure that leverages XRP to power faster, more affordable cross-border payments around the world.{% endtrans %}</p>
<p class="my-10">{% trans %}Many businesses are building on the XRP Ledger, pursuing powerful use cases in decentralized finance, micropayments, gaming, web monetization and more. Additionally, Ripple, the technology company, is focused on building a network and infrastructure that leverages XRP to power faster, more affordable cross-border payments around the world.{% endtrans %}</p>
<a href="businesses.html" class="text-white bold arrow-link">{% trans %}More About Businesses{% endtrans %}</a>
</div>
<div class="col-md-4 mb-20">
@@ -148,7 +148,7 @@
<img class="mw-100" src="./img/overview/low-cost.png">
</div>
<div class="col-md-4 offset-md-2">
<h2 class="mb-10">{% trans %}Low Cost{% endtrans %}</h2>
<h2 class="mb-10">{% trans %}Low-Cost{% endtrans %}</h2>
<p>{% trans %}XRP transactions cost a fraction of a penny ($0.0002)—much less than other cryptocurrencies and average fiat payments.{% endtrans %}</p>
</div>
</div>
@@ -235,7 +235,7 @@
</div>
<div class="col-md-5 order-2 order-md-1">
<h2 class="mb-10">{% trans %}XRPL.org: For the Community, by the Community{% endtrans %}</h2>
<p>{% trans %}XRPL.org is a community-driven resource for all things XRP and XRP Ledger (XRPL). If youd like to suggest additional information around XRP, you can suggest changes here.{% endtrans %}</p>
<p>{% trans %}XRPL.org is a community-driven resource for all things XRP and XRP Ledger (XRPL). If youd like to suggest additional information around XRP, you can suggest changes <a href="contribute.html">here</a>.{% endtrans %}</p>
<a href="contribute.html" class="mt-10 btn btn-outline-secondary">{% trans %}Suggest Changes{% endtrans %}</a>
</div>
</div>

View File

@@ -20,7 +20,7 @@
<div class="container">
<section class="row mb-20">
<div class="col-md-4 d-flex flex-column-reverse justify-content-end">
<h1 class="mb-10">{% trans %}The Best Way to Move Money Around the World{% endtrans %}</h1>
<h1 class="mb-10">{% trans %}The Best Way To Move Money Around the World{% endtrans %}</h1>
<h6 class="text-primary mb-4">{% trans %}Using XRP{% endtrans %}</h6>
</div>
<div class="col-md-6 offset-md-1">