Merge pull request #1 from colleenmcginnis/sticky-otp-cmcg

bmorelli25 · web-flow · commit 3a73e858e846 · 2022-07-21T14:24:20.000-06:00
[sticky otp/toc] Builds on elastic/docs elastic#2478
diff --git a/resources/web/docs_js/index.js b/resources/web/docs_js/index.js
@@ -22,7 +22,7 @@ import "../../../../../node_modules/url-search-params-polyfill";
 export function init_headers(sticky_content, lang_strings) {
   // Add on-this-page block
   var this_page = $('<div id="this_page"></div>').prependTo(sticky_content);
-  this_page.append('<p id="otp">' + lang_strings('On this page') + '</p>');
+  this_page.append('<p id="otp" class="aside-heading">' + lang_strings('On this page') + '</p>');
   var ul = $('<ul></ul>').appendTo(this_page);
   var items = 0;
   var baseHeadingLevel = 0;
@@ -57,7 +57,7 @@ export function init_headers(sticky_content, lang_strings) {
             .remove();
           var text = title_container.html();
           const adjustedLevel = hLevel - baseHeadingLevel;
-          const li = '<li id="otp-text" class="heading-level-' + adjustedLevel + '"><a href="#' + this.id + '">' + text + '</a></li>';
+          const li = '<li id="otp-text-' + i + '" class="otp-text heading-level-' + adjustedLevel + '"><a href="#' + this.id + '">' + text + '</a></li>';
           ul.append(li);
         }
       }
@@ -171,16 +171,24 @@ function init_toc(lang_strings) {
 }
 
 function highlight_otp() {
+  let visibileHeadings = []
   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       const id = entry.target.getAttribute('id');
-      const element = document.querySelector(`#sticky_content #this_page a[href="#${id}"]`);
-
+      let element = document.querySelector(`#sticky_content #this_page a[href="#${id}"]`);
+      let itemId = $(element).parent().attr('id')
       if (entry.intersectionRatio > 0){
-        console.log("ir", entry.intersectionRatio)
-        element.classList.add('active');
+        visibileHeadings.push(itemId);
       } else {
-        element.classList.remove('active');
+        const position = visibileHeadings.indexOf(itemId);
+        visibileHeadings.splice(position, position + 1)
+      }
+      if (visibileHeadings.length > 0) {
+        visibileHeadings.sort()
+        // Remove existing active classes
+        $('a.active').removeClass("active");
+        // Add active class to the first visible heading
+        $('#' + visibileHeadings[0] + ' > a').addClass('active')
       }
     })
   })
diff --git a/resources/web/style/base_styles.pcss b/resources/web/style/base_styles.pcss
@@ -31,15 +31,57 @@
     margin-bottom: 1.15em;
   }
 
-  #otp {
+  .content-container {
+    width: 100%;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-right: auto;
+    margin-left: auto;
+    @media screen and (min-width: 769px) {
+      max-width: 760px;
+    }
+    @media screen and (min-width: 992px) {
+      padding: 0px 10px;
+      max-width: 972px;
+    }
+    @media screen and (min-width: 1200px) {
+      padding: 0px 20px;
+      max-width: 1160px;
+    }
+    @media screen and (min-width: 1560px) {
+      max-width: 1500px;
+    }
+  }
+
+  .h-almost-full {
+    height: 95vh;
+  }
+
+  #this_page {
+    display: block;
+    border-bottom: 1px solid #dee2e6;
+    height:60vh;
+    overflow: scroll;
+    @media screen and (max-width: 992px) {
+      display: none;
+    }
+  }
+
+  #left_col {
+    overflow: scroll;
+  }
+
+  .aside-heading {
     font-weight: 600;
-    padding-top: 20px;
-    margin-top: 10px;
+    margin-top: 20px;
     margin-bottom: 10px;
-    font-size: 85%;
   }
 
-  #otp-text {
-    font-size: 85%;
+  .media-type {
+    opacity: 0.6;
+    text-transform: uppercase;
+    font-size: 80%;
+    font-weight: 400;
+    margin-bottom: 0px;
   }
 }
diff --git a/resources/web/style/link.pcss b/resources/web/style/link.pcss
@@ -1,6 +1,6 @@
 #guide {
   a {
-    color: #00a9e5;
+    color: #0077CC;
     font-weight: normal;
     text-decoration: none;
     outline: none;
diff --git a/resources/web/style/on_this_page.pcss b/resources/web/style/on_this_page.pcss
@@ -5,16 +5,22 @@
 
   .heading-level-1 {
     display: block;
-    padding-left: 1.5em !important;
+    a {
+      font-size: 0.85rem;
+    }
   }
 
   .heading-level-2 {
     display: block;
-    padding-left: 3em !important;
+    padding-left: 1em !important;
   }
 
   .heading-level-3 {
     display: block;
     padding-left: 4.5em !important;
   }
+
+  .otp-text {
+    font-size: 85%;
+  }
 }
diff --git a/resources/web/style/rtpcontainer.pcss b/resources/web/style/rtpcontainer.pcss
@@ -5,9 +5,7 @@
  * on the rtpcontainer in general. */
 #rtpcontainer {
   .mktg-promo {
-    margin: 55px 0 30px;
-    padding: 32px;
-    border: 1px solid #d4dae5;
+    padding: 12px;
   }
   h3 {
     margin: 5px 0;
diff --git a/resources/web/style/toc.pcss b/resources/web/style/toc.pcss
@@ -1,9 +1,13 @@
 #guide {
+  .book-title {
+    font-size: 120%;
+    font-weight: 600;
+    margin: 20px 0px 20px 20px;
+  }
   .toc {
     ul {
       margin: 0 0 1em 0;
       padding: 0;
-      border: 1px solid #ddd;
       ul {
         /* Hide all sub-toc elements by default. See rules with `.show` that
          * show specific sub-toc elements. */
@@ -14,6 +18,9 @@
       margin: 0;
       padding: 0;
       list-style: none;
+      a {
+        color: rgb(52, 55, 65) !important;
+      }
       ul {
         border: none;
       }
@@ -30,21 +37,20 @@
     }
 
     .collapsible.show {
+      
       > ul {
         display: block;
       }
       > span {
-        background-image: inline("img/minus.png");
-        background-color: white;
+        background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoaded" focusable="false" role="img" aria-hidden="true"><path fill-rule="non-zero" d="M8 7V3.5a.5.5 0 00-1 0V7H3.5a.5.5 0 000 1H7v3.5a.5.5 0 101 0V8h3.5a.5.5 0 100-1H8zm-.5 8a7.5 7.5 0 110-15 7.5 7.5 0 010 15z"></path></svg>');
         border-bottom: 1px solid white;
       }
     }
     .collapsible {
       > span {
         background-repeat: no-repeat;
-        background-image: inline("img/plus.png");
+        background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoaded" focusable="false" role="img" aria-hidden="true"><path fill-rule="non-zero" d="M8 7h3.5a.5.5 0 110 1H8v3.5a.5.5 0 11-1 0V8H3.5a.5.5 0 010-1H7V3.5a.5.5 0 011 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 100 13.236A6.618 6.618 0 007.5.882z"></path></svg>');
         &:hover {
-          background-color: #fafafa;
           cursor: pointer;
         }
       }
@@ -53,15 +59,13 @@
     /* Customize each level of the TOC, mostly so it looks "indented". */
     > li {
       > span {
-        background-color: #efefef;
-        border-bottom: 1px solid #ddd;
         font-size: 1em;
         background-position: 0 11px;
         padding-left: 20px;
       }
       > ul > li {
         > span {
-          padding-left: 40px;
+          padding-left: 30px;
           background-position: 20px 8px;
         }
         > ul > li {
@@ -107,14 +111,22 @@
 }
 
 #book_title {
-  color: #2b4590;
+  color: rgb(52, 55, 65);
+  font-weight: 600;
+  display: block;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-bottom-color: #dee2e6;
 
   select {
-    background-color: #fcfcfc;
-    border: none;
-    margin-left: 1px;
-    color: #2b4590;
-    width: 150px;
+    width: 100%;
+    display: block;
+    color: #495057;
+    background-color: #fff;
+    border: 1px solid #495057;
+    border-radius: 5px;
+    padding: 3px;		
+    margin-top: 6px;
   }
   #other_versions {
     /* We'll show it if you click "other versions". */
diff --git a/resources/web/template.html b/resources/web/template.html
@@ -82,32 +82,44 @@
         <div class="content-wrapper">
 
           <section id="guide" <!-- DOCS LANG -->>
-            <div class="container">
+            <div class="content-container">
               <div class="row">
-
-                <div class="col-12 order-2 col-sm-3 order-sm-1 col-md-3 order-md-1" id="left_col">
-                  <div id="rtpcontainer" style="display: block;">
-                    <div class="mktg-promo">
-                      <h3>Most Popular</h3>
-                      <ul class="icons">
-                        <li class="icon-elasticsearch-white"><a href="https://www.elastic.co/webinars/getting-started-elasticsearch?baymax=default&elektra=docs&storm=top-video">Get Started with Elasticsearch: Video</a></li>
-                        <li class="icon-kibana-white"><a href="https://www.elastic.co/webinars/getting-started-kibana?baymax=default&elektra=docs&storm=top-video">Intro to Kibana: Video</a></li>
-                        <li class="icon-logstash-white"><a href="https://www.elastic.co/webinars/introduction-elk-stack?baymax=default&elektra=docs&storm=top-video">ELK for Logs & Metrics: Video</a></li>
-                      </ul>
-                    </div>
-                  </div>
+                <div class="col-12 order-2 col-sm-3 order-sm-1 col-md-3 order-md-1 col-lg-3 sticky-top h-almost-full" id="left_col">
                   <!-- The TOC is appended here -->
                 </div>
 
-                <div class="col-12 order-1 col-sm-9 order-sm-2 col-md-7 order-md-2 guide-section">
+                <div class="col-12 order-1 col-sm-9 col-lg-7 order-lg-2 guide-section">
                   <!-- start body -->
                   <!-- DOCS BODY -->
                   <!-- end body -->
                 </div>
 
-                <div class="col-12 order-3 col-sm-12 order-sm-3 col-md-2 order-md-3" id="right_col">
-                  <div class="sticky-top" id="sticky_content">
+                <div class="col-12 order-3 col-lg-2 order-lg-3 sticky-top h-almost-full" id="right_col">
+                  <div id="sticky_content">
                     <!-- The OTP is appended here -->
+                    <div id="rtpcontainer">
+                      <div class="mktg-promo">
+                        <p class="aside-heading">Most Popular</p>
+                        <div class="pb-2">
+                          <p class="media-type">Video</p>
+                          <a href="https://www.elastic.co/webinars/getting-started-elasticsearch?baymax=default&elektra=docs&storm=top-video">
+                            <p class="mb-0">Get Started with Elasticsearch</p>
+                          </a>
+                        </div>
+                        <div class="pb-2">
+                          <p class="media-type">Video</p>
+                          <a href="https://www.elastic.co/webinars/getting-started-kibana?baymax=default&elektra=docs&storm=top-video">
+                            <p class="mb-0">Intro to Kibana</p>
+                          </a>
+                        </div>
+                        <div class="pb-2">
+                          <p class="media-type">Video</p>
+                          <a href="https://www.elastic.co/webinars/introduction-elk-stack?baymax=default&elektra=docs&storm=top-video">
+                            <p class="mb-0">ELK for Logs & Metrics</p>
+                          </a>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>

Original file line number	Diff line number	Diff line change
`@@ -5,16 +5,22 @@`
`5`	`5`
`6`	`6`	`.heading-level-1 {`
`7`	`7`	`display: block;`
`8`		`- padding-left: 1.5em !important;`
	`8`	`+ a {`
	`9`	`+ font-size: 0.85rem;`
	`10`	`+ }`
`9`	`11`	`}`
`10`	`12`
`11`	`13`	`.heading-level-2 {`
`12`	`14`	`display: block;`
`13`		`- padding-left: 3em !important;`
	`15`	`+ padding-left: 1em !important;`
`14`	`16`	`}`
`15`	`17`
`16`	`18`	`.heading-level-3 {`
`17`	`19`	`display: block;`
`18`	`20`	`padding-left: 4.5em !important;`
`19`	`21`	`}`
	`22`	`+`
	`23`	`+ .otp-text {`
	`24`	`+ font-size: 85%;`
	`25`	`+ }`
`20`	`26`	`}`