API tool style cleanup

This commit is contained in:
mDuo13
2018-04-25 17:30:32 -07:00
parent 9c8ffdf7c5
commit 323b9f66b8
8 changed files with 166 additions and 161 deletions

View File

@@ -466,11 +466,10 @@ pages:
- name: WebSocket API Tool
funnel: Dev Tools
template: template-ripple-api-tool.html
html: websocket-api-tool.html
sidebar: custom
targets:
- local
template: template-ripple-api-tool.html
- name: Data API v2 Tool
funnel: Dev Tools

View File

@@ -234,23 +234,22 @@ a.current {
}
/* End of code tabs stuff */
.button {
border-radius: 5px;
background-color: #27a2db;
padding: 5px 20px;
text-align: center;
cursor: default;
margin: 10px 0;
-ms-user-select: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
.button, #request_button { /* Should be same as btn btn-primary */
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
color: #ffffff;
-o-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
color: #fff;
background-color: #1db4ff;
border-color: #1db4ff;
}
.button:hover {
background-color: #43bded;
@@ -530,6 +529,10 @@ th {
font-family: FontAwesome;
padding-right: 5px;
}
.breadcrumbs-wrap .breadcrumb {
margin-bottom: 0;
}
/* Accordion styling for sidebar navigation */
.sidebar_pagelist {

View File

@@ -92,7 +92,7 @@
{% endblock %}
</aside>
{% endif %}
</div>
</div><!--/.row (main layout)-->
</div>
{% include 'template-footer.html' %}

View File

@@ -6,50 +6,48 @@
{% endblock %}
{% block main %}
<div id='wrapper'>
<div style="clear:both;"></div>
<div id='command_wrapper'>
<div id='command_table'>
<div id='io_wrapper'>
<div id='input' class='io'>
<h2>REST Request</h2>
<div id='test_warning' class='alert alert-danger' style='display:none;'>
<h4>Test accounts only!</h4>
<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 style="clear:both;"></div>
<h3 id='selected_command' title='Reference information'></h3>
<p id='description'></p>
<div id='invalid'>Invalid JSON</div>
<div id='rest_url_wrapper'>
<p><span id='rest_host'>{{ currentpage.rest_host }}</span><span id='rest_url'></span></p>
</div>
<div id='request_body'></div>
<div id='request_options'>
<a class="button btn btn-primary api" id='request_button'>Send request</a>
</div>
<section class="container-fluid p-3">
<div id='command_wrapper'>
<div id='command_table'>
<div id='io_wrapper'>
<div id='input' class='io'>
<h2>REST Request</h2>
<div id='test_warning' class='alert alert-danger' style='display:none;'>
<h4>Test accounts only!</h4>
<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 id='output' class='io'>
<h2>Response</h2>
<div>
<img class="loader" src="assets/img/rippleThrobber.png" style="vertical-align: middle; display:none;"/>
<span id='rest_responsecode'></span>
</div>
<div id='response_body'></div>
<div id='tooltip'></div>
<div style="clear:both;"></div>
<h3 id='selected_command' title='Reference information'></h3>
<p id='description'></p>
<div id='invalid'>Invalid JSON</div>
<div id='rest_url_wrapper'>
<p><span id='rest_host'>{{ currentpage.rest_host }}</span><span id='rest_url'></span></p>
</div>
<div id='request_body'></div>
<div id='request_options'>
<a class="btn btn-primary api" id='request_button'>Send request</a>
</div>
</div>
<div id='output' class='io'>
<h2>Response</h2>
<div>
<img class="loader" src="assets/img/rippleThrobber.png" style="vertical-align: middle; display:none;"/>
<span id='rest_responsecode'></span>
</div>
<div id='response_body'></div>
<div id='tooltip'></div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block endbody %}
<script type='text/javascript'>
// Set some constants for the REST tool script
var URL_BASE = '{{ currentpage.rest_host }}';
var DOC_BASE = '{{ currentpage.doc_page }}';
</script>
{% endblock %}
{% block endbody %}
<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>

View File

@@ -1,6 +1,7 @@
{% extends "template-base.html" %}
{% block right_sidebar %}
<aside class="p-3">
<h2>API Methods</h2>
<ul id='command_list'>
<li class='selected'><a href='#server_info'>server_info</a></li>
@@ -32,17 +33,17 @@
<li><a href='#path_find'>path_find</a></li>
<li><a href='#book_offers'>book_offers</a></li>
</ul>
</aside>
{% endblock %}
{% block main %}
<div class='content-root'>
<section class="container-fluid p-3">
<h1>WebSocket Tool</h1>
<div id='online_state'>Offline</div>
<div style="clear:both;"></div>
<div id='command_wrapper'>
<div id='command_table'>
<div id='io_wrapper'>
<div id='input' class='io'>
<h2>WebSocket Request</h2>
<div id='test_warning' class='alert alert-danger' style='display:none;'>
<h4>Test accounts only!</h4>
<p>Never submit account secrets to a server you do not control, unless you are prepared to lose ownership of the account!</p>
@@ -77,7 +78,7 @@
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block endbody %}

View File

@@ -1,7 +1,7 @@
{% extends "template-base.html" %}
{% block main %}
<div id="container" class="lit">
<section class="container-fluid p-3">
<h1>ripple.txt Validator</h1>
<p>If you run a business that connects to the XRP Ledger, serving a <code>ripple.txt</code> file from your domain can help clarify which XRP Ledger addresses you own and use, and which validating server(s) you run.</p>
@@ -13,7 +13,7 @@
<input id="domain" type="text" required
placeholder="Domain name, e.g.example.com"
pattern="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$"><br>
<button class="cta_readmore btn">Verify ripple.txt</button>
<button class="btn btn-primary">Verify ripple.txt</button>
</fieldset>
</form>
<div id="result">
@@ -21,7 +21,7 @@
<ul id="log">
</ul>
</div>
</div>
</section>
{% endblock %}
{% block endbody %}

View File

@@ -2,13 +2,10 @@
{% block bodyclasses %}page-test-net{% endblock %}
{% block main %}
<h1>XRP Test Net Faucet</h1>
{% block right_sidebar %}
<aside id="test-net-servers" class="card">
<div class="card-body">
<p class="in-this-doc card-header">Test Net Servers</p>
<div class="card-header">Test Net Servers</div>
<p>Use the following addresses to connect to the XRP Test Net and send transactions from your account.</p>
<h5>Websockets and Ripple API</h4>
<pre><code>wss://s.altnet.rippletest.net:51233</code></pre>
@@ -16,18 +13,23 @@
<pre><code>https://s.altnet.rippletest.net:51234</code></pre>
</div>
</aside>
{% endblock %}
<div class="content">
<p>Ripple has created this alternative XRP Ledger test network with nodes in every region of the world to provide a testing platform for any software products built on the XRP Ledger without using real funds.</p>
<p>Test Net funds are intended for <strong>testing</strong> only. The Test Net ledger and balances will be reset on a regular basis.</p>
<button class="cta_readmore btn">Generate credentials</button>
<div id='your-credentials'></div>
<div id='loader' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<div id='address'></div>
<div id='secret'></div>
<div id='balance'></div>
</div>
{% block main %}
<section class="container-fluid p-3">
<h1>XRP Test Net Faucet</h1>
<div class="content">
<p>Ripple has created this alternative XRP Ledger test network with nodes in every region of the world to provide a testing platform for any software products built on the XRP Ledger without using real funds.</p>
<p>Test Net funds are intended for <strong>testing</strong> only. The Test Net ledger and balances will be reset on a regular basis.</p>
<button class="btn btn-primary">Generate credentials</button>
<div id='your-credentials'></div>
<div id='loader' style="display: none;"><img class='throbber' src="assets/img/rippleThrobber.png"> Generating Keys...</div>
<div id='address'></div>
<div id='secret'></div>
<div id='balance'></div>
</div>
</section>
{% endblock %}
{% block endbody %}

View File

@@ -3,100 +3,102 @@
{% block bodyclasses %}rpc-tool{% endblock %}
{% block main %}
<h1>RPC Tool</h1>
<div class="content">
<section class="container-fluid p-3">
<h1>RPC Tool</h1>
<div class="content">
<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">
<fieldset><input id="target" class="input-xxlarge" required="" type="text" placeholder="Ripple address or transaction ID" />
<span class="help-block"><small>Try an account like <em>r9kiSEUEw6iSCNksDVKf9k3AyxjW3r1qPf</em>.</small></span>
<button class="btn btn-primary">Get info</button></fieldset>
</form>
<div id="result">
<h2>Result</h2>
<div id="progress" class="progress">
<div class="bar"></div>
</div>
<div id="error" class="alert alert-error"></div>
<ul id="links" class="nav nav-pills">
<li><a id="permalink" href="#" target="_blank" rel="noopener">Permalink</a></li>
<li><a id="graphlink" href="#" target="_blank" rel="noopener">Graph</a></li>
</ul>
<div class="alert alert-info"><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
as a little <code>/* */</code> comment in your copy/pasted text.</div>
<div class="group group-tx">
<h3>tx</h3>
<ul class="tools nav nav-pills">
<li><a class="tx-expand">expand all</a></li>
<li><a class="tx-collapse">collapse all</a></li>
</ul>
<pre id="tx_info" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="tx-expand">expand all</a></li>
<li><a class="tx-collapse">collapse all</a></li>
</ul>
</div>
<form id="account-entry">
<fieldset><input id="target" class="input-xxlarge" required="" type="text" placeholder="Ripple address or transaction ID" />
<span class="help-block"><small>Try an account like <em>r9kiSEUEw6iSCNksDVKf9k3AyxjW3r1qPf</em>.</small></span>
<button class="btn btn-primary">Get info</button></fieldset>
</form>
<div id="result">
<h2>Result</h2>
<div id="progress" class="progress">
<div class="bar"></div>
</div>
<div id="error" class="alert alert-error"></div>
<ul id="links" class="nav nav-pills">
<li><a id="permalink" href="#" target="_blank" rel="noopener">Permalink</a></li>
<li><a id="graphlink" href="#" target="_blank" rel="noopener">Graph</a></li>
</ul>
<div class="alert alert-info"><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
as a little <code>/* */</code> comment in your copy/pasted text.</div>
<div class="group group-tx">
<h3>tx</h3>
<ul class="tools nav nav-pills">
<li><a class="tx-expand">expand all</a></li>
<li><a class="tx-collapse">collapse all</a></li>
</ul>
<pre id="tx_info" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="tx-expand">expand all</a></li>
<li><a class="tx-collapse">collapse all</a></li>
</ul>
</div>
<div class="group group-account">
<h3>account_info</h3>
<pre id="account_info" class="json"></pre>
<h3>account_lines</h3>
<ul class="tools nav nav-pills">
<li><a class="account-lines-expand">expand all</a></li>
<li><a class="account-lines-collapse">collapse all</a></li>
</ul>
<pre id="account_lines" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="account-lines-expand">expand all</a></li>
<li><a class="account-lines-collapse">collapse all</a></li>
</ul>
<h3>account_tx (last 20)</h3>
<ul class="tools nav nav-pills">
<li><a class="account-tx-expand-tx">expand tx</a></li>
<li><a class="account-tx-expand">expand all</a></li>
<li><a class="account-tx-collapse">collapse all</a></li>
<li><a class="account-tx-more">next 20</a></li>
<li><a class="account-tx-back">prev 20</a></li>
</ul>
<pre id="account_tx" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="account-tx-expand-tx">expand tx</a></li>
<li><a class="account-tx-expand">expand all</a></li>
<li><a class="account-tx-collapse">collapse all</a></li>
<li><a class="account-tx-more">next 20</a></li>
<li><a class="account-tx-back">prev 20</a></li>
</ul>
<h3>account_offers</h3>
<ul class="tools nav nav-pills">
<li><a class="account-offers-expand">expand all</a></li>
<li><a class="account-offers-collapse">collapse all</a></li>
</ul>
<pre id="account_offers" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="account-offers-expand">expand all</a></li>
<li><a class="account-offers-collapse">collapse all</a></li>
</ul>
</div>
<div class="group group-account">
<h3>account_info</h3>
<pre id="account_info" class="json"></pre>
<h3>account_lines</h3>
<ul class="tools nav nav-pills">
<li><a class="account-lines-expand">expand all</a></li>
<li><a class="account-lines-collapse">collapse all</a></li>
</ul>
<pre id="account_lines" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="account-lines-expand">expand all</a></li>
<li><a class="account-lines-collapse">collapse all</a></li>
</ul>
<h3>account_tx (last 20)</h3>
<ul class="tools nav nav-pills">
<li><a class="account-tx-expand-tx">expand tx</a></li>
<li><a class="account-tx-expand">expand all</a></li>
<li><a class="account-tx-collapse">collapse all</a></li>
<li><a class="account-tx-more">next 20</a></li>
<li><a class="account-tx-back">prev 20</a></li>
</ul>
<pre id="account_tx" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="account-tx-expand-tx">expand tx</a></li>
<li><a class="account-tx-expand">expand all</a></li>
<li><a class="account-tx-collapse">collapse all</a></li>
<li><a class="account-tx-more">next 20</a></li>
<li><a class="account-tx-back">prev 20</a></li>
</ul>
<h3>account_offers</h3>
<ul class="tools nav nav-pills">
<li><a class="account-offers-expand">expand all</a></li>
<li><a class="account-offers-collapse">collapse all</a></li>
</ul>
<pre id="account_offers" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="account-offers-expand">expand all</a></li>
<li><a class="account-offers-collapse">collapse all</a></li>
</ul>
</div>
<div class="group group-ledger">
<h3>ledger</h3>
<ul class="tools nav nav-pills">
<li><a class="ledger-expand-tx">expand tx</a></li>
<li><a class="ledger-tx-expand">expand all</a></li>
<li><a class="ledger-tx-collapse">collapse all</a></li>
</ul>
<pre id="ledger_info" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="ledger-tx-expand-tx">expand tx</a></li>
<li><a class="ledger-tx-expand">expand all</a></li>
<li><a class="ledger-tx-collapse">collapse all</a></li>
</ul>
</div>
<div class="group group-ledger">
<h3>ledger</h3>
<ul class="tools nav nav-pills">
<li><a class="ledger-expand-tx">expand tx</a></li>
<li><a class="ledger-tx-expand">expand all</a></li>
<li><a class="ledger-tx-collapse">collapse all</a></li>
</ul>
<pre id="ledger_info" class="json"></pre>
<ul class="tools nav nav-pills">
<li><a class="ledger-tx-expand-tx">expand tx</a></li>
<li><a class="ledger-tx-expand">expand all</a></li>
<li><a class="ledger-tx-collapse">collapse all</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block endbody %}