Sidebar improvements for big pages, code expand/collapse tweaks

assets/css/devportal.css

@@ -128,10 +128,6 @@
   font-weight: bold;
 }
 
-/* Underline links in Dev Portal content */
-.xrp-ledger-dev-portal .main a {
-  text-decoration: underline !important;
-}
 
 /* "Button-style" links should look like buttons, not links */
 .xrp-ledger-dev-portal a.button {
@@ -257,8 +253,19 @@
 .xrp-ledger-dev-portal .content {
   padding-bottom: 50px;
 }
+#dactyl_toc_sidebar a {
+  text-decoration: none;
+}
+#dactyl_toc_sidebar a:hover {
+  text-decoration: underline;
+}
 .xrp-ledger-dev-portal .level-1 {
+  margin-top: 15px;
   padding-left: 15px;
+  font-weight: bold;
+}
+.xrp-ledger-dev-portal .level-1:first-child {
+  margin-top: 0;
 }
 .xrp-ledger-dev-portal .level-2 {
   padding-left: 30px;
@@ -266,6 +273,12 @@
 .xrp-ledger-dev-portal .level-3 {
   padding-left: 45px;
 }
+.xrp-ledger-dev-portal .level-3 a {
+  color: #888;
+}
+.xrp-ledger-dev-portal .level-3 a:hover {
+  color: #333;
+}
 
 .xrp-ledger-dev-portal .dev_nav_sidebar {
   padding-left: 10px;
@@ -330,9 +343,12 @@
     margin-right: calc(calc(calc(100% - 1370px) / 2) + 195px);
   }
   .xrp-ledger-dev-portal #page-toc-wrapper {
-    max-width: 200px;
-    position: absolute;
-    right: -210px;
+    position: fixed;
+    right: 10px;
+    top: 80px;
+    max-width: calc(77% - 970px);
+    max-height: calc(100% - 150px);
+    overflow-y: auto;
   }
   .draft-warning {
     left: calc(calc(calc(100% - 1370px) / 2) + 90px);
@@ -561,8 +577,8 @@
 .jump-to-top {
   display: none;
   position: fixed;
-  bottom: 80px;
-  right: 80px;
+  bottom: 15px;
+  right: 30px;
   background-color: #333;
   font-weight: bolder;
   z-index: 1000;

assets/js/expandcode.js

@@ -17,6 +17,16 @@ var toggle_cs = function(eo) {
     $(eo.target).val(current_button_text == 'Expand' ? "Collapse" : "Expand");
 }
 
+function has_scrollbars(e) {
+  if ($(e).parents(".multicode").length > 0) {
+    //TODO: figure out if we can detect scrollbars on non-default tabs of
+    // multicode samples. For now, always consider multi-code sections to need
+    // scrollbars.
+    return true;
+  }
+  return (e.scrollHeight > e.clientHeight) || (e.scrollWidth > e.clientWidth);
+}
+
 function make_code_expandable() {
     var newid = 0;
     $(".content > pre > code").parent().wrap(function() {
@@ -24,14 +34,20 @@ function make_code_expandable() {
         return "<div class='code_sample' id='code_autoid_"+newid+"'>";
     });
 
-    var cs = $('.code_sample');
-    cs.find("code").dblclick(toggle_cs);
-    cs.find("code").attr('title', 'Double-click to expand/collapse');
+    var code_samples = $('.code_sample');
+    code_samples.find("code").each(function() {
+      let jqThis = $(this);
+      if (has_scrollbars(this)) {
+        jqThis.dblclick(toggle_cs);
+        jqThis.attr('title', 'Double-click to expand/collapse');
         var newbtn = $("<input type='button' class='code_toggler' value='Expand' />");
-    newbtn.appendTo(cs);
+        newbtn.appendTo(jqThis.parents(".code_sample"));
+      }
+    });
+
     $(".code_toggler").click(toggle_cs);
 
     /* fix expand/collapse and tab click hierarchy */
-    cs.css("position","relative");
+    code_samples.css("position","relative");
     $(".multicode .code_sample").css("position","static");
 }

tool/template-doc.html

@@ -5,7 +5,9 @@
     <link rel="stylesheet" href="assets/vendor/docco.min.css" />
     <script src="assets/vendor/highlight.min.js"></script>
 
-    <!-- syntax selection js -->
+    <!-- expandable code samples -->
+    <script src="assets/js/expandcode.js"></script>
+    <!-- multi-code selection tabs -->
     <script src="assets/js/multicodetab.js"></script>
     <script>
         $(document).ready(function() {
@@ -15,8 +17,6 @@
         });
     </script>
 
-    <script src="assets/js/expandcode.js"></script>
-    <script src="assets/js/fixsidebarscroll.js"></script>
 
 {% endblock %}
 
@@ -31,12 +31,12 @@
 {% block main %}
     <h1 class="main-page-header">{{ currentpage.name }}</h1>
 
-    <div id="page-toc-wrapper" class="panel panel-default">
+    <aside id="page-toc-wrapper" class="panel panel-default">
       <p class="in-this-doc panel-heading">In this document:</p>
       <ul class="dev_nav_sidebar panel-body" id="dactyl_toc_sidebar">
         {{ sidebar_content }}
       </ul>
-    </div>
+    </aside>
     <div class='content no-1st-head'>
         {{ content }}
     </div>