build(aio): render subclasses + see-also block in the main flow (angular#22445)

Closes angular#22386

PR Close angular#22445

Author: petebacondarwin

aio/src/styles/2-modules/_api-pages.scss

@@ -8,37 +8,6 @@
     }
   }
 
-  .sidebar {
-      box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
-      border-radius: 2px;
-      background: #FAFAFA;
-      float: right;
-      margin: 20px;
-      padding: 0 24px 14px;
-
-      h2 {
-        margin: 18px 0 4px;
-      }
-
-      ul {
-        margin: 0;
-        padding-left: 14px;
-      }
-  }
-  .inline-sidebar {
-      display: none;
-  }
-
-  @media (max-width: 1200px) {
-      .sidebar {
-          display: none;
-      }
-      .inline-sidebar {
-          display: block;
-      }
-  }
-
-
   .method-table {
     h3 {
       margin: 6px 0;

aio/tests/e2e/api.po.ts

@@ -24,7 +24,7 @@ export class ApiPage extends SitePage {
     //
     // and we want to be able to pull out the code elements from only the first level
     // if `onlyDirect` is set to `true`.
-    const selector = `.inline-sidebar .descendants.${docType} ${onlyDirect ? '>' : ''} ul > li > code`;
+    const selector = `.descendants.${docType} ${onlyDirect ? '>' : ''} ul > li > code`;
     return element.all(by.css(selector)).map<string>(item => item && item.getText());
   }
 

aio/tools/transforms/templates/api/includes/class-overview.html

@@ -2,18 +2,10 @@
 
 <section class="{$ doc.docType $}-overview">
 <h2>Overview</h2>
-{% if (doc.descendants | filterByPropertyValue('docType', 'class')).length or doc.see.length %}
-<div class="sidebar">
-  {$ descendants.renderDescendants(doc, 'class', 'Subclasses') $}
-  {% include "includes/see-also.html" %}
-</div>
-{% endif %}
 <code-example language="ts" hideCopy="true">
 {$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }
 </code-example>
-<div class="inline-sidebar">
-  {$ descendants.renderDescendants(doc, 'class', 'Subclasses') $}
-  {% include "includes/see-also.html" %}
-</div>
+{$ descendants.renderDescendants(doc, 'class', 'Subclasses') $}
+{% include "includes/see-also.html" %}
 </section>

aio/tools/transforms/templates/api/includes/interface-overview.html

@@ -2,13 +2,11 @@
 
 <section class="interface-overview">
 <h2>Interface Overview</h2>
-<div class="sidebar">
-  {$ descendants.renderDescendants(doc, 'interface', 'Child Interfaces') $}
-  {$ descendants.renderDescendants(doc, 'class', 'Class Implementations') $}
-  {% include "includes/see-also.html" %}
-</div>
 <code-example language="ts" hideCopy="true">
 interface {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }
 </code-example>
+{$ descendants.renderDescendants(doc, 'interface', 'Child Interfaces') $}
+{$ descendants.renderDescendants(doc, 'class', 'Class Implementations') $}
+{% include "includes/see-also.html" %}
 </section>

aio/tools/transforms/templates/api/interface.template.html

@@ -6,11 +6,6 @@
 {% block overview %}{% include "includes/interface-overview.html" %}{% endblock %}
 {% block details %}
   {% include "includes/description.html" %}
-  <div class="inline-sidebar">
-    {$ descendants.renderDescendants(doc, 'interface', 'Child Interfaces') $}
-    {$ descendants.renderDescendants(doc, 'class', 'Class Implementations') $}
-    {% include "includes/see-also.html" %}
-  </div>
   {$ memberHelper.renderProperties(doc.properties, 'instance-properties', 'instance-property', 'Properties') $}
   {$ memberHelper.renderMethodDetails(doc.methods, 'instance-methods', 'instance-method', 'Methods') $}
 {% endblock %}