DOCS-3737: Move TOC (#4145)

Author: npentrel

Diff for: assets/scss/_sidebar-tree.scss

@@ -144,9 +144,9 @@
         @include media-breakpoint-up(md) {
             @supports (position: sticky) {
                 position: sticky;
-                top: 4rem;
+                top: 5rem;
                 z-index: 10;
-                height: calc(100vh - 4rem);
+                height: calc(100vh - 5rem);
             }
         }
 

Diff for: assets/scss/_styles_project.scss

@@ -201,7 +201,9 @@ h7, .h7 {
 }
 
 .td-sidebar-toc {
+  top: 6rem;
   border-left: unset;
+  height: calc(100vh - 10rem);
 }
 
 // Breadcrumb styling
@@ -1261,6 +1263,12 @@ td > ul, td > ol {
   animation: linear 2s wiggle 2s 2;
 }
 
+@media (min-width: 992px) {
+  #scrollButton {
+    margin-right: 10%;
+  }
+}
+
 #chatButtonContent {
   display: flex;
   justify-content: space-evenly;
@@ -1399,7 +1407,7 @@ img.frame {
 // This ensures the gray sidebar covers the area where the sticky buttons are rendered.
 @media (min-width: 768px) {
   .td-sidebar {
-    padding-bottom: 76px;
+    // padding-bottom: 76px;
     margin-bottom: -76px;
   }
 }
@@ -2027,7 +2035,7 @@ a.ais-Pagination-link:hover {
 // ensure tutorials page is 100% of height
 
 .row.flex-xl-nowrap {
-  min-height: 90%;
+  min-height: 100%;
 }
 
 
@@ -3327,4 +3335,16 @@ div.tablestep > table td, div.tablestep table td {
   margin-top: 1rem;
 }
 
-// Numbered list styling END
+footer.py-5 {
+  padding-bottom: 0 !important;
+  padding-top: 1rem !important;
+  margin-bottom: -2rem !important;
+}
+
+.td-main main {
+  padding-bottom: 0rem !important;
+}
+
+footer {
+  min-height: 30px !important;
+}// Numbered list styling END

Diff for: layouts/docs/baseof.html

@@ -21,8 +21,13 @@
           </aside>
           {{ if .Params.noToc }}
           {{ else }}
+          <aside class="d-none d-xl-block col-xl-2 td-sidebar-toc d-print-none">
+            {{ partial "page-meta-links.html" . }}
+            {{ partial "toc.html" . }}
+            {{ partial "taxonomy_terms_clouds.html" . }}
+          </aside>
           {{ end }}
-          <main class="col-12 col-md-9 {{ if .Params.noToc }}col-xl-10{{ else }}col-xl-10{{ end }} pl-md-5" role="main">
+          <main class="col-12 col-md-9 {{ if .Params.noToc }}col-xl-10{{ else }}col-xl-8{{ end }} pl-md-5" role="main">
             {{ partial "version-banner.html" . }}
             {{ if ne .Params.noedit true }}
               {{ partial "edit-on-github.html" . }}
@@ -34,17 +39,7 @@
           </main>
           {{ $img := resources.GetMatch "/icons/learn-viam-robot-icon-ai.svg" }}
         </div>
-          <button class="docsbutton" id="chatButton" title="Chatbot and support">
-            <span id="chatButtonContent">
-              <i style="font-size:x-large;" class="fas fa-comments"></i>
-              <span>Ask AI</span>
-            </span>
-          </button>
-          <button onclick="toTop()" class="docsbutton" id="scrollButton" title="Go to top" style="visibility: hidden;">
-            <i style="font-size:x-large;" class="fas fa-chevron-up"></i>
-          </button>
       </div>
-      {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}
   </body>

Diff for: layouts/docs/content.html

@@ -47,6 +47,16 @@ <h4 class="alert-heading">DRAFT</h4>
 
 	{{ .Content }}
 
+	<button class="docsbutton" id="chatButton" title="Chatbot and support">
+		<span id="chatButtonContent">
+			<i style="font-size:x-large;" class="fas fa-comments"></i>
+			<span>Ask AI</span>
+		</span>
+	</button>
+	<button onclick="toTop()" class="docsbutton" id="scrollButton" title="Go to top" style="visibility: hidden;">
+	<i style="font-size:x-large;" class="fas fa-chevron-up"></i>
+	</button>
+
 	{{ if ne .Params.no_list true}}
 	{{ $pages := union .Sections .Pages }}
 	<div id="next-page" class="card-container">
@@ -90,4 +100,6 @@ <h4 class="alert-heading">DRAFT</h4>
 		{{ partial "feedback.html" . }}
 		<br />
 	{{ end }}{{- end -}}
-</div>
+</div>
+
+{{ partial "footer.html" . }}

Diff for: layouts/docs/landing.html

@@ -31,8 +31,8 @@
             </span>
         </button>
     </div>
-      {{ partial "footer.html" . }}
-    </div>
+
+  </div>
 
     {{ partial "scripts.html" . }}
 

Diff for: layouts/partials/footer.html

@@ -2,21 +2,21 @@
 <footer class="bg-dark py-5 row d-print-none">
   <div class="container-fluid mx-sm-5">
     <div class="row">
-      <div class="col-6 col-sm-4 text-xs-center order-sm-2">
-        {{ with $links }}
+      <div class="col-2 col-sm-2 text-xs-center order-sm-2">
+        <!-- {{ with $links }}
         {{ with index . "user"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
-        {{ end }}
+        {{ end }} -->
       </div>
-      <div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
-        {{ with $links }}
+      <div class="col-6 col-sm-2 text-right text-xs-center order-sm-3">
+        <!-- {{ with $links }}
         {{ with index . "developer"}}
         {{ template "footer-links-block"  . }}
         {{ end }}
-        {{ end }}
+        {{ end }} -->
       </div>
-      <div class="col-12 col-sm-4 text-center py-2 order-sm-2">
+      <div class="col-12 col-sm-8 text-center py-2 order-sm-2">
         {{ with .Site.Params.copyright }}<small class="text-white">&copy; {{ now.Year}} {{ .}} {{ T "footer_all_rights_reserved" }}</small><BR>{{ end }}
           {{ with .Site.Params.privacy_policy }}<small class="ml-2"><a href="{{ . }}" target="_blank" rel="noopener">{{ "PRIVACY POLICY" }}</a></small>{{ end }}
           {{ with .Site.Params.tos_statement }}<small class="ml-2"><a href="{{ . }}" target="_blank" rel="noopener">{{ "TERMS" }}</a></small> {{ end }}
@@ -32,7 +32,7 @@
     </div>
   </div>
 </footer>
-{{ define "footer-links-block" }}
+<!-- {{ define "footer-links-block" }}
 <ul class="list-inline mb-0">
   {{ range . }}
   <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="{{ .name }}" aria-label="{{ .name }}">
@@ -42,4 +42,4 @@
   </li>
   {{ end }}
 </ul>
-{{ end }}
+{{ end }} -->

Diff for: layouts/partials/sidebar-tree.html

@@ -59,9 +59,7 @@
 <span> Tutorials </span>
 </a>
 <li class="active-path tutorial-heading">
-  <a href="" title="{{ $p.Title }}" class="active">{{ $p.LinkTitle }}
-  </a>
-  <div class="td-toc" id="TableOfContents"></div>
+  <a href="" title="{{ $p.Title }}" class="active">{{ $p.LinkTitle }}</a>
 </li>
 {{ else }}
 
@@ -105,19 +103,13 @@
     {{- end -}}
     </span>
   </span>
-  {{- if and ($active) (not .Params.notoc) -}}
-    <div class="td-toc" id="TableOfContents"></div>
-    {{- end -}}
     {{ else }}
       {{ if $s.Params.canonical }}
       <a href="{{$s.Params.canonical | relURL}}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }}>{{ $s.LinkTitle }} <i class="fas fa-external-link-alt fa-sm"></i>
       </a>
       {{ else }}
       <a href="{{ $manualLink }}"{{ if ne $s.LinkTitle $manualLinkTitle }} title="{{ $manualLinkTitle }}"{{ end }}{{ with $s.Params.manualLinkTarget }} target="{{ . }}"{{ if eq . "_blank" }} rel="noopener"{{ end }}{{ end }} class="{{ if $active}} active{{ end }}{{ if $treeRoot }} tree-root{{ end }}">{{ $s.LinkTitle }}
       </a>
-      {{- if and ($active) (not .Params.notoc) -}}
-      <div class="td-toc" id="TableOfContents"></div>
-      {{- end -}}
       {{- end }}
   {{ end }}
   {{- end }}