From c35e19f853c054c5876b92e74c188c336460ccc1 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Thu, 11 Oct 2018 14:08:24 +0200 Subject: [PATCH 1/2] Add search to the commands and topics --- public/styles.css | 6 ++++++ views/layout.haml | 14 ++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/public/styles.css b/public/styles.css index a24f5f0a..7a1f5adc 100644 --- a/public/styles.css +++ b/public/styles.css @@ -329,3 +329,9 @@ body { width: 100%; height: 100%; } .mobile-menu .menu-section-list a { display: block; padding: 10px 20px; } .mobile-menu .menu-section-list a:hover { background-color: rgba(255, 255, 255, 0.1); text-decoration: none; } .mobile-menu .logo { width: 120px; height: 106px; } + + +#search { margin: 0 auto; background-color: #f0f0f0; width: 100%; font-size: 0.85em; display: block; padding: 10px 0; text-align: center;} +#search .algolia-autocomplete { width: 600px; margin: 0 auto; } +#search .search-bar { border-radius: 5px; padding: 5px 5px 6px 5px; width: 100%;} +#search .search-bar:focus { outline: none; } diff --git a/views/layout.haml b/views/layout.haml index 9f7d853f..bb5f7457 100644 --- a/views/layout.haml +++ b/views/layout.haml @@ -5,6 +5,7 @@ %meta(charset="utf-8") %title= [@title, "Redis"].compact.join(" – ") %link(rel="stylesheet" href="/styles.css") + %link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css") %link(rel="shortcut icon" href="/images/favicon.png") %link(rel="search" type="application/opensearchdescription+xml" title="Look up a Redis command" href="/opensearch.xml") %meta(name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0") @@ -69,6 +70,10 @@ %aside.wide-callout .container Join us at Redis Day London: a day of Redis user stories and development updates. REGISTER FOR FREE. + + %section#search + .container + %input.search-bar(placeholder="Search for any command or topic") = content @@ -86,3 +91,12 @@ %script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js") %script(src="/app.js?#{File.mtime("public/app.js").to_i}") + %script(src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js") + :javascript + docsearch({ + appId: 'SQLJNQ4TNW', + apiKey: '102a9f557f6dbbf7f3cc6755f8f4b7b1', + indexName: 'redis', + inputSelector: '#search .search-bar', + debug: true + }); From 48cb4717c114d25dbb1cd41f243bcf21fa05e2ee Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Tue, 30 Oct 2018 11:13:17 +0100 Subject: [PATCH 2/2] Remove search on command page --- public/styles.css | 12 ------------ views/commands.haml | 16 ---------------- 2 files changed, 28 deletions(-) diff --git a/public/styles.css b/public/styles.css index 7a1f5adc..d44d276f 100644 --- a/public/styles.css +++ b/public/styles.css @@ -247,15 +247,6 @@ body.topics.whos-using-redis ul:first-of-type li img { vertical-align: middle; m #commands li .command { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; font-family: "Monaco", "Menlo", monospace; display: block; margin: 0 0 2px 0; color: #0066aa; } #commands li .command .args { color: #555555; } #commands li .summary { display: block; font-size: 0.8em; line-height: 1.5em; } -#commands nav { margin: 0 auto; background-color: #f0f0f0; width: 100%; font-size: 0.85em; display: block; padding: 10px 0; } -#commands nav a { color: #555555; text-decoration: none; display: inline-block; padding: 0.3em 0.5em; } -#commands nav a.current { background-color: #666666; color: white; } -#commands nav label { margin: 0 10px; } -#commands nav label span { display: none; } -#commands nav select, #commands nav input { border: 1px solid #bbbbbb; font-size: 14px; margin: 0 5px; } -#commands nav input { border-radius: 5px; padding: 5px 5px 6px 5px; width: 100px; } -#commands nav input:focus { outline: none; } -#commands nav select { height: 32px; } h1.command { margin-bottom: 0.5em; } @@ -263,9 +254,6 @@ h1.command { margin-bottom: 0.5em; } @media only screen and (min-width: 992px) { #commands .command { font-size: 0.9em; } #commands .command .args { font-size: 0.8em; } - #commands nav label { margin: 0 10px 0 0; } - #commands nav label span { display: inline; } - #commands nav input { width: 200px; } #commands ul li { float: left; margin: 1em 1.5%; overflow: hidden; width: 30%; } #commands ul li a { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #fafafa; height: 6em; } } #buzz { text-align: right; } diff --git a/views/commands.haml b/views/commands.haml index 07284683..495ad5ec 100644 --- a/views/commands.haml +++ b/views/commands.haml @@ -1,20 +1,4 @@ %section#commands - %nav - .container - %label - %span Filter by group: - - %select.command-reference-filter - %option(value="") All - - - Reference::GROUPS.sort_by(&:last).each do |name, description| - %option(value="#{name}")= description - - or - - %label - %span search for: - %input.js-command-reference-search(placeholder="e.g. #{@commands.sample.name}" autofocus) .container %ul