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

Style fixes for tools & 404 page:

Browse Source 
- Set Bootstrap colors for background colors
- Adjust button padding to work in more contexts
- Removed unused tool CSS. Migrated some styles to SCSS.
- Fix sticky overlap in faucets sidebar
- Make 404 page inherit from base template
This commit is contained in:
mDuo13
2020-09-11 18:02:57 -07:00
parent 84fec223e9
commit 2c3a6e0c82
25 changed files with 284 additions and 692 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
assets/css/api-tools.css
View File

@@ -1,335 +0,0 @@
#command_list {
list-style-type:none;
padding:0 0 0 0;
border-left: none;
}
aside.sidebar {
padding-top: 15px;
}
#command_list li {
width: 200px;
}
#command_list li.selected a {
cursor: default;
text-decoration: none;
color: #444;
background: #f0f0f0;
}
#command_list li.separator {
color: #474648;
font-family: "Open Sans",sans-serif;
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
margin-top: 10px;
}
h3 {
margin:16px 0;
font-family:'open sans';
font-weight:300;
font-size:24.5px;
}
#status {
height:120px;
overflow:auto;
margin-bottom:10px;
border-radius:4px;
border:1px dotted #aaa;
background:#f5f5f5;
resize:vertical;
display:none;
}
#status * {
resize: none;
}
#status div.result {
border-bottom:1px dotted #aaa;
padding:5px 0;
}
#status div.result p {
font-size:14px;
}
#status div.result div.key {
padding:2px 2px 2px 6px;
}
#info span.command_name {
display:inline-block;
}
#info span.timestamp, #info span.sizestamp {
display:inline-block;
margin:0 5px;
color:#aaa;
}
#response.success {
border-top:4px solid #B5CAA0;
}
#response.error {
border-top: 4px solid #E83015;
}
#response div.result {
border-bottom:1px dotted #aaa;
overflow:auto;
}
#response:focus, #status:focus {
outline:none;
}
#request_options > div {
margin-top: 5px;
}
#sign_button {
display:none;
background:#42602D;
margin-right:22px !important;
}
#sign_button.depressed {
background:#304621;
}
.obscured {
opacity:.7;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
cursor:default;
}
::-webkit-scrollbar-thumb {
background:#aaa;
border-radius: 4px;
cursor:pointer;
}
#online_state {
top:10px;
line-height:30px;
font-size:14px;
font-style:italic;
}
#online_state.disconnected {
color:#E83015;
}
#online_state.connecting { }
#online_state.connected {
color: #4A593D;
}
#invalid {
display:none;
color:#E83015;
font-family:'open sans';
font-size:14px;
}
#pause_button {
display:inline-block;
position:relative;
right:-12px;
top:3px;
background:#aaa;
color:#fff;
font-size:10px;
cursor:pointer;
font-weight:bold;
letter-spacing:-5px;
text-align:center;
width:28px;
padding-right:6px;
padding-bottom:2px;
border-radius:4px;
vertical-align:top;
display:none;
}
ul.toolbar {
background:#f5f5f5;
font-size:.8em;
border-radius:4px;
}
ul.toolbar li {
display:inline-block;
width:50px;
text-align:center;
color:#0088CC;
line-height:28px;
padding:0 8px;
cursor:pointer;
}
/* JSON syntax highlighting */
#request, #request_body,
#response, #response_body,
#rest_url_wrapper {
font-family:'inconsolata',monospace;
font-size:13px;
line-height:20px;
padding:6px;
background:#f5f5f5;
border:1px dotted #aaa;
border-radius:4px;
cursor:text;
overflow:auto;
}
#status > div {
border-bottom:1px dotted #aaa;
}
#selected_command a {
text-decoration:none;
color:#3a87ad;
}
#tooltip {
position:absolute;
display:none;
padding:8px 16px;
border-radius:4px;
background:#FBEFD5;
border:1px dotted #7A6943;
color:#7A6943;
font-family:'open sans';
font-weight:300;
font-size:14px;
line-height:1.5em;
max-width:300px;
z-index:99;
}
.CodeMirror {
background:inherit !important;
color:inherit !important;
height: auto !important;
line-height:1.3 !important;
font-size:14px !important;
}
.CodeMirror-selected {
background:#ddd !important;
}
/* JSON property */
span.cm-string:first-of-type {
font-weight:bold !important;
color:#574C57 !important;
}
span.cm-string {
color:#516E41 !important;
}
span.cm-number {
color:#F05E1C !important;
}
span.cm-atom {
color:#66327C !important;
}
/* Progress spinner animation */
@keyframes rotating {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
.loader {
width: 24px;height:24px;
}
/* Rest-tool-specific stuff */
#rest_method {
display: inline-block;
padding: 6px;
vertical-align: middle;
border: 1px dotted #aaa;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
margin-bottom: 3px;
background-color: #c7254e;
color: white;
appearance: none;
-moz-appearance: none;
}
#rest_url_wrapper {
font-family: sans-serif;
display: inline-block;
text-indent: -2em;
padding-left: 2.5em;
width: 100%;
}
#rest_url {
width: auto;
border: 0;
background: none;
font-size:13px;
vertical-align: top;
}
#rest_url .editable {
font-weight: bold;
font-family:'inconsolata',monospace;
border-width: 0 0px 1px 0;
border-style: dotted;
border-color: #aaa;
min-width: 5em;
background: none;
vertical-align: top;
}
#rest_url .non_editable {
vertical-align: top;
}
#rest_url_wrapper p {
margin: 0;
}
#rest_url div {
display: inline-block;
}
#rest_url input {
margin: 0 !important;
}
#rest_url div label,
#rest_url div input {
display: block;
}

2
assets/css/devportal.css
View File

File diff suppressed because one or more lines are too long

5
assets/css/devportal.css.map
View File

File diff suppressed because one or more lines are too long

119
assets/css/rpc-tool.css
View File

@@ -1,119 +0,0 @@
.input-xxlarge {
width: 100%;
padding: 5px;
}
.progress .bar {
width:0%;
height:100%;
color:#ffffff;
float:left;
font-size:12px;
text-align:center
;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
background-color:#0e90d2;
background-image:-moz-linear-gradient(top, #149bdf, #0480be);
background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
background-image:-webkit-linear-gradient(top, #149bdf, #0480be);
background-image:-o-linear-gradient(top, #149bdf, #0480be);
background-image:linear-gradient(to bottom, #149bdf, #0480be);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.15);-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;box-sizing:border-box;
-webkit-transition:width 0.6s ease;
-moz-transition:width 0.6s ease;
-o-transition:width 0.6s ease;
transition:width 0.6s ease;
}
#result {
display: none;
}
#log {
font-weight: 700;
}
.json .name {
color: #A513AC;
}
.json ul {
margin: 0;
display: none;
}
.json li {
padding: 0;
list-style-type: none;
}
.json .type-string .val {
color: #CC2A41;
}
.json .type-number .val {
color: #2973BA;
}
.json a.toggle:hover {
text-decoration: none;
}
.json > a.toggle {
display: none;
}
.json a.toggle:after {
content: " +\0000a0";
cursor: pointer;
}
.json > ul,
.json .expanded > ul {
display: block;
}
.json .ellipsis {
color: #ccc;
}
.json > .ellipsis,
.json .expanded > .ellipsis {
display: none;
}
.json .expanded > a.toggle:after {
content: " \2212\0000a0";
}
.json .indentafter {
display: none;
}
.json .expanded > .indentafter {
display: inline;
}
.tools {
background-color: #f5f5f5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 0.8em;
margin: 0 0 10px;
}
.tools>li>a {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 6px 9px;
}

8
assets/js/apitool-websocket.js
View File

@@ -65,8 +65,8 @@ function make_commands_clickable() {
select_request(cmd); select_request(cmd);
window.location.hash = cmd; window.location.hash = cmd;
$(this).siblings().removeClass('selected'); $(this).siblings().removeClass('active');
$(this).addClass('selected'); $(this).addClass('active');
}); });
} }
@@ -86,8 +86,8 @@ function select_request(request) {
} else { } else {
el = commandlist.find("li a[href='#"+request+"']").parent() el = commandlist.find("li a[href='#"+request+"']").parent()
} }
$(el).siblings().removeClass('selected'); $(el).siblings().removeClass('active');
$(el).addClass('selected'); $(el).addClass('active');
const command = requests[request]; const command = requests[request];
if (command === undefined) { if (command === undefined) {

24
assets/js/rpc-tool.js
View File

@@ -60,14 +60,14 @@ jQuery(function ($) {
$("#result > .group-account").show(); $("#result > .group-account").show();
$("#progress .bar").css("width", "10%"); $("#progress .progress-bar").css("width", "10%");
$("#datalink").attr("href", null).parent().addClass("disabled"); $("#datalink").attr("href", null).parent().addClass("disabled");
async.waterfall([ async.waterfall([
function (callback) { function (callback) {
remote.request_account_info({account:account}) remote.request_account_info({account:account})
.on('success', function (result) { .on('success', function (result) {
$("#progress .bar").css("width", "20%"); $("#progress .progress-bar").css("width", "20%");
console.log('account_info', result); console.log('account_info', result);
format(result, $("#account_info")); format(result, $("#account_info"));
callback(); callback();
@@ -78,7 +78,7 @@ jQuery(function ($) {
function (callback) { function (callback) {
remote.request_account_lines({account:account}) remote.request_account_lines({account:account})
.on('success', function (result) { .on('success', function (result) {
$("#progress .bar").css("width", "40%"); $("#progress .progress-bar").css("width", "40%");
console.log('account_lines', result); console.log('account_lines', result);
format(result, $("#account_lines")); format(result, $("#account_lines"));
callback(); callback();
@@ -89,14 +89,14 @@ jQuery(function ($) {
function (callback) { function (callback) {
requestTx(account, function (err) { requestTx(account, function (err) {
if (err) return callback(err); if (err) return callback(err);
$("#progress .bar").css("width", "60%"); $("#progress .progress-bar").css("width", "60%");
callback(); callback();
}); });
}, },
function (callback) { function (callback) {
remote.request_account_offers({account:account}) remote.request_account_offers({account:account})
.on('success', function (result) { .on('success', function (result) {
$("#progress .bar").css("width", "80%"); $("#progress .progress-bar").css("width", "80%");
console.log('account_offers', result); console.log('account_offers', result);
format(result, $("#account_offers")); format(result, $("#account_offers"));
callback(); callback();
@@ -106,18 +106,18 @@ jQuery(function ($) {
} }
], function (err) { ], function (err) {
if (err) handleError(err); if (err) handleError(err);
$("#progress .bar").css("width", "100%"); $("#progress .progress-bar").css("width", "100%");
$("#progress").fadeOut(); $("#progress").fadeOut();
}); });
} else if (reLedgerSeq.exec(target)) { } else if (reLedgerSeq.exec(target)) {
$("#result > .group-ledger").show(); $("#result > .group-ledger").show();
// Ledger // Ledger
$("#progress .bar").css("width", "10%"); $("#progress .progress-bar").css("width", "10%");
remote.request_ledger(undefined, { transactions: true, expand: true }) remote.request_ledger(undefined, { transactions: true, expand: true })
.ledger_index(+target) .ledger_index(+target)
.on('success', function (result) { .on('success', function (result) {
$("#progress .bar").css("width", "100%"); $("#progress .progress-bar").css("width", "100%");
$("#progress").fadeOut(); $("#progress").fadeOut();
console.log('ledger', result.ledger); console.log('ledger', result.ledger);
format(result.ledger, $("#ledger_info")); format(result.ledger, $("#ledger_info"));
@@ -125,7 +125,7 @@ jQuery(function ($) {
.on('error', function (err) { .on('error', function (err) {
console.log(err); console.log(err);
handleError(err); handleError(err);
$("#progress .bar").css("width", "100%"); $("#progress .progress-bar").css("width", "100%");
$("#progress").fadeOut(); $("#progress").fadeOut();
}) })
.request(); .request();
@@ -135,17 +135,17 @@ jQuery(function ($) {
$("#datalink").attr("href", "https://ripple.com/client/#/tx/?id=" + target); $("#datalink").attr("href", "https://ripple.com/client/#/tx/?id=" + target);
// Transaction // Transaction
$("#progress .bar").css("width", "10%"); $("#progress .progress-bar").css("width", "10%");
remote.requestTransaction({"hash": target, "binary": false}) remote.requestTransaction({"hash": target, "binary": false})
.on('success', function (result) { .on('success', function (result) {
$("#progress .bar").css("width", "100%"); $("#progress .progress-bar").css("width", "100%");
$("#progress").fadeOut(); $("#progress").fadeOut();
console.log('tx', result); console.log('tx', result);
format(result, $("#tx_info")); format(result, $("#tx_info"));
}) })
.on('error', function (err) { .on('error', function (err) {
handleError(err); handleError(err);
$("#progress .bar").css("width", "100%"); $("#progress .progress-bar").css("width", "100%");
$("#progress").fadeOut(); $("#progress").fadeOut();
}) })
.request(); .request();

3
dactyl-config.yml
View File

@@ -69,7 +69,7 @@ targets:
# Override them with --vars to change which fork/branch to edit. # Override them with --vars to change which fork/branch to edit.
github_forkurl: https://github.com/ripple/xrpl-dev-portal github_forkurl: https://github.com/ripple/xrpl-dev-portal
github_branch: master github_branch: master
prefix: "/" prefix: ""
link_subs: link_subs:
"./src/api-v3/paths/preparations/payments.ts": "https://github.com/xpring-eng/xrp-api/blob/master/src/api-v3/paths/preparations/payments.ts" "./src/api-v3/paths/preparations/payments.ts": "https://github.com/xpring-eng/xrp-api/blob/master/src/api-v3/paths/preparations/payments.ts"
readability_goals: readability_goals:
@@ -6474,6 +6474,7 @@ pages:
- name: 404 Not Found - name: 404 Not Found
html: 404.html html: 404.html
template: template-404.html template: template-404.html
prefix: "/"
targets: targets:
- en - en
- ja - ja

10
styles/_buttons.scss
View File

@@ -1,18 +1,16 @@
// Button styling -------------------------------------------------------------- // Button styling --------------------------------------------------------------
.btn, .content a.button { .btn, .content a.button {
padding: 16px 24px;
font-size: 14px;
font-weight: bold; font-weight: bold;
line-height: 1.25;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
transition: 0.2s; transition: 0.2s;
} }
.form-group .btn { .content a.button {
// Fix spacing issues caused by default padding padding: .5rem 1rem;
padding: inherit; margin: 0 0.5rem;
display: inline-block;
} }
.btn.disabled, .btn.disabled,

6
styles/_colors.scss
View File

@@ -129,7 +129,7 @@ $input-disabled-bg: $gray-800;
$input-color: $white; $input-color: $white;
$input-border-color: transparent; $input-border-color: transparent;
$input-box-shadow: inset 0 1px 1px rgba($primary, .075); $input-box-shadow: inset 0 1px 1px rgba($primary, .075);
$input-placeholder-color: $gray-200; $input-placeholder-color: $gray-400;
$input-group-addon-bg: $gray-600; $input-group-addon-bg: $gray-600;
$input-group-addon-color: $white; $input-group-addon-color: $white;
@@ -138,3 +138,7 @@ $list-group-border-color: $gray-800;
$list-group-disabled-color: $gray-200; $list-group-disabled-color: $gray-200;
$progress-bg: $gray-900; $progress-bg: $gray-900;
$modal-content-bg: $black;
$modal-content-border-color: $gray-200;
$close-color: $magenta-500;

6
styles/_content.scss
View File

@@ -131,10 +131,10 @@ td:nth-child(1) {
&-50 { &-50 {
flex-basis: calc(50% - 30px); flex-basis: calc(50% - 30px);
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
flex-basis: calc(25% - 30px); flex-basis: calc(50% - 30px);
}
} }
} }

81
styles/_dev-tools.scss
View File

@@ -11,44 +11,7 @@
top: 16px; top: 16px;
} }
/* Progress spinner animation */ .throbber {
@keyframes rotating {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
.page-test-net .throbber,
.page-tx-sender .throbber,
.interactive-block .throbber {
width: 24px;height:24px; width: 24px;height:24px;
} }
@@ -94,3 +57,45 @@
} }
} }
} }
#rest_url_wrapper p {
margin: 0;
border-radius: 4px;
// $code-bg and $code-padding are from _code-tabs.scss
background-color: $code-bg;
padding: $code-padding;
overflow: auto;
}
#rest_url {
width: auto;
border: 0;
background: none;
font-size:13px;
vertical-align: top;
.editable {
color: $white;
font-weight: bold;
font-family: $font-family-monospace;
border-width: 0 0px 1px 0;
border-style: dotted;
border-color: $gray-200;
min-width: 5em;
background: none;
vertical-align: top;
}
.non_editable {
vertical-align: top;
}
div {
display: inline-block;
}
input {
margin: 0 !important;
}
}

96
styles/_rpc-tool.scss Normal file
View File

@@ -0,0 +1,96 @@
// Styles for the legacy XRP Ledger RPC Tool. Minimally maintained.
.rpc-tool {
#result {
display: none;
}
#log {
font-weight: 700;
}
.content .json li {
margin-top: 0;
}
.json .name {
color: $white;
}
.json ul {
margin: 0;
display: none;
}
.json li {
padding: 0;
list-style-type: none;
}
.json .type-string .val {
color: $green-700;
}
.json .type-number .val {
color: $blue-500;
}
.json a.toggle:hover {
text-decoration: none;
}
.json > a.toggle {
display: none;
}
.json a.toggle:after {
content: " +\0000a0";
cursor: pointer;
}
.json > ul,
.json .expanded > ul {
display: block;
}
.json .ellipsis {
color: $gray-500;
}
.json > .ellipsis,
.json .expanded > .ellipsis {
display: none;
}
.json .expanded > a.toggle:after {
content: " \2212\0000a0";
}
.json .indentafter {
display: none;
}
.json .expanded > .indentafter {
display: inline;
}
.tools {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 0.8em;
margin: 0 0 10px;
}
.tools>li>a {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 6px 9px;
}
}

52
styles/_side-nav.scss
View File

@@ -13,7 +13,9 @@ aside .sidenav_cat_title:hover {
} }
aside a.active, aside a.active,
aside a.active:hover { aside a.active:hover,
aside .active > a,
aside .active > a:hover {
color: $primary; color: $primary;
font-weight: 700; font-weight: 700;
} }
@@ -26,7 +28,8 @@ aside a.active-parent {
border-left: 1px solid $white; border-left: 1px solid $white;
} }
.sidebar_pagelist a, .sidebar_pagelist a,
.right-sidebar li a { .command-list li a,
.page-toc li a {
display: block; display: block;
margin-top: 5px; margin-top: 5px;
margin-left: -17px; margin-left: -17px;
@@ -69,7 +72,8 @@ aside a.active-parent {
background-color: $primary; background-color: $primary;
} }
.right-sidebar .card-body { #page-toc-wrapper .card-body,
.command-list {
border-left: 1px solid $white; border-left: 1px solid $white;
} }
@@ -81,32 +85,40 @@ aside a.active-parent {
padding: 15px 16px 15px 10px; padding: 15px 16px 15px 10px;
} }
.right-sidebar .level-1 a { .page-toc .level-1 a {
color: $white; color: $white;
} }
.right-sidebar .level-3 { .page-toc .level-3 {
padding-left: 16px; padding-left: 16px;
border-left: 1px solid $white; border-left: 1px solid $white;
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 5px; padding-bottom: 5px;
} }
.right-sidebar .level-3 a { .page-toc .level-3 a {
margin-top: 0; margin-top: 0;
padding-bottom: 5px; padding-bottom: 5px;
} }
.right-sidebar li a:hover { .command-list li a:hover,
.page-toc li a:hover {
text-decoration: none; text-decoration: none;
border-left: 1px solid $primary; border-left: 1px solid $primary;
padding-left: 34px; padding-left: 34px;
} }
.command-list .active a {
border-left: 2px solid $primary;
padding-left: 33px;
}
.right-sidebar {
padding: 44px 0 24px 48px;
}
/* Left navigation ---------------------------------------------------------- */ /* Left navigation ---------------------------------------------------------- */
.tree_nav { .sidebar {
top: 48px;
padding: 44px 24px 48px 0; padding: 44px 24px 48px 0;
} }
@@ -214,7 +226,7 @@ aside a.active-parent {
/* Right navigation --------------------------------------------------------- */ /* Right navigation --------------------------------------------------------- */
.right-sidebar .card { #page-toc-wrapper .card {
position: sticky; position: sticky;
max-height: 85vh; max-height: 85vh;
top: 48px; top: 48px;
@@ -222,38 +234,42 @@ aside a.active-parent {
padding: 44px 0 48px 24px; padding: 44px 0 48px 24px;
border: none; border: none;
} }
.command-list {
padding: 16px;
}
.right-sidebar .card-header { #page-toc-wrapper .card-header {
border-bottom: none; border-bottom: none;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
padding: 10px 0; padding: 10px 0;
} }
.right-sidebar .card-header h4 { #page-toc-wrapper .card-header h4 {
line-height: 20px; line-height: 20px;
font-size: 1.2em; font-size: 1.2em;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.right-sidebar .card-body { #page-toc-wrapper .card-body {
padding: 0 0 0 16px; padding: 0 0 0 16px;
list-style-type: none; list-style-type: none;
} }
.right-sidebar ul li { .page-toc li,
.command-list li {
list-style-type: none; list-style-type: none;
margin-bottom: 8px; margin-bottom: 8px;
margin-left: 0; margin-left: 0;
} }
.right-sidebar .level-1 a, .page-toc .level-1 a,
.right-sidebar .separator { .command-list .separator {
font-weight: 700; font-weight: 700;
font-family: "Space Mono", monospace; font-family: "Space Mono", monospace;
} }
.right-sidebar .level-2, .page-toc .level-2,
.right-sidebar .method { .command-list .method {
margin-left: 0; margin-left: 0;
} }

2
styles/_top-nav.scss
View File

@@ -47,7 +47,7 @@
.btn-outline-secondary { .btn-outline-secondary {
font-size: 14px; font-size: 14px;
line-height: 125%; line-height: 125%;
margin-top: .5rem; margin-top: 1rem;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.wrap-button { .wrap-button {

10
styles/xrpl.scss
View File

@@ -3,12 +3,21 @@
@import "_colors.scss"; @import "_colors.scss";
$navbar-padding-y: 0; $navbar-padding-y: 0;
$nav-link-padding-x: 1.25rem;
$nav-link-padding-y: 1rem;
$navbar-nav-link-padding-x: 1.25rem; $navbar-nav-link-padding-x: 1.25rem;
$navbar-nav-link-padding-y: 1rem;
$border-radius: 0; $border-radius: 0;
$border-radius-lg: 0; $border-radius-lg: 0;
$border-radius-sm: 0; $border-radius-sm: 0;
$dropdown-border-width: 1px; $dropdown-border-width: 1px;
$input-btn-padding-y: 1rem;
$input-btn-padding-x: 1.5rem;
$input-btn-font-size: 14px;
$input-btn-line-height: 1.25;
$input-font-size: 1rem;
// @import "_font-face.scss"; // @import "_font-face.scss";
$font-family-monospace: 'Space Mono', monospace; $font-family-monospace: 'Space Mono', monospace;
$font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif; $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
@@ -40,3 +49,4 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
@import "_dev-tools.scss"; @import "_dev-tools.scss";
@import "_print.scss"; @import "_print.scss";
@import "_pages.scss"; @import "_pages.scss";
@import "_rpc-tool.scss";

117
tool/template-404.html
View File

@@ -1,96 +1,6 @@
<!DOCTYPE html> {% extends "template-base.html" %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>404 Not Found - XRP Ledger Dev Portal</title> {% block main %}
<!-- favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
<link rel="manifest" href="/assets/favicons/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#25A768">
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#25A768">
<!-- jQuery -->
<script src="/assets/vendor/jquery-1.11.1.min.js"></script>
<!-- Custom Stylesheets. -->
<link href="/assets/vendor/bootstrap.css" rel="stylesheet" />
<link href="/assets/css/devportal.css" rel="stylesheet" />
<!-- Bootstrap JS -->
<script src="/assets/vendor/bootstrap.min.js"></script>
<!-- fontawesome icons -->
<link rel="stylesheet" href="/assets/vendor/fontawesome/css/font-awesome.min.css" />
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45576805-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-45576805-2');
</script>
</head>
<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}{% block bodyclasses %}{% endblock %}">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-white">
<a href="/index.html" class="navbar-brand"><img src="/assets/img/XRPLedger_DevPortal-black.svg" class="logo" height="44" alt="XRP Ledger Dev Portal" /></a>
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#navbarHolder" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarHolder">
<ul class="nav navbar-nav">
{% set funnels = [] %}
{% for page in pages %}
{% if page.funnel is defined and page.funnel not in funnels %}
{% set thisfunneltop = pages|selectattr('funnel', 'defined_and_equalto', page.funnel)|first %}
<li class="nav-item{% if currentpage == thisfunneltop %} active{% elif currentpage.funnel is defined and currentpage.funnel == thisfunneltop.name %} active-parent{% endif %}">
<a class="nav-link" href="/{{ thisfunneltop.html }}">{{ thisfunneltop.name }}</a>
</li>
{% set _ = funnels.append(page.funnel) %}
{% endif %}
{% endfor %}
<li class="nav-item">
<a class="nav-link" href="/blog/">Blog</a>
</li>
</ul><!-- /.navbar-nav -->
{% include 'template-github-edit.html' %}
<form class="navbar-form navbar-right" id="navbar-search" role="search" method="get" action="https://www.google.com/search">
<div class="form-inline">
<label class="sr-only" for="topsearchbar">Search site with Google...</label>
<input name="q" value="site:xrpl.org" type="hidden">
<input id="topsearchbar" name="q" type="text" class="form-control" class="top-search" placeholder="Search site with Google...">
<button type="submit" class="btn btn-default fa fa-search">&nbsp;</button>
</div>
</form>
</div>
<div class="menu-overlay"></div>
</nav>
<div class="container-fluid" role="document" id="main_content_wrapper">
<div class="row">
<!-- Right sidebar first so it's at the beginning for mobile layouts -->
{% if currentpage.sidebar is undefined or (currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only") %}
<aside class="right-sidebar col-lg-3 order-lg-4 p-0" role="complementary">
{% block right_sidebar %}{% endblock %}
</aside>
{% endif %}
<!-- main column -->
<main class="main {% if currentpage.sidebar is defined and currentpage.sidebar == "disabled" %}col-md-12{% else %}col-md-7 col-lg-6{% endif %} order-md-3 {% block mainclasses %}{% endblock %}" role="main" id="main_content_body">
{% block breadcrumbs %}
{% include 'template-breadcrumbs.html' %}
{% endblock %}
<article class="pt-3 p-md-3"> <article class="pt-3 p-md-3">
<h1>Not Found</h1> <h1>Not Found</h1>
<div class="content"> <div class="content">
@@ -105,21 +15,10 @@
</form> </form>
</div> </div>
</article> </article>
</main> {% endblock %}
{% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}
<!-- Left sidebar last so it's at the end for mobile -->
<aside class="sidebar col-md-5 col-lg-3 p-0 order-md-1" role="complementary">
{% block left_sidebar %}
{% set use_page = pages|selectattr("html", 'defined_and_equalto', "docs.html")|first %}
{% set link_prefix = "/" %}{# Links need to be absolute so they work no matter what URL the 404 page is served from #}
{% include "template-sidebar_nav.html" %}
{% endblock %}
</aside>
{% endif %}
</div><!--/.row (main layout)-->
</div>
{% include 'template-footer.html' %} {% block left_sidebar %}
{% set use_page = pages|selectattr("html", 'defined_and_equalto', "docs.html")|first %}
</body> {% set link_prefix = "/" %}{# Links need to be absolute so they work no matter what URL the 404 page is served from #}
</html> {% include "template-sidebar_nav.html" %}
{% endblock %}

10
tool/template-base.html
View File

@@ -18,14 +18,14 @@
<meta name="theme-color" content="#25A768"> <meta name="theme-color" content="#25A768">
<!-- jQuery --> <!-- jQuery -->
<script src="assets/vendor/jquery-1.11.1.min.js"></script> <script src="{{currentpage.prefix}}assets/vendor/jquery-1.11.1.min.js"></script>
<!-- Stylesheet --> <!-- Stylesheet -->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap" rel="stylesheet">
{% if target.lang=="ja" %} {% if target.lang=="ja" %}
<link href="assets/css/fonts-ja.css" rel="stylesheet" /> <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
{% endif %} {% endif %}
<link href="assets/css/devportal.css" rel="stylesheet" /> <link href="{{currentpage.prefix}}assets/css/devportal.css" rel="stylesheet" />
<!-- Google Analytics --> <!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45576805-2"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-45576805-2"></script>
@@ -64,7 +64,7 @@
<div class="row"> <div class="row">
<!-- Right sidebar first so it's at the beginning for mobile layouts --> <!-- Right sidebar first so it's at the beginning for mobile layouts -->
{% if currentpage.sidebar is undefined or (currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only") %} {% if currentpage.sidebar is undefined or (currentpage.sidebar != "disabled" and currentpage.sidebar != "left_only") %}
<aside class="right-sidebar col-lg-3 order-lg-4 p-0" role="complementary"> <aside class="right-sidebar col-lg-3 order-lg-4" role="complementary">
{% block right_sidebar %}{% endblock %} {% block right_sidebar %}{% endblock %}
</aside> </aside>
{% endif %} {% endif %}
@@ -78,7 +78,7 @@
</main> </main>
{% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %} {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}
<!-- Left sidebar last so it's at the end for mobile --> <!-- Left sidebar last so it's at the end for mobile -->
<aside class="sidebar col-md-5 col-lg-3 p-0 order-md-1" role="complementary"> <aside class="sidebar col-md-5 col-lg-3 order-md-1" role="complementary">
{% block left_sidebar %} {% block left_sidebar %}
{% include "template-sidebar_nav.html" %} {% include "template-sidebar_nav.html" %}
{% endblock %} {% endblock %}

2
tool/template-doc.html
View File

@@ -34,7 +34,7 @@
<div class="card-header"> <div class="card-header">
<h4>{% trans %}In this document{% endtrans %}</h4> <h4>{% trans %}In this document{% endtrans %}</h4>
</div> </div>
<ul class="card-body"> <ul class="card-body page-toc">
{{ sidebar_content }} {{ sidebar_content }}
</ul> </ul>
</div> </div>

2
tool/template-footer.html
View File

@@ -33,5 +33,5 @@
</footer> </footer>
<!-- Jump to top button --> <!-- Jump to top button -->
<a href="#main_content_wrapper" class="jump-to-top btn btn-primary btn-lg" role="button" title="{% trans %}Jump to top of page{% endtrans %}">{% trans %}Top{% endtrans %}</a> <a href="#main_content_wrapper" class="jump-to-top btn btn-primary" role="button" title="{% trans %}Jump to top of page{% endtrans %}">{% trans %}Top{% endtrans %}</a>
<script type="text/javascript" src="assets/js/jump-to-top.js"></script> <script type="text/javascript" src="assets/js/jump-to-top.js"></script>

17
tool/template-rest-api-tool.html
View File

@@ -6,7 +6,7 @@
<h4>API Methods</h4> <h4>API Methods</h4>
</div> </div>
<ul class="dev_nav_sidebar card-body" id='command_list'> <ul class="command-list card-body" id='command_list'>
</ul> </ul>
</div> </div>
{% endblock %} {% endblock %}
@@ -18,26 +18,29 @@
<div id='io_wrapper'> <div id='io_wrapper'>
<div id='input' class='io'> <div id='input' class='io'>
<h2>REST Request</h2> <h2>REST Request</h2>
<div id='test_warning' class='alert alert-danger' style='display:none;'> <div id='test_warning' class='devportal-callout warning d-none'>
<h4>Test accounts only!</h4> <strong>Test accounts only!</strong>
<p>Never submit account secrets to a server you do not control, unless you are prepared to lose ownership of the account!</p> <p>Never submit account secrets to a server you do not control, unless you are prepared to lose ownership of the account!</p>
</div> </div>
<div style="clear:both;"></div> <div style="clear:both;"></div>
<h3 id='selected_command' title='Reference information'></h3> <h3 id='selected_command' title='Reference information'></h3>
<p id='description'></p> <p id='description'></p>
<div id='invalid'>Invalid JSON</div> <div id="invalid" class="devportal-callout warning d-none">
<strong>Error</strong>
Invalid JSON
</div>
<div id='rest_url_wrapper'> <div id='rest_url_wrapper'>
<p><span id='rest_host'>{{ currentpage.rest_host }}</span><span id='rest_url'></span></p> <p><span id='rest_host'>{{ currentpage.rest_host }}</span><span id='rest_url'></span></p>
</div> </div>
<div id='request_body'></div> <div id='request_body'></div>
<div id='request_options'> <div id='request_options'>
<a class="btn btn-outline-secondary api" id='request_button'>Send request</a> <a class="btn btn-primary api my-2" id='request_button'>Send request</a>
</div> </div>
</div> </div>
<div id='output' class='io'> <div id='output' class='io'>
<h2>Response</h2> <h2>Response</h2>
<div> <div>
<img class="loader" src="assets/img/xrp-loader-96.png" style="vertical-align: middle; display:none;"/> <img class="throbber d-none" src="assets/img/xrp-loader-96.png" />
<span id='rest_responsecode'></span> <span id='rest_responsecode'></span>
</div> </div>
<div id='response_body'></div> <div id='response_body'></div>
@@ -54,8 +57,6 @@
var URL_BASE = '{{ currentpage.rest_host }}'; var URL_BASE = '{{ currentpage.rest_host }}';
var DOC_BASE = '{{ currentpage.doc_page }}'; var DOC_BASE = '{{ currentpage.doc_page }}';
</script> </script>
<link rel='stylesheet' type='text/css' href='assets/css/api-tools.css'/>
<!-- <link rel='stylesheet' type='text/css' href='assets/vendor/codemirror.css'/> -->
<script type='text/javascript' src='assets/js/es5-shim.js'></script> <script type='text/javascript' src='assets/js/es5-shim.js'></script>
<script type='text/javascript' src='assets/vendor/codemirror-js-json-lint.min.js'></script> <script type='text/javascript' src='assets/vendor/codemirror-js-json-lint.min.js'></script>
<script type='text/javascript' src='assets/vendor/cm-javascript.min.js'></script> <script type='text/javascript' src='assets/vendor/cm-javascript.min.js'></script>

2
tool/template-sidebar_nav.html
View File

@@ -4,7 +4,7 @@
{% if link_prefix is undefined %} {% if link_prefix is undefined %}
{% set link_prefix = "" %} {% set link_prefix = "" %}
{% endif %} {% endif %}
<div class="tree_nav"> <div class="tree-nav">
<!--{############# Parent page link ###############################}--> <!--{############# Parent page link ###############################}-->
{% if use_page.supercategory is defined %} {% if use_page.supercategory is defined %}

52
tool/template-test-net.html
View File

@@ -3,28 +3,38 @@
{% block bodyclasses %}page-test-net{% endblock %} {% block bodyclasses %}page-test-net{% endblock %}
{% block right_sidebar %} {% block right_sidebar %}
<div id="test-net-servers" class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<h4>Testnet Servers</h4> <h4>Testnet Servers</h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<p>Use the following URLs to connect to the XRP Testnet and send transactions, or <a href="connect-your-rippled-to-the-xrp-test-net.html">connect your own <code>rippled</code> server to the Testnet</a>.</p> <h4>WebSocket and RippleAPI</h4>
<h5>Websockets and Ripple API</h5> <div class="multicode" id="code-0">
<pre><code>wss://s.altnet.rippletest.net:51233</code></pre> <ul class="codetabs">
<h5>JSON-RPC</h5> <li><a href="#code-0-0">Testnet</a></li>
<pre><code>https://s.altnet.rippletest.net:51234</code></pre> <li><a href="#code-0-1">Devnet</a></li>
</div> </ul>
</div> <div class="code_sample" id="code-0-0">
<div id="devnet-servers" class="card"> <pre><code>wss://s.altnet.rippletest.net:51233</code></pre>
<div class="card-header"> </div>
<h4>Devnet Servers</h4> <div class="code_sample" id="code-0-1">
</div> <pre><code>wss://s.devnet.rippletest.net:51233</code></pre>
<div class="card-body"> </div>
<p>Use the following URLs to connect to the XRP Devnet.</p> </div>
<h5>Websockets and Ripple API</h5>
<pre><code>wss://s.devnet.rippletest.net:51233</code></pre> <h4 id="json-rpc">JSON-RPC</h4>
<h5>JSON-RPC</h5> <div class="multicode" id="code-1">
<pre><code>https://s.devnet.rippletest.net:51234</code></pre> <ul class="codetabs">
<li><a href="#code-1-0">Testnet</a></li>
<li><a href="#code-1-1">Devnet</a></li>
</ul>
<div class="code_sample" id="code-1-0">
<pre><code>https://s.altnet.rippletest.net:51234</code></pre>
</div>
<div class="code_sample" id="code-1-1">
<pre><code>https://s.devnet.rippletest.net:51234</code></pre>
</div>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
@@ -52,6 +62,12 @@
{% block endbody %} {% block endbody %}
<script type='text/javascript' src='assets/js/test-net.js'></script> <script type='text/javascript' src='assets/js/test-net.js'></script>
<script src="assets/js/multicodetab.js"></script>
<script type="application/javascript">
$(document).ready(function() {
$(".multicode").minitabs();
});
</script>
<script type="application/javascript"> <script type="application/javascript">
gtag('config', 'UA-157720658-3', {'content_group1': 'API Tools'}); gtag('config', 'UA-157720658-3', {'content_group1': 'API Tools'});

2
tool/template-top-nav.html
View File

@@ -1,6 +1,6 @@
<div class="container"> <div class="container">
<nav class="top-nav navbar navbar-expand-lg navbar-dark row"> <nav class="top-nav navbar navbar-expand-lg navbar-dark row">
<a href="{{target.prefix}}" class="navbar-brand"><img src="assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="44" alt="{{target.display_name}}" /></a> <a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="44" alt="{{target.display_name}}" /></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>

4
tool/template-websocket-api-tool.html
View File

@@ -5,7 +5,7 @@
<div class="card-header"> <div class="card-header">
<h4>API Methods</h4> <h4>API Methods</h4>
</div> </div>
<ul class="card-body" id="command_list"></ul> <ul class="card-body command-list" id="command_list"></ul>
</div> </div>
{% endblock %} {% endblock %}
@@ -51,7 +51,7 @@
<div class="input-group-prepend"> <div class="input-group-prepend">
<div class="input-group-text" id="wstool-1-keep-last-label">Keep last:</div> <div class="input-group-text" id="wstool-1-keep-last-label">Keep last:</div>
</div><!--/.input-group-prepend--> </div><!--/.input-group-prepend-->
<input type="number" value="50" aria-label="Number of responses to keep at once" aria-describedby="wstool-1-keep-last-label" class="keep-last"> <input type="number" value="50" aria-label="Number of responses to keep at once" aria-describedby="wstool-1-keep-last-label" class="form-control keep-last">
</div><!--/.input-group--> </div><!--/.input-group-->
<div class="btn-group" role="group"> <div class="btn-group" role="group">

9
tool/template-xrp-ledger-rpc-tool.html
View File

@@ -10,21 +10,21 @@
<p>This is a debug tool for printing raw information about an account, a transaction (by hash) or a ledger (by sequence number).</p> <p>This is a debug tool for printing raw information about an account, a transaction (by hash) or a ledger (by sequence number).</p>
<form id="account-entry"> <form id="account-entry">
<fieldset><input id="target" class="input-xxlarge" required="" type="text" placeholder="XRP Ledger classic address or transaction ID" /> <fieldset><input id="target" class="form-control" required="" type="text" placeholder="XRP Ledger classic address or transaction ID" />
<span class="help-block"><small>Try an account like <em>r9kiSEUEw6iSCNksDVKf9k3AyxjW3r1qPf</em>.</small></span> <span class="help-block"><small>Try an account like <em>r9kiSEUEw6iSCNksDVKf9k3AyxjW3r1qPf</em>.</small></span>
<button class="btn btn-primary">Get info</button></fieldset> <button class="btn btn-primary">Get info</button></fieldset>
</form> </form>
<div id="result"> <div id="result">
<h2>Result</h2> <h2>Result</h2>
<div id="progress" class="progress"> <div id="progress" class="progress">
<div class="bar"></div> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
</div> </div>
<div id="error" class="alert alert-error"></div> <div id="error" class="devportal-callout warning"></div>
<ul id="links" class="nav nav-pills"> <ul id="links" class="nav nav-pills">
<li><a id="permalink" href="#" target="_blank" rel="noopener">Permalink</a></li> <li><a id="permalink" href="#" target="_blank" rel="noopener">Permalink</a></li>
<li><a id="graphlink" href="#" target="_blank" rel="noopener">Graph</a></li> <li><a id="graphlink" href="#" target="_blank" rel="noopener">Graph</a></li>
</ul> </ul>
<div class="alert alert-info"><strong>Tip:</strong> This page features intelligent copy/paste. Any <div class="devportal-callout tip"><strong>Tip:</strong> This page features intelligent copy/paste. Any
nodes you expand will be copied, any that you don't expand will show up nodes you expand will be copied, any that you don't expand will show up
as a little <code>/* */</code> comment in your copy/pasted text.</div> as a little <code>/* */</code> comment in your copy/pasted text.</div>
<div class="group group-tx"> <div class="group group-tx">
@@ -102,7 +102,6 @@
{% endblock %} {% endblock %}
{% block endbody %} {% block endbody %}
<link rel='stylesheet' type='text/css' href='assets/css/rpc-tool.css'/>
<script type='text/javascript' src='assets/js/es5-shim.js'></script> <script type='text/javascript' src='assets/js/es5-shim.js'></script>
<script type='text/javascript' src='assets/js/ripple-0.11.0-min.js'></script> <script type='text/javascript' src='assets/js/ripple-0.11.0-min.js'></script>
<script type='text/javascript' src='assets/vendor/async.min.js'></script> <script type='text/javascript' src='assets/vendor/async.min.js'></script>