diff options
-rw-r--r-- | content/assets/stylesheets/stylesheet.scss | 80 | ||||
-rw-r--r-- | content/frontend/search/components/search_form.vue | 2 | ||||
-rw-r--r-- | content/frontend/search/search_helpers.js | 4 | ||||
-rw-r--r-- | content/index.erb | 6 | ||||
-rw-r--r-- | layouts/default.html | 4 | ||||
-rw-r--r-- | layouts/head.html | 1 | ||||
-rw-r--r-- | layouts/header.html | 2 |
7 files changed, 91 insertions, 8 deletions
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss index 0287d9da..c46991d0 100644 --- a/content/assets/stylesheets/stylesheet.scss +++ b/content/assets/stylesheets/stylesheet.scss @@ -622,3 +622,83 @@ $gl-icon-check: 'data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7 -webkit-mask-image: url('#{$gl-icon-check}'); mask-image: url('#{$gl-icon-check}'); } + +// Google Search +/* stylelint-disable selector-class-pattern */ +form.gsc-search-box table tr, +table.gsc-completion-container tr { + border-top: unset; + border-bottom: unset; +} +table.gsc-completion-container tr { + background: transparent; +} +table.gsc-completion-container tr.gsc-completion-selected { + background: $gray-50; +} +form.gsc-search-box { + table { + margin: 0; + } + table.gsc-search-box { + background-color: $white; + border-radius: 0.25rem; + border-collapse: collapse; + border-style: hidden; + box-shadow: 0 0 0 1px $gray-400; + color: $gray-900; + height: 2.5rem; + margin: 0 auto; + max-width: 25rem; + td.gsc-input { + border-right: 1px solid $gray-400; + padding: 0 0 0 0.75em; + } + } + td { + padding: 0; + } + .gsc-search-button { + padding: 0 0.35rem; + } + .gsst_a { + padding: 0 0.5rem; + } + .gscb_a { + line-height: 0; + } + .gsst_a .gscb_a { + color: $purple-300; + } + .gsst_b { + top: 4px; + } + .gsst_a:hover .gscb_a, + .gsst_a:focus .gscb_a { + color: $purple-700; + } +} +table.gstl_50 { + margin-top: 0; +} +// Interior pages: nav bar search form +.navbar-nav { + div.gsc-control-searchbox-only { + transition: width 0.3s ease-in-out; + width: 12rem; + } + div.gsc-control-searchbox-only:focus-within { + width: 18rem; + } + form.gsc-search-box { + margin-bottom: 0; + } + form.gsc-search-box table.gsc-search-box { + height: auto; + } + input.gsc-input { + width: 14rem; + font-size: 0.875rem; + } +} +/* stylelint-enable selector-class-pattern */ diff --git a/content/frontend/search/components/search_form.vue b/content/frontend/search/components/search_form.vue index 1c83878d..44d25d1d 100644 --- a/content/frontend/search/components/search_form.vue +++ b/content/frontend/search/components/search_form.vue @@ -12,7 +12,7 @@ export default { }, methods: { onSubmit() { - window.location.href = `/search/?query=${encodeURI(this.query)}`; + window.location.href = `/search/?q=${encodeURI(this.query)}`; }, }, }; diff --git a/content/frontend/search/search_helpers.js b/content/frontend/search/search_helpers.js index b1121fe4..45048fab 100644 --- a/content/frontend/search/search_helpers.js +++ b/content/frontend/search/search_helpers.js @@ -9,7 +9,7 @@ * The query string if it exists, or an empty string. */ export const getSearchQueryFromURL = () => { - return new URLSearchParams(window.location.search).get('query') || ''; + return new URLSearchParams(window.location.search).get('q') || ''; }; /** @@ -18,5 +18,5 @@ export const getSearchQueryFromURL = () => { * This allows users to copy a link to search result pages. */ export const updateURLParams = (query) => { - window.history.pushState(null, '', `${window.location.pathname}?query=${query}`); + window.history.pushState(null, '', `${window.location.pathname}?q=${query}`); }; diff --git a/content/index.erb b/content/index.erb index c63a1fe8..b03183ef 100644 --- a/content/index.erb +++ b/content/index.erb @@ -13,12 +13,14 @@ title: GitLab Documentation <div class="row"> <div class="col d-flex justify-content-center"> <div class="card search gl-mt-6 gl-py-2"> - <div class="card-body"> - <h5 class="card-title gl-pb-2">Search the docs</h5> + <div class="card-body gl-pb-7"> + <h5 class="card-title gl-pb-4">Search the docs</h5> <% if @item[:searchbar].nil? %> <% unless @item.identifier.to_s.split('/')[1] == 'search' %> <% if @config[:search_backend] == "algolia" %> <div id="docsearch" class="gl-mb-4 gl-display-flex gl-justify-content-center"></div> + <% elsif @config[:search_backend] == "google" %> + <div class="gcse-searchbox-only" enableAutoComplete="true" data-resultsUrl="/search/"></div> <% else %> <div class="js-search-form"></div> <% end %> diff --git a/layouts/default.html b/layouts/default.html index dee2f472..68dbf471 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -72,9 +72,7 @@ <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script> <% if @config[:search_backend] == "algolia" %> <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script> - <% elsif @config[:search_backend] == "google" %> - <script src="<%= @items['/frontend/search/google.*'].path %>"></script> - <% else %> + <% elsif @config[:search_backend] == "lunr" %> <script src="<%= @items['/frontend/search/lunrsearch.*'].path %>"></script> <% end %> <script src="<%= @items['/assets/javascripts/toggle_popover.*'].path %>"></script> diff --git a/layouts/head.html b/layouts/head.html index 99284d35..2a99649a 100644 --- a/layouts/head.html +++ b/layouts/head.html @@ -32,6 +32,7 @@ <% if @config[:search_backend] == "google" && @config[:google_search_key] %> <script>const GOOGLE_SEARCH_KEY = "<%= @config[:google_search_key] %>";</script> +<script async src="https://cse.google.com/cse.js?cx=97494f9fe316a426d"></script> <% end %> <!-- Enable CSP headers --> diff --git a/layouts/header.html b/layouts/header.html index 21b2cd6c..8526c79a 100644 --- a/layouts/header.html +++ b/layouts/header.html @@ -14,6 +14,8 @@ <% unless %w(search index.erb).any?(location) %> <% if @config[:search_backend] == "algolia" %> <div id="docsearch" class="gl-my-3 gl-md-mt-0 gl-md-mb-0"></div> + <% elsif @config[:search_backend] == "google" %> + <div class="gcse-searchbox-only" enableAutoComplete="true" data-resultsUrl="/search/"></div> <% else %> <div class="js-search-form"></div> <% end %> |