Cleaned up sidebar styles, etc.

dactyl-config.yml

@@ -1259,7 +1259,7 @@ pages:
 
     -   name: Consensus Network
         html: consensus-network.html
-        parent: decentralized-exchange.html
+        parent: concepts.html
         funnel: Build
         doc_type: Concepts
         category: Consensus Network

styles/_content.scss

@@ -12,6 +12,17 @@ h3 a:hover,
   color: $primary;
 }
 
+.curated-links a,
+.children-display a,
+a.card,
+.xrpl-footer a {
+  color: $white;
+
+  &:hover {
+    color: $primary;
+  }
+}
+
 /* Content text styling ----------------------------------------------------- */
 
 .content {

styles/_footer.scss

@@ -22,17 +22,31 @@
     font-size: 1rem;
   }
 
+  ul {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
   li {
     font-size: 0.75rem;
+    list-style-type: none;
+    margin-left: 0;
   }
 
   .card-body {
     margin-top: -15px;
   }
 
-  .card-header h5 i {
+  .card-header {
+    background: none;
+    border-bottom: none;
+    border-top: none;
+    padding: 8px;
+
+    h5 i {
       margin-left: 0.2em;
     }
+  }
 
   .card-grid .card {
     padding: 24px 48px 48px 48px;
@@ -46,6 +60,10 @@
     }
   }
 
+  .curated-links li, .level-1 {
+    margin-top: 12px;
+  }
+
   .absolute_bottom_footer span {
     margin-right: 25px;
     font-size: 0.75rem;

styles/_landings.scss

@@ -1,209 +1,187 @@
+/* Landing Pages ------------------------------------------------------------ */
+.landing {
 
-.landing .curated-links a,
+  .container-fluid.section-hero {
-.landing .children-display a,
-.landing a.card,
-.xrpl-footer a {
-  color: $white;
-
-  &:hover {
-    color: $primary;
-  }
-}
-
-
-.card-grid .section-hero.card {
-  padding-left: 0;
-}
-
-.container-fluid.section-hero {
     padding: 48px 0;
-}
+  }
 
-.content .children-display li a {
+  .content .children-display li a {
     /* Category landing pages */
     font-weight: 700;
     font-size: 1.25rem;
     text-decoration: none;
-}
+  }
 
-.content .children-display li a:hover {
+  .content .children-display li a:hover {
     text-decoration: underline;
-}
+  }
 
 
-/* Common list modules (children, curated links) ---------------------------- */
+  /* Common list modules (children, curated links) -------------------------- */
-.curated-links ul,
+  .curated-links ul,
-.curated-links ol,
+  .curated-links ol,
-.children-display ul {
+  .children-display ul {
     padding-left: 0;
     margin-bottom: 0;
-}
+  }
 
-.card .curated-links a:hover,
+  .card .curated-links a:hover,
-.card .children-display a:hover {
+  .card .children-display a:hover {
     text-decoration: none;
-}
+  }
 
-.level-1,
+  .level-1,
-.curated-links ul li {
+  .curated-links ul li {
     list-style-type: disc;
-}
+  }
-.level-1,
+  .level-1,
-.curated-links li {
+  .curated-links li {
     margin-top: 12px;
     margin-left: 16px;
-}
+  }
 
-.landing .level-1,
+  .level-1,
-.landing .level-2,
+  .level-2,
-.landing .curated-links li {
+  .curated-links li {
     margin-top: 0;
-}
+  }
 
-.landing .card .level-1 a,
+  .card .level-1 a,
-.landing .card .curated-links li a {
+  .card .curated-links li a {
     padding: 8px;
     display: block;
     margin: 0 -8px 0 -8px;
-}
+  }
 
-.landing .card .level-2 {
+  .card .level-2 {
     position: relative;
-}
+  }
-.landing .card .level-2 a {
+  .card .level-2 a {
     padding: 8px 8px 8px 28px;
     display: block;
     margin: 0 -8px 0 -8px;
-}
+  }
 
-.landing .card .blurb + .children-display,
+  .card .blurb + .children-display,
-.landing .card .blurb + .curated-links {
+  .card .blurb + .curated-links {
     margin-top: 1rem;
-}
+  }
 
-.section-hero .blurb {
+  .section-hero .blurb {
     font-size: 1.2em;
     line-height: 1.71em;
-}
+  }
 
-.level-2 {
+  .level-2 {
     list-style-type: circle;
     margin-left: 30px;
-}
+  }
-.level-3 {
+  .level-3 {
     list-style-type: square;
     margin-left: 45px;
-}
+  }
-.level-4 {
+  .level-4 {
     margin-left: 60px;
-}
+  }
-.level-5 {
+  .level-5 {
     margin-left: 75px;
     list-style-type: circle;
-}
+  }
-.level-6 {
+  .level-6 {
     /* Probably not used */
     margin-left: 90px;
     list-style-type: square;
-}
+  }
 
-@include media-breakpoint-down(md) {
+  /* Misc. ------------------------------------------------------------------ */
-  .landing .card {
+
+  @include media-breakpoint-down(md) {
+    .card {
       padding-left: 0px;
     }
-}
+  }
 
-
+  .display-4 {
-/* Landing Pages ------------------------------------------------------------ */
-
-.landing .display-4 {
     margin-bottom: 1.5rem;
-}
+  }
 
-#test-net-servers h3 {
+  #test-net-servers h3 {
     font-size: 1.4rem;
     font-weight: 700;
-}
+  }
 
-.card-header h3.card-title {
+  .card-header h3.card-title {
     margin-bottom: 0;
-}
+  }
 
-#test-net-servers pre {
+  #test-net-servers pre {
     overflow-x: auto;
-}
+  }
 
-.landing .card li,
+  .card li {
-.xrpl-footer .card li {
     list-style-type: none;
     margin-left: 0;
-}
+  }
 
-.landing section:first-of-type {
+  section:first-of-type {
     padding-top: 0;
     border-top-width: 0;
-}
+  }
 
-.card-grid .card-body {
+  .card-header,
-  padding: 8px;
+  .card-footer {
-  padding-bottom: 24px;
-}
-
-.landing .card-header,
-.landing .card-footer,
-.xrpl-footer .card-header {
     background: none;
     border-bottom: none;
     border-top: none;
-}
+  }
 
-.landing .card-header,
+  .card-header {
-.xrpl-footer .card-header {
     padding: 8px;
-}
+  }
 
-.landing .card-footer {
+  .card-footer {
     padding: 8px;
-}
+  }
 
-.landing .card-body > p {
+  .card-body > p {
     padding: 0;
     margin-bottom: 0;
-}
+  }
 
 
-#main_content_wrapper {
+  #main_content_wrapper {
     border-bottom: none;
-}
+  }
 
-.marketing-wrapper {
+  .marketing-wrapper {
     margin-top: 10rem;
     margin-bottom: 6rem;
     @include media-breakpoint-down(sm) {
       margin-top: 6rem;
     }
-}
+  }
 
 
-.landing .card .card-img-top {
+  .card .card-img-top {
     width: 60px;
     height: 60px;
     margin-left: 0;
     margin-right: auto;
-}
+  }
-.image-icon {
+  .image-icon {
     width: 60px;
     height: 60px;
     margin-bottom: 16px;
-}
+  }
 
-/* Full-link cards */
+  /* Full-link cards */
-.landing a.card {
+  a.card {
     border: 1px solid transparent;
-}
+  }
-.landing a.card:hover {
+  a.card:hover {
     text-decoration: none;
-}
+  }
-.landing a.card:hover h3 {
+  a.card:hover h3 {
     text-decoration: underline;
+  }
 }

styles/_layout.scss

@@ -1,3 +1,7 @@
+body {
+  position: relative; // Makes scrollspy work better
+}
+
 section {
   position: relative;
 }
@@ -156,7 +160,17 @@ section {
     @include media-breakpoint-down(md) {
       padding: 20px;
     }
+
+    .card-body {
+      padding: 8px;
+      padding-bottom: 24px;
     }
+  }
+
+  &.section-hero {
+    padding-left: 0;
+  }
+
 }
 
 /* Grid Box Vertical numbers ------------------------------------------------ */

styles/_side-nav.scss

@@ -1,4 +1,4 @@
-/* Left/right nav color scheme ------------------------------- */
+/* Left/right nav fonts & colors scheme ------------------------------------- */
 aside li a {
   color: $white;
   text-decoration: none;
@@ -19,55 +19,18 @@ aside .active > a:hover {
   color: $primary;
   font-weight: 700;
 }
-aside a.active-parent {
+aside a.active-parent,
+aside .active-parent > a {
   font-weight: 700;
 }
 
-.command-list li a,
+.page-toc .level-1 a,
-.page-toc li a {
+.command-list .separator {
-  display: block;
+  font-weight: 700;
-  margin-top: 5px;
+  font-family: "Space Mono", monospace;
-  padding: 4px 15px 4px 35px;
-  text-indent: -20px;
-  font-size: 0.9rem;
-}
-
-#page-toc-wrapper .card-body,
-.command-list {
-  border-left: 1px solid $white;
-}
-
-.page-toc .level-1 a {
   color: $white;
 }
 
-.page-toc .level-3 {
-  padding-left: 16px;
-  border-left: 1px solid $white;
-  margin-bottom: 0;
-  padding-bottom: 5px;
-}
-
-.page-toc .level-3 a {
-  margin-top: 0;
-  padding-bottom: 5px;
-}
-
-.command-list li a:hover,
-.page-toc li a:hover {
-  text-decoration: none;
-  border-left: 1px solid $primary;
-  padding-left: 34px;
-}
-.command-list .active a {
-  border-left: 2px solid $primary;
-  padding-left: 33px;
-}
-
-.right-sidebar {
-  padding: 44px 0 24px 48px;
-}
-
 /* Left navigation -----------------------------------------------------------*/
 
 .nav-toggler {
@@ -145,50 +108,82 @@ aside a.active-parent {
 
 /* Right navigation --------------------------------------------------------- */
 
-#page-toc-wrapper .card {
+.right-sidebar {
-  position: sticky;
+  padding: 44px 0 24px 48px;
-  max-height: 85vh;
-  top: 48px;
-  overflow: auto;
-  padding: 44px 0 48px 24px;
-  border: none;
-}
-.command-list {
-  padding: 16px;
-}
 
-#page-toc-wrapper .card-header {
+  .toc-header {
-  border-bottom: none;
     font-weight: bold;
     font-size: 14px;
-  padding: 10px 0;
+    padding: 1rem 0;
-}
 
-#page-toc-wrapper .card-header h4 {
+    h4 {
       line-height: 20px;
       font-size: 1.2em;
       padding: 0;
       margin: 0;
+    }
+  }
 }
 
-#page-toc-wrapper .card-body {
+#page-toc-wrapper {
-  padding: 0 0 0 16px;
+  position: sticky;
+  max-height: 85vh;
+  top: 48px;
+  overflow: auto;
+  padding: 0;
+  border: none;
+
+  .card-body {
+    padding: 0;
     list-style-type: none;
+  }
 }
 
-.page-toc li,
+.page-toc,
-.command-list li {
+.command-list {
+  padding-left: 0;
+  border-left: 1px solid $white;
+
+  li {
     list-style-type: none;
-  margin-bottom: 8px;
+    padding: 0;
-  margin-left: 0;
+
-}
+    &.separator {
+      padding: .25rem 1rem;
+    }
+
+    a {
+      display: block;
+      margin-top: 5px;
+      padding: .25rem 1rem;
+      font-size: 0.9rem;
+
+      &:hover,
+      .active {
+        text-decoration: none;
+        border-left: 1px solid $primary;
+        margin-left: -1px;
+      }
+    }
+
+    &.active a,
+    &.active a:hover {
+      border-left: 2px solid $primary;
+      padding-left: calc(1rem - 1px);
+      margin-left: -1px;
+    }
+  }
+
+  .level-3 {
+    margin-left: 16px;
+    border-left: 1px solid $white;
+    margin-bottom: 0;
+    padding-bottom: 5px;
+
+    a {
+      margin-top: 0;
+      padding-bottom: 5px;
+    }
+  }
 
-.page-toc .level-1 a,
-.command-list .separator {
-  font-weight: 700;
-  font-family: "Space Mono", monospace;
-}
-.page-toc .level-2,
-.command-list .method {
-  margin-left: 0;
 }

tool/template-base.html

@@ -77,7 +77,7 @@
 
 </head>
 
-<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}">
+<body class="xrp-ledger-dev-portal {% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}sidebar-primary {% endif %}lang-{{target.lang}} {% block bodyclasses %}{% endblock %}" data-spy="scroll" data-target=".page-toc" data-offset="0">
 
   <!-- Google Tag Manager (noscript) -->
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KCQZ3L8"

tool/template-doc.html

@@ -30,12 +30,14 @@
 {% endblock %}
 
 {% block right_sidebar %}
-  <div class="card" id="page-toc-wrapper">
+  <div id="page-toc-wrapper">
-    <div class="card-header">
+    <div class="toc-header">
       <h4>{% trans %}In this document{% endtrans %}</h4>
     </div>
-    <ul class="card-body page-toc">
+    <ul class="page-toc nav flex-column" role="directory">
-      {{ sidebar_content }}
+	    {% for h in headers %}{% if h.level < 4 %}
+	    <li class="nav-item level-{{h.level}}"><a class="nav-link" href="#{{h.id}}">{{h.text}}</a></li>
+	    {% endif %}{% endfor %}
 	  </ul>
   </div>
 {% endblock %}

tool/template-landing-children.html

@@ -1,6 +1,6 @@
 {% extends "template-base.html" %}
 
-{% block mainclasses %}landing-children padded-main{% endblock %}
+{% block mainclasses %}landing landing-children padded-main{% endblock %}
 
 {% block main %}
   {% if content %}

tool/template-rest-api-tool.html

@@ -1,12 +1,12 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-  <div class="card">
+  <div class="command-list-wrapper">
-    <div class="card-header">
+    <div class="toc-header">
       <h4>API Methods</h4>
     </div>
 
-    <ul class="command-list card-body" id='command_list'>
+    <ul class="command-list" id='command_list'>
     </ul>
   </div>
 {% endblock %}

tool/template-websocket-api-tool.html

@@ -1,11 +1,11 @@
 {% extends "template-base.html" %}
 
 {% block right_sidebar %}
-  <div class="card">
+  <div class="command-list-wrapper">
-      <div class="card-header">
+      <div class="toc-header">
         <h4>API Methods</h4>
       </div>
-      <ul class="card-body command-list" id="command_list"></ul>
+      <ul class="command-list" id="command_list"></ul>
   </div>
 {% endblock %}