Merge pull request #3421 from travis-ci/release_241104

Release 24 11 04
travis-ci · Nov 4, 2024 · b6144dc · b6144dc
2 parents 11b56b7 + feb0df9
commit b6144dc
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 78 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -100,7 +100,7 @@ GEM
       listen (~> 3.0)
     json (2.3.1)
     kramdown (1.17.0)
-    libv8 (3.16.14.19)
+    libv8 (3.16.14.19.1)
     liquid (4.0.3)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)

diff --git a/_includes/enterprise_sidebar.html b/_includes/enterprise_sidebar.html
@@ -1,31 +1,4 @@
 <div id="sidebar" class="sidebar">
-  <div>
-    <!-- <h2>Search</h2> -->
-    <div class="searchbox">
-      <form>
-        <input type="text" id="st-search-input" class="searchbox-input" placeholder="Search the docs" />
-      </form>
-      <script type="text/javascript">
-      var Swiftype = window.Swiftype || {};
-        (function() {
-          Swiftype.key = 'tXvDDzd4fNTBnLvxfEyx';
-
-      Swiftype.searchSearchFields = {
-            "page": ["title, body, tags"]
-          };
-          Swiftype.autocompleteSearchFields = {
-            "page": ["title, body, tags"]
-          };
-          /** DO NOT EDIT BELOW THIS LINE **/
-          var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
-          script.src = "//swiftype.com/embed.js";
-          var entry = document.getElementsByTagName('script')[0];
-          document.getElementsByTagName('script')[0].parentNode.insertBefore(script, entry);
-        }());
-      </script>
-    </div>
-  </div>
-
   <section class="sidebar-navigation">
     <nav>
       <h3>Travis CI Enterprise</h3>

diff --git a/_includes/header.html b/_includes/header.html
@@ -5,6 +5,34 @@
       <ul id="navigation" class="navigation">
         <li><a href="https://travis-ci.com/blog">Blog</a></li>
         <li><a href="/">Docs</a></li>
+        <li class="searchbox-wrap">
+          <div class="searchtoggle">
+            <img class="searchtoggleicon" src="/images/ui/search.svg" alt="Search icon" />
+          </div>
+          <div class="searchbox">
+            <form>
+              <input type="text" id="st-search-input" class="searchbox-input" placeholder="Search the docs" />
+            </form>
+            <script type="text/javascript">
+              var Swiftype = window.Swiftype || {};
+                (function() {
+                  Swiftype.key = 'tXvDDzd4fNTBnLvxfEyx';
+
+                  Swiftype.searchSearchFields = {
+                    "page": ["title, body, tags"]
+                  };
+                  Swiftype.autocompleteSearchFields = {
+                    "page": ["title, body, tags"]
+                  };
+                  /** DO NOT EDIT BELOW THIS LINE **/
+                  var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
+                  script.src = "//swiftype.com/embed.js";
+                  var entry = document.getElementsByTagName('script')[0];
+                  document.getElementsByTagName('script')[0].parentNode.insertBefore(script, entry);
+                }());
+            </script>
+          </div>
+        </li>
         <li class="toggle"><button type="button" id="toggle-menu" class="button--teal">Menu</button></li>
       </ul>
     </nav>

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -1,31 +1,4 @@
 <div id="sidebar" class="sidebar">
-  <div>
-    <!-- <h2>Search</h2> -->
-    <div class="searchbox">
-      <form>
-        <input type="text" id="st-search-input" class="searchbox-input" placeholder="Search the docs" />
-      </form>
-      <script type="text/javascript">
-      var Swiftype = window.Swiftype || {};
-        (function() {
-          Swiftype.key = 'tXvDDzd4fNTBnLvxfEyx';
-
-          Swiftype.searchSearchFields = {
-            "page": ["title, body, tags"]
-          };
-          Swiftype.autocompleteSearchFields = {
-            "page": ["title, body, tags"]
-          };
-          /** DO NOT EDIT BELOW THIS LINE **/
-          var script = document.createElement('script'); script.type = 'text/javascript'; script.async = true;
-          script.src = "//swiftype.com/embed.js";
-          var entry = document.getElementsByTagName('script')[0];
-          document.getElementsByTagName('script')[0].parentNode.insertBefore(script, entry);
-        }());
-      </script>
-    </div>
-  </div>
-
   <section class="sidebar-navigation">
     <nav>
       <h3>Getting Started</h3>

diff --git a/assets/javascripts/main.js b/assets/javascripts/main.js
@@ -2,16 +2,17 @@ $(document).ready(function () {
 
   $('#toggle-menu').on('click', function () {
     $('#sidebar').toggleClass('is-open');
-    $('.wrapper').toggleClass('is-fixed')
+    $('.wrapper').toggleClass('is-fixed');
     if ($('#sidebar').hasClass('is-open')) {
       $(this).text('Close');
     } else {
       $(this).text('Menu');
     }
-
   });
 
-
+  $('.searchtoggle').on('click', function () {
+    $('.searchbox').toggleClass('is-open');
+  });
 
   var sidebarToggle = function () {
     $('.sidebar-navigation').addClass('has-js');

diff --git a/assets/stylesheets/_search.sass b/assets/stylesheets/_search.sass
@@ -1,15 +1,52 @@
+.topbar .navigation .searchbox-wrap
+  padding: 7px
+  text-align: right
+  margin-right: 10px
 
-.searchbox
-  margin-top: 3rem
-
-.searchbox-input
-  display: block
-  width: 100%
-  padding: .4em .6em
-  border: 2px solid $cream-dark
-  border-radius: 4px
-  background:
-    image: url(../../images/ui/search.svg)
-    repeat: no-repeat
-    size: 1.4rem
-    position: 98% 48%
+  @media #{$large-up}
+    padding: 7px 30px
+
+  .searchbox
+    background-color: #f1f1f1
+    position: absolute
+    padding: 10px 15px
+    top: 54px
+    left: 0
+    right: 0
+    transition: transform 200ms ease
+    will-change: transform
+    transform: translateX(-100%)
+    z-index: 10
+
+    &.is-open
+      transform: translateX(0)
+
+    .enterprise &
+      background-color: #333333
+
+    @media #{$large-up}
+      position: relative
+      transform: none
+      padding: 0
+      top: 0
+
+    .searchbox-input
+      display: block
+      width: 100%
+      padding: .4em 2em
+      border: 2px solid $cream-dark
+      border-radius: 4px
+      color: $asphalt-grey
+      background:
+        image: url(../../images/ui/search.svg)
+        repeat: no-repeat
+        size: 1.4rem
+        position: 1% 48%
+
+  .searchtoggle
+
+    .searchtoggleicon
+      height: 25px
+
+    @media #{$large-up}
+      display: none