Merge branch 'docs_mobile' into 2021_refresh

styles/_feedback.scss

@@ -0,0 +1,24 @@
+// TEMPORARY: overriding the feedback widget styles here
+#feedback-content {
+  .docked-widget {
+    position: static !important;
+    box-shadow: none !important;
+    display: block;
+    background-color: $body-bg !important;
+    border-width: 0 !important;
+    padding: 2rem;
+
+    .widget-header {
+      background: none !important;
+
+      .widget-header-title {
+        flex-grow: 0 !important;
+        padding-right: 1rem !important;
+      }
+    }
+
+    #closeFeedback {
+      display: none;
+    }
+  }
+}

styles/_layout.scss

@@ -397,7 +397,7 @@ $columns: 12; // Number of columns in the grid system
 
   #page-toc-wrapper {
     position: static;
-    display: block;
+    // display: block;
     clear: both;
     overflow-y: inherit;
     max-width: 100%;

styles/_side-nav.scss

@@ -111,6 +111,11 @@ aside .active-parent > a {
 .right-sidebar {
   padding: 44px 0 24px 48px;
 
+  @include media-breakpoint-down(md) {
+    padding: 1.5rem;
+    border: 1px solid $gray-600;
+  }
+
   .toc-header {
     font-weight: bold;
     font-size: 14px;

styles/_top-nav.scss

@@ -541,7 +541,8 @@ a {
     background-color: $blue-purple-400;
     transition: all .2s ease;
     border: none;
-
+  }
+  &:not(.expander) span {
     &:first-of-type {
       left: 0;
       transform: rotate(45deg);
@@ -562,7 +563,8 @@ a {
   }
 }
 
-.dropdown.show .chevron {
+.dropdown.show .chevron,
+.expander:not(.collapsed) .chevron {
   span:first-of-type {
     transform: rotate(-45deg);
   }

styles/xrpl.scss

@@ -64,3 +64,4 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
 @import "_pages.scss";
 @import "_rpc-tool.scss";
 @import "_blog.scss";
+@import "_feedback.scss";

template/pagetype-doc.html.jinja

@@ -27,11 +27,16 @@
         {{ content }}
     </div>
   </article>
+  {% include 'component-feedback-widget.html.jinja' %}
 {% endblock %}
 
 {% block right_sidebar %}
-  {% include 'component-github-edit.html.jinja' %}
+  <a class="with-caret expander collapsed d-lg-none" id="toc-expander" role="button" data-toggle="collapse" data-target="#page-toc-wrapper" aria-expanded="false">
-  <div id="page-toc-wrapper">
+    Page Toolbar
+    <span class="chevron"><span></span><span></span></span>
+  </a>
+  <div id="page-toc-wrapper" class="collapse d-lg-block">
+    {% include 'component-github-edit.html.jinja' %}
     {% include 'component-label-list.html.jinja' %}
     <div class="toc-header">
       <h4>{% trans %}In this document{% endtrans %}</h4>
@@ -49,5 +54,4 @@
   gtag('config', 'UA-157720658-3', {'content_group1': 'Content Docs'});
 </script>
 
-{% include 'component-feedback-widget.html.jinja' %}
 {% endblock %}