update responsive behavior of landing page; reimplement sidebar accordion behavior on all pages

Author: Joseph Lowinske

_includes/sidebar.html

@@ -7,26 +7,10 @@
           $maincontent = $('#main-content'),
           $contentcol = $('.content-col');
 
-      var navgocoOptionsSidebar = {
+      var navgocoOptions = {
         caretHtml: '',
-        accordion: false,
-        openClass: 'active--expand',
-        save: true,
-        cookie: {
-          name: 'navgoco',
-          expires: false,
-          path: '/'
-        },
-        slide: {
-          duration: 150,
-          easing: 'swing'
-        }
-      };
-
-      var navgocoOptionsVersionSwitcher = {
-        caretHtml: '',
-        accordion: false,
-        openClass: 'active--expand',
+        accordion: true,
+        openClass: 'active',
         save: false,
         cookie: {
           name: 'navgoco',
@@ -39,26 +23,12 @@
         }
       };
 
-      {% 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);
-          } else {
-            $('#mysidebar .tier-1>ul').slideUp(0);
-          }
-        });
-      {% endif %}
-
       function closeVersionSwitcher() {
         $('#version-switcher .tier-1 ul').slideUp();
         $('#version-switcher').removeClass('open');
       }
 
-      $sidebar.navgoco($.extend(navgocoOptionsSidebar, {
+      $sidebar.navgoco($.extend(navgocoOptions, {
         onToggleAfter: function() {
           if ($(this.el).attr('id') == 'mysidebar' &&
               $('#version-switcher').hasClass('open')) {
@@ -67,7 +37,7 @@
         }
       }));
 
-      $versionSwitcher.navgoco($.extend(navgocoOptionsVersionSwitcher, {
+      $versionSwitcher.navgoco($.extend(navgocoOptions, {
         onToggleBefore: function() {
           $('#version-switcher').toggleClass('open');
         }

css/customstyles.css

@@ -16,20 +16,18 @@
 
     @include at-query($min, $screen-xsm) {
       height: 75px;
-      width: calc(33% - 15.5px);
-      margin-right: 10px;
-      margin-left: 10px;
+      width: calc(33% - 8.5px);
     }
 
-    @include at-query($min, $screen-sm) { width: calc(33% - 14.5px); }
-
     &.install {
       .landing-page__tutorial--tile-icon { content: url(../images/cl-download.svg); }
       .landing-page__tutorial--tile-label {
         &:after {
           content: 'Install';
 
           @include at-query($min, $screen-sm) { content: 'Install CockroachDB'; }
+          @include at-query($min, $screen-md) { content: 'Install'; }
+          @include at-query($min, $screen-lg + 130px) { content: 'Install CockroachDB'; }
         }
       }
     }
@@ -41,6 +39,8 @@
           content: 'Start cluster';
 
           @include at-query($min, $screen-sm) { content: 'Start a cluster'; }
+          @include at-query($min, $screen-md) { content: 'Start cluster'; }
+          @include at-query($min, $screen-lg) { content: 'Start a cluster'; }
         }
       }
     }

css/customstyles.css.map

@@ -277,7 +277,7 @@ body.sidenav-open {
     }
   }
 
-  li.active--expand {
+  li.active {
     > a {
       .arrow-down {
         transform: rotate(-135deg);