cockroachdb · j-low · Jul 12, 2018 · Jun 19, 2018 · Jun 19, 2018 · Jun 20, 2018
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,4 +1,4 @@
-<div class="col-md-3 col-sidebar">
+<div class="col-sidebar">
   <script>
     $(document).ready(function() {
       // Initialize navgoco with default options
@@ -9,9 +9,9 @@
 
       var navgocoOptions = {
         caretHtml: '',
-        {% if page.version.version == 'v2.1' %}accordion: false,{% else %}accordion: true,{% endif %}
-        openClass: 'active--expand', // open
-        save: false, // leave false or nav highlighting doesn't work right
+        accordion: true,
+        openClass: 'active',
+        save: false,
         cookie: {
           name: 'navgoco',
           expires: false,
@@ -22,36 +22,6 @@
           easing: 'swing'
         }
       };
-
-      // when/if we decide to include this functionality in other versions, we can remove the conditional liquid statement
-      // and migrate the contained code block to customscripts.js
-      {% if page.version.version == 'v2.1' %}
-        if ($(window).width() >= 992) {
-          $('#mysidebar .tier-1').addClass('active--expand');
-        }
-
-        $(window).on('resize', function() {
-          if ($(window).width() > 992) {
-            $('#mysidebar .tier-1>ul').slideDown(0);
-            adjustMinHeight();
-          } else {
-            $('#mysidebar .tier-1>ul').slideUp(0);
-          }
-        });
-      {% endif %}
-
-      function adjustMinHeight(duration) {
-        setTimeout(function() {
-          var height = $sidebar.outerHeight();
-          if(height > 475) {
-            $maincontent.animate({ 'min-height' : 625 + (height - 475) }, 200);
-            $contentcol.css({ 'min-height' : 625 + (height - 475) });
-          } else {
-            $maincontent.animate({ 'min-height' : 625 }, 200);
-            $contentcol.css({ 'min-height' : 625 });
-          }
-        }, 200);
-      }
 
       function closeVersionSwitcher() {
         $('#version-switcher .tier-1 ul').slideUp();
@@ -60,7 +30,6 @@
 
       $sidebar.navgoco($.extend(navgocoOptions, {
         onToggleAfter: function() {
-          adjustMinHeight();
           if ($(this.el).attr('id') == 'mysidebar' &&
               $('#version-switcher').hasClass('open')) {
             closeVersionSwitcher();
@@ -76,7 +45,6 @@
 
       $sidebar.show();
       $versionSwitcher.show();
-      adjustMinHeight();
     });
   </script>
 
@@ -104,7 +72,6 @@
         </form>
       </div>
     </li>
-
     <script>
       (function () {
         var baseUrl = "{{ site.baseurl }}";
@@ -240,41 +207,9 @@
       location.href = $(this).val();
     });
   </script>
+
+  <script src="{{ 'js/searchInputRendering.js' | relative_url }}"></script>
 </div>
 
 <!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above.-->
 <script>$("#mysidebar").find("li.active").parents('li').toggleClass("active");</script>
-
-{% if page.url == '/search.html' %}
-<script>
-$(document).ready(function() {
-  // this will make search appear instead of header in collapsed docs menu
-  $('.collapsed-header').hide();
-  $('.search-wrap').show();
-
-  // this will remove the class with custom styling for search page,
-  // so when we close the menu it reverts to normal styling
-  // needs to happen if any of these elements are clicked
-  $('.sidenav-arrow, #search-input, .clear-search').on('click', function() {
-    if ($('#mysidebar').hasClass('nav--search')) {
-      $('#mysidebar').removeClass('nav--search').addClass('nav--home');
-    }
-  });
-
-  // set search input value to query string
-  $('#search-input').val(QueryString.q.replace('+', ' '));
-
-  // on load, show close button if search input
-	if ($('#search-input').val() != '') $('.clear-search').show();
-
-  $('.clear-search').on('click', function() {
-    $('#search-input').val('');
-    $(this).hide();
-  });
-
-  $('#search-input').on('input', function() {
-    if ($(this).val() != '') $('.clear-search').show();
-  });
-});
-</script>
-{% endif %}
diff --git a/_includes/topnav.html b/_includes/topnav.html
@@ -30,7 +30,7 @@
 		<div class="mobile-sub-nav">
 				<span>Spotlights</span>
 				<ul class="mobile-sub-nav--link-list">
-					<li><a href="https://www.cockroachlabs.com/campaigns/kubernetes/">CockroachDB on Kubernetes</a></li>
+					<li><a href="https://www.cockroachlabs.com/campaigns/kubernetes/">How to Run CockroachDB on Kubernetes</a></li>
 				</ul>
 				<a href="https://www.cockroachlabs.com/guides/">Guides</a>
 				<a href="https://www.cockroachlabs.com/docs/stable/training/">Training</a>
@@ -42,69 +42,66 @@
 
 <!-- Desktop / Tablet Navigation -->
 <header class="navbar-fixed-top">
-    <div class="container">
-        <div class="row">
-            <a class="logo" href="https://www.cockroachlabs.com/" title="Cockroach Labs">
-                <img src="{{ 'images/CL_Logo_Horizontal.svg' | relative_url }}" width="100%" alt="Cockroach Labs" />
-            </a>
-
-            <nav class="desktop" role="navigation">
-        			<div class='menu-item-dropdown'>
-        				Product
-        				<div class="menu-dropdown">
-        					<a href="https://www.cockroachlabs.com/product/cockroachdb/" data-proofer-ignore>
-        						<div class="menu-dropdown__title">CockroachDB</div>
-        						<div class="menu-dropdown__info">The SQL database for global cloud services.</div>
-        					</a>
-									<a href="https://www.cockroachlabs.com/solutions/automated-operation/" data-proofer-ignore>
-        						<div class="menu-dropdown__title">Automated Operation</div>
-										<div class="menu-dropdown__info">Automate tasks like scaling, replication, and recovery.</div>
-        					</a>
-									<a href="https://www.cockroachlabs.com/solutions/global-clusters/" data-proofer-ignore>
-        						<div class="menu-dropdown__title">Global Clusters</div>
-										<div class="menu-dropdown__info">Scale your infrastructure across datacenters and regions.</div>
-        					</a>
-									<a href="https://www.cockroachlabs.com/pricing/" data-proofer-ignore>
-        						<div class="menu-dropdown__title">Pricing</div>
-        					</a>
-        					<a href="{{ "/stable/frequently-asked-questions.html" | relative_url }}" data-proofer-ignore>
-        						<div class="menu-dropdown__title">FAQ</div>
-        					</a>
-        				</div>
-        			</div>
-        			<a href="https://www.cockroachlabs.com/customers/" data-proofer-ignore>Customers</a>
-        			<a href="{{ "/stable" | relative_url }}" class="current-menu-item" data-proofer-ignore>Docs</a>
-        			<div class='menu-item-dropdown'>
-        				<div class="menu-item-dropdown__parent-link">Resources</div>
-        				<div class="menu-dropdown">
-										<div class="menu-dropdown--subsection">
-											<span class="menu-dropdown--subsection__title">Spotlights</span>
-											<a class="menu-dropdown--subsection__link" href="https://www.cockroachlabs.com/campaigns/kubernetes/">CockroachDB on Kubernetes</a>
-										</div>
-										<a href="https://www.cockroachlabs.com/guides/">
-											<div class="menu-dropdown__title">Guides</div>
-										</a>
-										<a href="https://www.cockroachlabs.com/docs/stable/training/" data-proofer-ignore>
-											<div class="menu-dropdown__title">Training</div>
-										</a>
-										<a href="https://forum.cockroachlabs.com/">
-											<div class="menu-dropdown__title">Forum</div>
-										</a>
-									</div>
-        			</div>
-        			<a href="https://www.cockroachlabs.com/blog/" class='blog-nav' data-proofer-ignore>Blog</a>
-              <a href="{{ "/stable/install-cockroachdb.html" | relative_url }}" class="button--header menu-item" data-proofer-ignore>Download</a>
-        		</nav>
-            <nav class="mobile" role="navigation">
-              <a href="#" title="Expand Menu" class="hamburger">
-        				<span></span>
-        				<span></span>
-        				<span></span>
-        				<span></span>
-        			</a>
-              <a target="_blank" href="{{ "/stable/install-cockroachdb.html" | relative_url }}" class="button--header menu-item" data-proofer-ignore>Download</a>
-            </nav>
+	<div class="navbar-fixed-top--inner">
+		<a class="logo" href="https://www.cockroachlabs.com/" title="Cockroach Labs">
+			<img src="{{ 'images/CL_Logo_Horizontal.svg' | relative_url }}" width="100%" alt="Cockroach Labs" />
+		</a>
 
-        </div>
-    </div>
+		<nav class="desktop" role="navigation">
+			<div class='menu-item-dropdown'>
+				Product
+				<div class="menu-dropdown">
+					<a href="https://www.cockroachlabs.com/product/cockroachdb/" data-proofer-ignore>
+						<div class="menu-dropdown__title">CockroachDB</div>
+						<div class="menu-dropdown__info">The SQL database for global cloud services.</div>
+					</a>
+					<a href="https://www.cockroachlabs.com/solutions/automated-operation/" data-proofer-ignore>
+						<div class="menu-dropdown__title">Automated Operation</div>
+						<div class="menu-dropdown__info">Automate tasks like scaling, replication, and recovery.</div>
+					</a>
+					<a href="https://www.cockroachlabs.com/solutions/global-clusters/" data-proofer-ignore>
+						<div class="menu-dropdown__title">Global Clusters</div>
+						<div class="menu-dropdown__info">Scale your infrastructure across datacenters and regions.</div>
+					</a>
+					<a href="https://www.cockroachlabs.com/pricing/" data-proofer-ignore>
+						<div class="menu-dropdown__title">Pricing</div>
+					</a>
+					<a href="{{ "/stable/frequently-asked-questions.html" | relative_url }}" data-proofer-ignore>
+						<div class="menu-dropdown__title">FAQ</div>
+					</a>
+				</div>
+			</div>
+			<a href="https://www.cockroachlabs.com/customers/" data-proofer-ignore>Customers</a>
+			<a href="{{ "/stable" | relative_url }}" class="current-menu-item" data-proofer-ignore>Docs</a>
+			<div class='menu-item-dropdown'>
+				<div class="menu-item-dropdown__parent-link">Resources</div>
+				<div class="menu-dropdown">
+						<div class="menu-dropdown--subsection">
+							<span class="menu-dropdown--subsection__title">Spotlights</span>
+							<a class="menu-dropdown--subsection__link" href="https://www.cockroachlabs.com/campaigns/kubernetes/">How to Run CockroachDB on Kubernetes</a>
+						</div>
+						<a href="https://www.cockroachlabs.com/guides/">
+							<div class="menu-dropdown__title">Guides</div>
+						</a>
+						<a href="https://www.cockroachlabs.com/docs/stable/training/" data-proofer-ignore>
+							<div class="menu-dropdown__title">Training</div>
+						</a>
+						<a href="https://forum.cockroachlabs.com/">
+							<div class="menu-dropdown__title">Forum</div>
+						</a>
+					</div>
+			</div>
+			<a href="https://www.cockroachlabs.com/blog/" class='blog-nav' data-proofer-ignore>Blog</a>
+			<a href="{{ "/stable/install-cockroachdb.html" | relative_url }}" class="button--header menu-item" data-proofer-ignore>Download</a>
+		</nav>
+		<nav class="mobile" role="navigation">
+			<a href="#" title="Expand Menu" class="hamburger">
+				<span></span>
+				<span></span>
+				<span></span>
+				<span></span>
+			</a>
+			<a target="_blank" href="{{ "/stable/install-cockroachdb.html" | relative_url }}" class="button--header menu-item" data-proofer-ignore>Download</a>
+		</nav>
+	</div>
 </header>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,20 +9,26 @@
   {% endfor %}
   {% include topnav.html %}
   <div id="content">
-    <div id="main-content" class="container">
-      <div class="row sidebar-row">
+    <div id="main-content">
+      <div class="sidebar-row">
         {% if page.no_sidebar == true %}
-          <div class="col-md-10 col-md-offset-1 content-col">
+          <div class="content-col no-sidebar">
         {% else %}
           {% include sidebar.html %}
-          <div class="col-md-9 content-col content-col-border {% if page.url == '/' %}content-col--landing{% endif %}">
+          <div class="content-col {% if page.url == '/' %}content-col--landing{% endif %}"> 
         {% endif %}
             {{content}}
           </div>
+          <div class="toc-col">
+            {% if page.toc == true %}
+              <div id="toc-right"></div>
+            {% endif %}
+          </div>
       </div>
     </div>
     {% include footer.html %}
   </div>
+  <script src="{{ 'js/tocRightScrollHighlight.js' | relative_url }}"></script>
   {% include google_tag_manager.html %}
   {% include google_remarketing.html %}
   {% include hubspot_analytics.html %}

diff --git a/css/components/_buttons.scss b/css/components/_buttons.scss
@@ -123,9 +123,10 @@
 		@include button();
 		background-color: transparent;
 		border: none;
-		color: $cl_blue;
+		color: $cl_gray;
 		line-height: 40px;
 		padding: 0;
+		margin-top: 9px;
 		text-align: center;
 
 		&:focus {
@@ -140,7 +141,6 @@
 	.dropdown-menu {
 		border: none;
 		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 10px 20px 0 rgba(0, 0, 0, 0.1);
-		// box-shadow: 0 0 15px 0 rgba(0,0,0,0.06), 0 0 5px 0 rgba(0,0,0,0.06);
 	}
 
 	.dropdown-menu > li > a {
@@ -161,6 +161,11 @@
 		}
 	}
 
+	.arrow-up,
+	.arrow-down {
+		border-color: $cl_gray;
+	}
+
 	.arrow-up {
 		display: none;
 	}

diff --git a/css/components/_callout.scss b/css/components/_callout.scss
@@ -33,7 +33,7 @@
 
     h4, .bs-callout__label {
       color: $cl_green;
-    }
+    }    
   }
 
   &--danger {

diff --git a/css/components/_help-widget.scss b/css/components/_help-widget.scss
@@ -6,6 +6,10 @@
     opacity: 0;
     @include groovy(opacity);
 
+    @include at-query($min, $screen-md) {
+        right: 30px;
+    }
+
     &.fixed {
         position: fixed;
         bottom: 25px;

diff --git a/css/components/_search.scss b/css/components/_search.scss
@@ -11,8 +11,9 @@
 
   #search-input {
     background-color: white;
-    border: solid 1px #bcbcbc;
+    border: none;
     border-radius: 32px;
+    box-shadow: 0 0 8px $cl_gray_medium;
     height: 40px;
     width: calc(100% - 30px);
     outline: 0px none;
@@ -31,14 +32,23 @@
     }
 
     @media (min-width: $screen-md) {
-      width: 90%;
-      margin-bottom: 30px;
+      width: 100%;
     }
   }
 }
 
-li.search-wrap {
+#mysidebar li.search-wrap {
   margin-bottom: 0;
+
+  @include at-query($min, $screen-md) {
+    display: block;
+    position: fixed;
+    top: 89px;
+    width: 240px;
+    background: #ffffff;
+    z-index: 2;
+    padding-top: 11px;
+  }
 }
 
 .search-item {
@@ -63,8 +73,9 @@ li.search-wrap {
   width: 35px;
   border-radius: 50%;
   outline: none;
+  cursor: pointer;
 
-  @include at-query($min, $screen-md) { right: 20px; }
+  @include at-query($min, $screen-md) { right: 0; }
 
   &:before, &:after {
     content: '';
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ @@
         h4, .bs-callout__label {
           color: $cl_green;
-        }
+        }
       }
       &--danger {
@@ Expand Down @@