feat: Improve search widget (#47)

riboseinc · Nov 11, 2018 · 5163f3e · 5163f3e
1 parent 4e1aadf
commit 5163f3e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/_includes/nav-links.html b/_includes/nav-links.html
@@ -18,7 +18,7 @@
 
   {% if site.algolia_search %}
     <div class="search-widget">
-      <input type="search" id="siteSearchInput">
+      <input type="search" id="siteSearchInput" placeholder="Type to search…">
     </div>
   {% endif %}
 

diff --git a/_sass/open-project-header-footer.scss b/_sass/open-project-header-footer.scss
@@ -238,13 +238,7 @@ body > .underlay > header {
       }
       .search-widget {
         margin-top: 2em;
-
-        // TODO: Refactor to avoid duplication
-        // with top-menu
-        input[type=search] {
-          background-color: white;
-          border: none;
-        }
+        margin-bottom: 1em;
       }
 
       > * {
@@ -266,6 +260,18 @@ body > .underlay > header {
     }
   }
 
+  > .top-menu > .search-widget,
+  > .hamburger-menu > nav > .search-widget {
+    input[type=search] {
+      padding: 6px 10px 6px 10px;
+      border-radius: 1em;
+      font-size: inherit;
+      line-height: inherit;
+      border: 0;
+      background-color: white;
+    }
+  }
+
   > .top-menu {
     flex: 1;
 
@@ -277,21 +283,13 @@ body > .underlay > header {
       white-space: nowrap;
     }
     > .search-widget {
-      transition: width .2s ease-in-out;
       width: 0;
       display: none;
       position: relative;
 
       > * {
         flex: 1;
       }
-      input[type=search] {
-        padding: 6px 10px 6px 10px;
-        border-radius: 1em;
-        font-size: inherit;
-        line-height: inherit;
-        border: 0;
-      }
     }
     &.with-expanded-search {
       > a {

diff --git a/assets/js/opf.js b/assets/js/opf.js
@@ -46,7 +46,7 @@
           menuEl.insertBefore(origNavEl, menuEl.querySelector('.site-logo-container').nextSibling);
         } else {
           origNavEl.remove();
-          origNavNextSiblingEl.parent.insertBefore(origNavEl, origNavNextSiblingEl);
+          origNavNextSiblingEl.parentNode.insertBefore(origNavEl, origNavNextSiblingEl);
           origNavEl.classList.add('top-menu');
         }
       });