Right Sidebar updates

assets/css/api-tools.css

@@ -1,6 +1,7 @@
 #command_list {
   list-style-type:none;
   padding:0 0 0 0;
+  border-left: none;
 }
 
 aside.sidebar {

assets/css/devportal.css

@@ -748,20 +748,45 @@ a.current {
 
 /* Right navigation --------------------------------------------------------- */
 
-#dactyl_toc_sidebar a {
+.right-sidebar a {
   text-decoration: none;
+  color: hsla(14.999999999999947, 1.98%, 39.61%, 1.00);
 }
-#dactyl_toc_sidebar a:hover {
+.right-sidebar a:hover,
-  text-decoration: underline;
+.right-sidebar a:active  {
+  text-decoration: none;
+  color: #000;
 }
 
-#page-toc-wrapper {
+.right-sidebar {
-  position: fixed;
+  font-size: 14px;
-  top: 75px;
+}
-  max-height: calc(100% - 150px);
+
-  margin-right: 1.5rem;
+.right-sidebar .card {
-  overflow: auto;
+  position: sticky;
-  z-index: 10;
+  top: 48px;
+  overflow: scroll;
+  padding: 44px 24px 48px;
+}
+
+.right-sidebar .card-header {
+  border-bottom: none;
+  background-color: #fff;
+  padding: 10px 0;
+  line-height: 20px;
+  font-weight: 700;
+  font-size: 1.23em;
+}
+
+.right-sidebar ul {
+  padding: 0;
+  border-left: 1px solid #eae7e6;
+  list-style-type: none;
+}
+
+.right-sidebar ul li {
+  list-style-type: none;
+  margin-bottom: 8px
 }
 
 .card .sidebar_pagelist li a {

tool/template-doc.html

@@ -30,7 +30,7 @@
 
 {% block right_sidebar %}
   <div class="card" id="page-toc-wrapper">
-    <p class="in-this-doc card-header">In this document:</p>
+    <p class="in-this-doc card-header">In this document</p>
     <ul class="dev_nav_sidebar card-body" id="dactyl_toc_sidebar">
       {{ sidebar_content }}
     </ul>

tool/template-rest-api-tool.html

@@ -1,8 +1,10 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-    <ul id='command_list'>
+    <div class="card">
-    </ul>
+        <ul class="dev_nav_sidebar card-body" id='command_list'>
+        </ul>
+    </div>
 {% endblock %}
 
 {% block main %}

tool/template-test-net.html

@@ -4,9 +4,7 @@
 
 {% block right_sidebar %}
 <div id="test-net-servers" class="card">
-  <div class="card-header bg-dark">
+  <p class="card-header">Test Net Servers</p>
-    <h3 class="card-title">Test Net Servers</h3>
-  </div><!--/.card-header-->
   <div class="card-body">
     <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>

tool/template-tx-sender.html

@@ -4,9 +4,7 @@
 
 {% block right_sidebar %}
 <div id="connection-status" class="card">
-  <div class="card-header bg-dark">
+  <p class="card-header">Status</p>
-    <h3 class="card-title">Status</h3>
-  </div><!--/.card-header-->
   <div class="card-body">
     <ul class="list-group list-group-flush">
       <li class="list-group-item" id="connection-status-label">XRP Test Net:</li>

tool/template-use-case.html

@@ -10,7 +10,7 @@
 
 {% block right_sidebar %}
   <div class="card" id="use-case-related">
-    <p class="in-this-doc card-header">Useful Background:</p>
+    <p class="in-this-doc card-header">Useful Background</p>
     <div class="card-body">
       <div class="curated-links">
         <ul>

tool/template-websocket-api-tool.html

@@ -2,37 +2,39 @@
 
 {% block right_sidebar %}
   <aside class="p-3">
-    <h2>API Methods</h2>
+        <div class="card">
-    <ul id='command_list'>
+            <p class="card-header">API Methods</p>
-        <li class='selected'><a href='#server_info'>server_info</a></li>
+            <ul id='command_list'>
-        <li><a href='#server_state'>server_state</a></li>
+                <li class='selected'><a href='#server_info'>server_info</a></li>
-        <li><a href='#ping'>ping</a></li>
+                <li><a href='#server_state'>server_state</a></li>
-        <br/>
+                <li><a href='#ping'>ping</a></li>
-        <li><a href='#subscribe'>subscribe</a></li>
+                <br/>
-        <li><a href='#unsubscribe'>unsubscribe</a></li>
+                <li><a href='#subscribe'>subscribe</a></li>
-        <br/>
+                <li><a href='#unsubscribe'>unsubscribe</a></li>
-        <li><a href='#ledger'>ledger</a></li>
+                <br/>
-        <li><a href='#ledger_closed'>ledger_closed</a></li>
+                <li><a href='#ledger'>ledger</a></li>
-        <li><a href='#ledger_current'>ledger_current</a></li>
+                <li><a href='#ledger_closed'>ledger_closed</a></li>
-        <li><a href='#ledger_entry'>ledger_entry</a></li>
+                <li><a href='#ledger_current'>ledger_current</a></li>
-        <br/>
+                <li><a href='#ledger_entry'>ledger_entry</a></li>
-        <li><a href='#account_info'>account_info</a></li>
+                <br/>
-        <li><a href='#account_lines'>account_lines</a></li>
+                <li><a href='#account_info'>account_info</a></li>
-        <li><a href='#account_offers'>account_offers</a></li>
+                <li><a href='#account_lines'>account_lines</a></li>
-        <li><a href='#account_tx'>account_tx</a></li>
+                <li><a href='#account_offers'>account_offers</a></li>
-        <li><a href='#account_currencies'>account_currencies</a></li>
+                <li><a href='#account_tx'>account_tx</a></li>
-        <br/>
+                <li><a href='#account_currencies'>account_currencies</a></li>
-        <li><a href='#transaction_entry'>transaction_entry</a></li>
+                <br/>
-        <li><a href='#tx'>tx</a></li>
+                <li><a href='#transaction_entry'>transaction_entry</a></li>
-        <li><a href='#tx_history'>tx_history</a></li>
+                <li><a href='#tx'>tx</a></li>
-        <br/>
+                <li><a href='#tx_history'>tx_history</a></li>
-        <li><a href='#sign'>sign</a></li>
+                <br/>
-        <li><a href='#submit'>submit</a></li>
+                <li><a href='#sign'>sign</a></li>
-        <br/>
+                <li><a href='#submit'>submit</a></li>
-        <li><a href='#ripple_path_find'>ripple_path_find</a></li>
+                <br/>
-        <li><a href='#path_find'>path_find</a></li>
+                <li><a href='#ripple_path_find'>ripple_path_find</a></li>
-        <li><a href='#book_offers'>book_offers</a></li>
+                <li><a href='#path_find'>path_find</a></li>
-    </ul>
+                <li><a href='#book_offers'>book_offers</a></li>
+            </ul>
+        </div>
   </aside>
 {% endblock %}