API tool style cleanup

5layers.yml

@@ -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

assets/css/devportal.css

@@ -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 {

tool/template-base.html

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

tool/template-rest-api-tool.html

@@ -6,8 +6,7 @@
 {% endblock %}
 
 {% block main %}
-    <div id='wrapper'>
-        <div style="clear:both;"></div>
+  <section class="container-fluid p-3">
     <div id='command_wrapper'>
         <div id='command_table'>
             <div id='io_wrapper'>
@@ -26,7 +25,7 @@
                     </div>
                     <div id='request_body'></div>
                     <div id='request_options'>
-                            <a class="button btn btn-primary api" id='request_button'>Send request</a>
+                        <a class="btn btn-primary api" id='request_button'>Send request</a>
                     </div>
                 </div>
                 <div id='output' class='io'>
@@ -41,15 +40,14 @@
             </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>

tool/template-ripple-api-tool.html

@@ -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 %}

tool/template-ripple-txt-validator.html

@@ -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 %}

tool/template-test-net.html

@@ -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 %}
+
+{% 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="cta_readmore btn">Generate credentials</button>
+    <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 %}

tool/template-xrp-ledger-rpc-tool.html

@@ -3,6 +3,7 @@
 {% block bodyclasses %}rpc-tool{% endblock %}
 
 {% block main %}
+<section class="container-fluid p-3">
   <h1>RPC Tool</h1>
   <div class="content">
 
@@ -97,6 +98,7 @@
 
     </div>
   </div>
+</section>
 {% endblock %}
 
 {% block endbody %}