ヘッダーに検索機能を再追加

Author: yuki384

app/assets/stylesheets/custom.scss

@@ -70,14 +70,6 @@ img.emoji {
   border-radius: 0px;
 }
 
-/* DocSearch by Algolia */
-.search {
-  padding-top: 17px;
-  padding-left: 15px;
-  padding-right: 20px;
-  padding-bottom: 10px;
-}
-
 #searchbox {
   padding-left: 5px;
   font-size: 90%;

app/assets/stylesheets/extension/header.scss

@@ -1,3 +1,5 @@
+@import "color";
+
 body {
   padding: 64px 0 0;
 }
@@ -120,7 +122,7 @@ body {
   }
 }
 
-@media only screen and (max-width:865px) {
+@media only screen and (max-width:900px) {
   .container-fluid {
     padding: 5px 10px;
   }
@@ -177,3 +179,57 @@ body {
     max-height: 540px;
   }
 }
+
+/* DocSearch by Algolia */
+.search {
+  padding-top: 17px;
+  padding-left: 15px;
+  padding-right: 20px;
+  padding-bottom: 10px;
+  position: absolute;
+  right: 0;
+  #searchbox {
+    width: 0;
+    transition: all .3s;
+    padding: 4px 0;
+    border: none;
+    border-radius: 4px;
+  }
+}
+.search-icon {
+  width: 16px;
+  border-radius: 0;
+}
+.collapse > .navbar-nav > li.search-li {
+  position: static;
+  &::before, &::after {
+    display: none;
+  }
+  @media only screen and (max-width: 768px) {
+    display: none;
+  }
+}
+.search-label {
+  margin: 0;
+  padding: 15px 8px;
+  color: #fff;
+  font-size: 14px;
+  line-height: 26px;
+  cursor: pointer;
+}
+.search-checkbox {
+  display: none;
+}
+.search-checkbox:checked + .search {
+  #searchbox {
+    width: 190px;
+    transition: all .3s;
+    padding: 4px;
+    box-shadow: 0 0 6px 1px rgba(88, 88, 88, 41%);
+    border: #fff solid 1px;
+    &:focus{
+      border: $main-blue solid 2px;
+      outline: none;
+    }
+  }
+}

app/views/layouts/application.html.haml

@@ -24,7 +24,7 @@
     %meta{content: "#{meta_image(yield(:meta_image))}", property: "og:image"}/
     %meta{content: "image/png",                         property: "og:image:type"}/
     %meta{content: "CoderDojo Japan",                   property: "og:site_name"}/
-  
+
     %meta{content: "summary_large_image",               name: "twitter:card"}/
     %meta{content: "@CoderDojoJapan",                   name: "twitter:site"}/
     %meta{content: "@CoderDojoJapan",                   name: "twitter:creator"}/
@@ -68,9 +68,7 @@
 
 
     / at the end of the HEAD
-    / TODO: Fix this later - https://github.com/coderdojo-japan/coderdojo.jp/issues/912
-    /- if is_kata?
-    /  %link{href: "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", rel: "stylesheet"}
+    %link{href: "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", rel: "stylesheet"}
 
   %body
     = render 'shared/header'
@@ -84,17 +82,16 @@
     :javascript
       twemoji.parse(document.body);
 
-    / TODO: Fix this later - https://github.com/coderdojo-japan/coderdojo.jp/issues/912
-    /- if is_kata?
-    /  %script{:src  => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js",
-    /          type: "text/javascript"}
-    /  :javascript
-    /    docsearch({
-    /      apiKey: '315da3c406c3fa374a0696590f4821a3',
-    /      indexName: 'coderdojo',
-    /      inputSelector: '#searchbox',
-    /      debug: false // Set debug to true if you want to inspect the dropdown
-    /    });
+
+    %script{:src  => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js", type: "text/javascript"}
+
+    :javascript
+      docsearch({
+        apiKey: '315da3c406c3fa374a0696590f4821a3',
+        indexName: 'coderdojo',
+        inputSelector: '#searchbox',
+        debug: false // Set debug to true if you want to inspect the dropdown
+      });
 
   #fb-root
   :javascript

app/views/shared/_header.html.haml

@@ -10,7 +10,7 @@
       .navbar-header-logos
         = link_to image_tag('/img/header-logo.png',  alt: 'CoderDojo logo'),  '/', id: "header-logo"
         = link_to image_tag('/img/header-brand.png', alt: 'CoderDojo brand'), '/', id: "header-brand"
-    .collapse#header-nav-toggle.navbar-collapse
+    #bs-example-navbar-collapse-1.collapse#header-nav-toggle.navbar-collapse
       %ul.nav.navbar-nav.navbar-right
         %li= link_to '全国の道場',     '/#dojos'
         %li= link_to '近日開催の道場', '/events'
@@ -27,5 +27,12 @@
             %li= link_to '立ち上げる', '/kata#startup'
             %li= link_to '支援',       '/kata#support'
             %li= link_to 'FAQ',        '/kata#faq'
-
+        / DocSearch: https://github.com/algolia/docsearch-configs/blob/master/configs/coderdojo.json
+        %li.search-li
+          <label for="search" class="search-label"><img src="/img/search.svg" alt="検索" class="search-icon" /></label>
+          = check_box_tag :search, "検索アイコン", false, class: 'search-checkbox'
+          .search
+            %input#searchbox{ :placeholder => "資料を検索", :type => "text" }
+            #hits
+            #pagination
         %li= link_to 'お問い合わせ',   '/#contact'