Add code buttons to btngroup

Expand button added to btn group with copy button.
Placed btn top right of box.

assets/js/expandcode.js

@@ -9,12 +9,13 @@ function toggle_cs(eo) {
     if (placeholders.length) {
         // collapsing
         placeholders.remove();
-        $(window).scrollTop(code_el.offset().top - 124)
+        // This caused jumping around when code was closed.
+        // $(window).scrollTop(code_el.offset().top - 124)
     } else {
         code_el.after("<div class='code-placeholder' style='width:"
                             + code_el.outerWidth()
                             + "px; height:"
-                            + code_el.outerHeight()
+                            + (code_el.outerHeight() - 20) // added 20 to cover bottom scrollbar
                             + "px;'>&nbsp;</div>");
     }
     current_button_expanded = code_el.hasClass('expanded');
@@ -38,6 +39,7 @@ function make_code_expandable() {
         return "<div class='code_sample' id='code_autoid_"+newid+"'>";
     });
 
+    // Multi code blocks
     var code_samples = $('.code_sample');
     code_samples.find("code").each(function() {
       let jqThis = $(this);
@@ -45,7 +47,7 @@ function make_code_expandable() {
         jqThis.dblclick(toggle_cs);
         jqThis.attr('title', 'Double-click to expand/collapse');
         var newbtn = $(`<button class='code_toggler btn btn-outline-secondary'>${tExpand}</button>`);
-        newbtn.appendTo(jqThis.parents(".code_sample"));
+        newbtn.appendTo(jqThis.parents(".codehilite").children(".btn-group"));
       }
     });
 

template/pagetype-doc.html.jinja

@@ -15,21 +15,44 @@
             new ClipboardJS('.clipboard-btn');
         });
     </script>
+    
     {# temp styling for testing. #}
     <style>
-      .clipboard-btn {
+      .codehilite {
+        position: relative;
+      }
+      .codetabs {
         position: relative;
-        float: right;
         z-index: 10;
       }
-      .multicode .clipboard-btn {
-        right: 15px;
-        top: 55px;
+      .codehilite .btn-group {
+        top: 10px;
+        right: 10px;
+        position: absolute;
+      }
+      .multicode pre code {
+        padding: 2.8rem 1rem 1rem;
+      }
+      .multicode .codehilite .btn-group {
+        right: 20px;
+        top: 60px;
+        position: absolute;
+      }
+      .clipboard-btn {
+        z-index: 10;
+        margin-right: 10px;
+        background-color: #232325;
       }
       .js_interactive .clipboard-btn {
         display:none;
       }
-
+      .multicode .code_toggler {
+          position: unset;
+          z-index: 10;
+      }
+      .code_toggler {
+          background-color: #232325;
+      }
     </style>
 
 {% endblock %}
@@ -38,7 +61,7 @@
   <article class="pt-3 p-md-3">
     {% if (target.lang != "en" and "en" in currentpage.targets) or currentpage.untranslated_warning %}
     {# Add a "sorry this page isn't translated" banner. #}
-    <div class="devportal-callout note mb-5"><strong>{% trans %}Sorry, this page is not available in your language.{% endtrans %}</strong>
+    <div class="mb-5 devportal-callout note"><strong>{% trans %}Sorry, this page is not available in your language.{% endtrans %}</strong>
       <p class="mb-0">{% trans %}We are making an effort to offer the XRP Ledger Dev Portal in a variety of languages, but not all pages are available in all languages. If you'd like to help, <a href="https://github.com/XRPLF/xrpl-dev-portal/blob/master/CONTRIBUTING.md">please contribute!</a>{% endtrans %}</p>
     </div><!--/.devportal-callout-->
     {% endif %}

tool/filter_copy_code_to_clipboard.py

@@ -18,7 +18,7 @@ def filter_soup(soup, **kwargs):
     1. Finds all elements with class of "codehilite" 
     2. Adds copy to clipboard button. 
         Button looks like >
-        <button class="clipboard-btn" data-clipboard-target="#codeblock-0" id="codeblock-0button">Copy to clipboard</button>
+        <button class="btn btn-outline-secondary clipboard-btn" data-clipboard-target="#codeblock-0" id="codeblock-0button">Copy to clipboard</button>
     3. Adds id to <code> element. 
     """
 
@@ -29,15 +29,22 @@ def filter_soup(soup, **kwargs):
         codeBlock = code_block.find("code")
         codeBlock_id = "codeblock-%d" % index1
         codeBlock["id"] = codeBlock_id
+        # Add button group
+        btn_group = soup.new_tag('div')
+        btn_group['class'] = "btn-group"
+        btn_group['role'] = "group"
+        btn_group['aria-label'] = "Code Buttons"
+        code_block.insert(0, btn_group)
+
         # Add copy button
         new_tag = soup.new_tag('button', id=codeBlock_id+'button')
         icon = soup.new_tag('i')
         icon['class'] = "fa fa-clipboard"
-        new_tag['class'] = "clipboard-btn"
+        new_tag['class'] = "btn btn-outline-secondary clipboard-btn"
         new_tag['alt'] = "Copy to clipboard"
         new_tag['data-clipboard-target'] = "#"+codeBlock_id
         new_tag.insert(0, icon)
-        code_block.insert(0, new_tag)
+        btn_group.insert(0, new_tag)
         # 
         index1 += 1