feat(ux): add one extra level of outline headings

ethanresnick · ethanresnick · commit 170b579c1d9b · 2018-10-22T17:31:02.000-04:00
This makes the sidebar table of contents more useful imo (for us and,
soon, in user-defined profiles).
diff --git a/_format/1.1/index.md b/_format/1.1/index.md
@@ -234,7 +234,7 @@ other and with `type` and `id`. In other words, a resource can not have an
 attribute and relationship with the same name, nor can it have an attribute
 or relationship named `type` or `id`.
 
-#### <a href="#document-resource-object-attributes" id="document-resource-object-attributes" class="headerlink"></a> Attributes
+##### <a href="#document-resource-object-attributes" id="document-resource-object-attributes" class="headerlink"></a> Attributes
 
 The value of the `attributes` key **MUST** be an object (an "attributes
 object"). Members of the attributes object ("attributes") represent information
@@ -253,7 +253,7 @@ alongside other information to be represented in a resource object, these keys
 
 > Note: See [fields] and [member names] for more restrictions on this container.
 
-#### <a href="#document-resource-object-relationships" id="document-resource-object-relationships" class="headerlink"></a> Relationships
+##### <a href="#document-resource-object-relationships" id="document-resource-object-relationships" class="headerlink"></a> Relationships
 
 The value of the `relationships` key **MUST** be an object (a "relationships
 object"). Members of the relationships object ("relationships") represent
@@ -285,7 +285,7 @@ data, not the related resources.
 
 > Note: See [fields] and [member names] for more restrictions on this container.
 
-#### <a href="#document-resource-object-related-resource-links" id="document-resource-object-related-resource-links" class="headerlink"></a> Related Resource Links
+##### <a href="#document-resource-object-related-resource-links" id="document-resource-object-related-resource-links" class="headerlink"></a> Related Resource Links
 
 A "related resource link" provides access to [resource objects][resource objects] [linked][links]
 in a [relationship][relationships]. When fetched, the related resource object(s)
@@ -300,7 +300,7 @@ relationship isn't currently associated with any target resources. Additionally,
 a related resource link **MUST NOT** change because its relationship's content
 changes.
 
-#### <a href="#document-resource-object-linkage" id="document-resource-object-linkage" class="headerlink"></a> Resource Linkage
+##### <a href="#document-resource-object-linkage" id="document-resource-object-linkage" class="headerlink"></a> Resource Linkage
 
 Resource linkage in a [compound document] allows a client to link together all
 of the included [resource objects] without having to `GET` any URLs via [links].
diff --git a/javascripts/all.js b/javascripts/all.js
@@ -12,7 +12,6 @@ $(document).ready(function() {
 
     // Sidebar scroll affix
     fixElement($(".sidebar"), $("footer"), 52);
-
     activateVersionPicker();
 });
 
@@ -89,6 +88,14 @@ function createOutlineFromElement(element) {
                 children: []
             };
 
+            $(this).nextUntil('h3', 'h4').each(function() {
+                childItem.children.push({
+                    title: $(this).not('a').text(),
+                    href: $(this).find('a').attr('href') || "#",
+                    children: []
+                });
+            });
+
             item.children.push(childItem);
         });
 
@@ -98,10 +105,6 @@ function createOutlineFromElement(element) {
     return outline;
 }
 
-/**
- * Creates a nested list from an array in the form returned by `createOutlineFromElement`.
- */
-
 /**
  * Creates a nested list from an array in the form returned by `createOutlineFromElement`.
  *
diff --git a/stylesheets/all.css b/stylesheets/all.css
diff --git a/stylesheets/all.sass b/stylesheets/all.sass
@@ -6,7 +6,7 @@
 /** Config */
 
 $page-width: 955px
-$sidebar-width: 220px
+$sidebar-width: 235px
 $page-padding: 20px
 
 $mobile-breakpoint: 800px
@@ -307,7 +307,7 @@ footer
     overflow-y: auto
 
   #version-picker-wrapper
-    width: $sidebar-width
+    width: 200px
     margin-bottom: 20px
     display: flex
     flex-direction: row
@@ -347,7 +347,7 @@ footer
 // just jump to its final size at the next media query.
 @media screen and (min-width: $page-width + ($page-padding * 2) - 109px)
   .sidebar + .content
-    margin-left: $sidebar-width + 15px
+    margin-left: $sidebar-width + 10px
     padding-left: calc(100vw - #{$page-width + ($page-padding * 2) - 109px})
 
 @media screen and (min-width: $page-width + ($page-padding * 2) - 94px)
