From bb7e80880a59cea4c02ca65a600c1d91feaffc6b Mon Sep 17 00:00:00 2001
From: Yuki Mihashi <31533303+yuki384@users.noreply.github.com>
Date: Wed, 30 Sep 2020 12:47:27 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AB?=
=?UTF-8?q?=E6=A4=9C=E7=B4=A2=E6=A9=9F=E8=83=BD=E3=82=92=E5=86=8D=E8=BF=BD?=
=?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
app/assets/stylesheets/custom.scss | 8 ---
app/assets/stylesheets/extension/header.scss | 58 +++++++++++++++++++-
app/views/layouts/application.html.haml | 27 ++++-----
app/views/shared/_header.html.haml | 11 +++-
public/img/search.svg | 4 ++
5 files changed, 82 insertions(+), 26 deletions(-)
create mode 100644 public/img/search.svg
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
index 1083e4f58..b70049ef5 100644
--- a/app/assets/stylesheets/custom.scss
+++ b/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%;
diff --git a/app/assets/stylesheets/extension/header.scss b/app/assets/stylesheets/extension/header.scss
index 65d94a431..bd6a054ac 100644
--- a/app/assets/stylesheets/extension/header.scss
+++ b/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;
+ }
+ }
+}
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 51559ebbe..da0c02567 100644
--- a/app/views/layouts/application.html.haml
+++ b/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
diff --git a/app/views/shared/_header.html.haml b/app/views/shared/_header.html.haml
index 243ab0383..a50bc5c95 100644
--- a/app/views/shared/_header.html.haml
+++ b/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
+
+ = check_box_tag :search, "検索アイコン", false, class: 'search-checkbox'
+ .search
+ %input#searchbox{ :placeholder => "資料を検索", :type => "text" }
+ #hits
+ #pagination
%li= link_to 'お問い合わせ', '/#contact'
diff --git a/public/img/search.svg b/public/img/search.svg
new file mode 100644
index 000000000..16b1687c1
--- /dev/null
+++ b/public/img/search.svg
@@ -0,0 +1,4 @@
+