浏览代码

HUE-8800 [docs] Move toc to right hand side.

jdesjean 6 年之前
父节点
当前提交
acc4a82e05

+ 26 - 0
docs/docs-site/static/css/theme-hue.css

@@ -101,3 +101,29 @@ a:hover {
 #sidebar hr {
     border-color: var(--MENU-SECTION-HR-color);
 }
+
+.toc {
+  position: fixed;
+  top: 100px;
+  right: 0;
+  width: auto;
+  border-left: thin solid #ccc;
+}
+.toc .wrapper{
+  margin-left: 20px;
+}
+.toc ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 5px;
+}
+.toc ul li a {
+  color: var(--MENU-SECTIONS-LINK-color);;
+}
+.toc h1, .toc h2, .toc h3, .toc h4, .toc h5, .toc h6 {
+  font-family: "Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
+  color: #222;
+}
+.toc ul li a.active {
+  color: var(--MENU-SECTION-ACTIVE-CATEGORY-color);
+}

+ 18 - 19
docs/docs-site/themes/hugo-theme-learn/layouts/partials/header.html

@@ -55,16 +55,12 @@
                   </div>
                   {{ end }}
                 {{ end }}
-                {{$toc := (and (not .Params.disableToc) (not .Params.chapter))}}
                 <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                     <span id="sidebar-toggle-span">
                         <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                           <i class="fas fa-bars"></i>
                         </a>
                     </span>
-                  {{ if $toc }}
-                  <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
-                  {{ end }}
                   <span class="links">
                  {{$showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb))}}
                  {{if $showBreadcrumb}}
@@ -74,9 +70,6 @@
                  {{ end }}
                   </span>
                 </div>
-                {{ if $toc }}
-                    {{ partial "toc.html" . }}
-                {{ end }}
               </div>
             </div>
             {{ end }}
@@ -84,17 +77,23 @@
         {{ if .Params.chapter }}
           <div id="chapter">
         {{ end }}
-        <div id="body-inner">
-          {{if and (not .IsHome) (not .Params.chapter) }}
-            <h1>{{.Title}}</h1>
-          {{end}}
+        <div class="body-outer">
+          {{$toc := (and (not .Params.disableToc) (not .Params.chapter))}}
+          {{ if $toc }}
+              {{ partial "toc.html" . }}
+          {{ end }}
+          <div id="body-inner">
+
+            {{if and (not .IsHome) (not .Params.chapter) }}
+              <h1>{{.Title}}</h1>
+            {{end}}
 
-        {{define "breadcrumb"}}
-          {{$parent := .page.Parent }}
-          {{ if $parent }}
-            {{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.URL $parent.Title .value) }}
-            {{ template "breadcrumb" dict "page" $parent "value" $value }}
-          {{else}}
-            {{.value|safeHTML}}
+          {{define "breadcrumb"}}
+            {{$parent := .page.Parent }}
+            {{ if $parent }}
+              {{ $value := (printf "<a href='%s'>%s</a> > %s" $parent.URL $parent.Title .value) }}
+              {{ template "breadcrumb" dict "page" $parent "value" $value }}
+            {{else}}
+              {{.value|safeHTML}}
+            {{end}}
           {{end}}
-        {{end}}

+ 8 - 5
docs/docs-site/themes/hugo-theme-learn/layouts/partials/toc.html

@@ -1,5 +1,8 @@
-<div class="progress">
-    <div class="wrapper">
-{{ .TableOfContents }}
-    </div>
-</div>
+<aside class="toc">
+  <div class="wrapper">
+    <header>
+    <h4>What's on this Page</h4>
+    </header>
+    {{.TableOfContents}}
+  </div>
+</aside>

+ 17 - 0
docs/docs-site/themes/hugo-theme-learn/static/css/theme.css

@@ -411,6 +411,7 @@ textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[typ
     right: 0;
 }
 #body-inner {
+    width: calc(100% - 300px);
     margin-bottom: 5rem;
 }
 #chapter {
@@ -1128,3 +1129,19 @@ pre .copy-to-clipboard:hover {
 #searchResults {
     text-align: left;
 }
+
+.toc {
+  position: fixed;
+  top: 100px;
+  right: 0;
+  width: auto;
+  border-left: thin solid #ccc;
+}
+.toc .wrapper{
+  margin-left: 20px;
+}
+.toc ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 5px;
+}

+ 37 - 0
docs/docs-site/themes/hugo-theme-learn/static/js/learn.js

@@ -678,3 +678,40 @@ jQuery.fn.highlight = function(words, options) {
         jQuery.highlight(this, re, settings.element, settings.className);
     });
 };
+
+$(window).on('DOMContentLoaded load resize scroll', function () {
+  function isElementInViewport (el) {
+
+    var rect     = el.getBoundingClientRect(),
+        vWidth   = window.innerWidth || doc.documentElement.clientWidth,
+        vHeight  = window.innerHeight || doc.documentElement.clientHeight,
+        efp      = function (x, y) { return document.elementFromPoint(x, y) };
+
+    // Return false if it's not in the viewport
+    if (rect.right < 0 || rect.bottom < 0
+            || rect.left > vWidth || rect.top > vHeight)
+        return false;
+
+    // Return true if any of its four corners are visible
+    return (
+          el.contains(efp(rect.left,  rect.top))
+      ||  el.contains(efp(rect.right, rect.top))
+      ||  el.contains(efp(rect.right, rect.bottom))
+      ||  el.contains(efp(rect.left,  rect.bottom))
+    );
+  }
+  var visible = 0;
+  $('#body-inner h1, #body-inner h2, #body-inner h3, #body-inner h4, #body-inner h5, #body-inner h6').each(function (i,e) {
+    if(isElementInViewport(e)) {
+      visible = $(e).attr('id');
+      if (visible) {
+        return false;
+      }
+    }
+  });
+
+  if(visible){
+    $('.toc ul li a').removeClass('active');
+    $('.toc ul li a[href="#'+visible+'"]').addClass('active');
+  }
+});