rebuild

core-component-page.html

@@ -4674,6 +4674,16 @@
   display: block;
 }
 
+#panel {
+  height: 100%;
+}
+
+.main {
+  padding: 0 72px;
+  max-width: 832px;
+  margin: 0 auto;
+}
+
 markedjs-element {
   display: block;
 }
@@ -4734,11 +4744,6 @@
   border: none;
 }
 
-.main {
-  padding: 0 72px;
-  max-width: 832px;
-}
-
 /**/
 
 .details-name {
@@ -4823,7 +4828,7 @@
 
 </style>
 
-    <core-header-panel style="height: 100%;" mode="waterfall">
+    <core-header-panel id="panel" mode="waterfall">
 
       <!--<core-toolbar>
         <span style="margin: 0 72px;">{{data.name}}</span>
@@ -6035,6 +6040,7 @@ <h1 style="font-size: 52px; color: #E91E63;">
       }
 
       core-doc-toc {
+        display: none;
         width: 332px;
         overflow-x: hidden;
       }
@@ -6052,7 +6058,7 @@ <h1 style="font-size: 52px; color: #E91E63;">
     </template>
 
     <core-layout core-fit="">
-      <core-doc-toc data="{{classes}}" selected="{{selected}}"></core-doc-toc>
+      <core-doc-toc id="toc" data="{{classes}}" selected="{{selected}}"></core-doc-toc>
       <core-doc-page core-flex="" data="{{data}}"></core-doc-page>
     </core-layout>
 
@@ -6107,6 +6113,9 @@ <h1 style="font-size: 52px; color: #E91E63;">
         if (!this.data && !this.route && this.classes.length) {
           this.data = this.classes[0];
         }
+        if (this.classes.length > 1) {
+          this.$.toc.style.display = 'block';
+        }
         this.validateRoute();
       }