This is an automated email from the ASF dual-hosted git repository.
zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git
The following commit(s) were added to refs/heads/master by this push:
new a2b7884 CAMEL-15335: update the search layout design (#444)
a2b7884 is described below
commit a2b7884ceda66efb14a3ff828fd7ab4bf8565f0f
Author: Aemie Jariwala <44139348+aem...@users.noreply.github.com>
AuthorDate: Wed Aug 12 14:49:48 2020 +0530
CAMEL-15335: update the search layout design (#444)
* CAMEL-15335: update the search layout design
* CAMEL-15335: modify design css
fix a minor issue
* CANEL-15335: update the layout with recent changes
* CAMEL-15335: improvize on responsiveness of layout
* CAMEL-15335: deal with the case of hit snippet
* fix: position of cancel button in searchbar
* increase width of search result for mobile view
Co-authored-by: Zoran Regvart <zo...@regvart.com>
fix build issue
---
antora-ui-camel/src/css/header.css | 79 +++++++++++++++++++---
antora-ui-camel/src/img/algolia.svg | 13 ++++
.../src/js/vendor/algoliasearch.bundle.js | 36 +++++++---
3 files changed, 112 insertions(+), 16 deletions(-)
diff --git a/antora-ui-camel/src/css/header.css
b/antora-ui-camel/src/css/header.css
index 59d54fc..061d81f 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -273,7 +273,7 @@ html:not([data-scroll='0']) .navbar {
}
.navbar-search input:focus-within {
- background-color: #fff;
+ background-color: var(--navbar-background);
border-color: #eaeaec;
outline: 0;
@@ -294,13 +294,33 @@ html:not([data-scroll='0']) .navbar {
#search_results {
top: 3.38rem;
- background: #fffe;
+ background: var(--navbar-background);
text-align: left;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
position: absolute;
margin-right: 10px;
overflow-y: auto;
max-height: 80vh;
+ scrollbar-width: thin; /* Firefox */
+}
+
+#search_results::-webkit-scrollbar {
+ width: var(--scrollbar-thickness);
+}
+
+#search_results::-webkit-scrollbar-track {
+ background: var(--scrollbar-track-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+#search_results::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb-color);
+ border-radius: var(--scrollbar-radius);
+}
+
+#search_results::-webkit-scrollbar-thumb:hover,
+#search_results::-webkit-scrollbar-thumb:active {
+ background: var(--scrollbar-thumb-active-color);
}
.result_header {
@@ -309,15 +329,44 @@ html:not([data-scroll='0']) .navbar {
padding-right: 0.5rem;
}
+#search_results div.result {
+ padding: 0.25rem;
+ pointer-events: none;
+}
+
+#search_results div.result:hover {
+ background: var(--color-smoke-50);
+}
+
+#search_results div.heading {
+ display: flex;
+ flex-wrap: wrap;
+}
+
#search_results dt {
- padding: 0.5rem;
+ padding: 0.5rem 0 0.5rem 0.5rem;
color: var(--color-camel-orange);
text-transform: uppercase;
- border-top: 1px solid var(--navbar-search-result-separator);
- border-bottom: 1px solid var(--navbar-search-result-separator);
+ font-weight: 700;
+ flex-grow: 1;
+}
+
+#search_results dt.version {
+ height: 1.75rem;
+ padding: 0.3rem;
+ border: 2px solid var(--color-camel-orange);
+ border-radius: 25px;
+ text-align: center;
+ flex-grow: 0;
+}
+
+#search_results dd {
+ margin-right: 2rem;
+ word-break: break-word;
}
#search_results a {
+ pointer-events: auto;
padding: 0.5rem;
}
@@ -331,9 +380,22 @@ html:not([data-scroll='0']) .navbar {
padding-top: 0.3rem;
}
+#search_results div.footer-search {
+ display: inline-flex;
+ width: 100%;
+ padding: 0.75rem;
+}
+
+div.footer-search h4 {
+ color: var(--color-asf-dark-blue);
+ width: 5rem;
+}
+
.no_search_results {
- padding: 0.5rem 1rem;
+ padding: 1rem;
font-weight: bold;
+ color: var(--color-asf-dark-blue);
+ border-bottom: 2px solid var(--color-smoke-50);
}
.algolia-docsearch-suggestion--highlight {
@@ -409,11 +471,12 @@ html:not([data-scroll='0']) .navbar {
}
#search-cancel {
- bottom: calc(50% - 0.45rem);
+ margin-top: 0.75rem;
}
#search_results {
+ left: 0;
+ width: 100vw;
top: var(--navbar-mobile-height);
- width: calc(100vw - 3rem);
}
}
diff --git a/antora-ui-camel/src/img/algolia.svg
b/antora-ui-camel/src/img/algolia.svg
new file mode 100644
index 0000000..b591988
--- /dev/null
+++ b/antora-ui-camel/src/img/algolia.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; version="1.1" baseProfile="basic"
id="Layer_1" x="0px" y="0px" viewBox="0 0 1366 362" xml:space="preserve"
height="20px">
+<g>
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse"
x1="428.2578" y1="404.1504" x2="434.1453" y2="409.8504"
gradientTransform="matrix(94.045 0 0 -94.072 -40381.5273 38479.5195)">
+ <stop offset="0" style="stop-color:#00AEFF"/>
+ <stop offset="1" style="stop-color:#383284"/>
+ </linearGradient>
+ <path xmlns="http://www.w3.org/2000/svg"; style="fill: url(#SVGID_1_)"
d="M61.8,15.4h242.8c23.9,0,43.4,19.4,43.4,43.4v242.9c0,23.9-19.4,43.4-43.4,43.4H61.8
c-23.9,0-43.4-19.4-43.4-43.4V58.7C18.4,34.8,37.8,15.4,61.8,15.4z"/>
+ <path
d="M187,98.7c-51.4,0-93.1,41.7-93.1,93.2S135.6,285,187,285s93.1-41.7,93.1-93.2S238.5,98.7,187,98.7z
M187,257.5c-36.2,0-65.6-29.4-65.6-65.6s29.4-65.6,65.6-65.6s65.6,29.4,65.6,65.6S223.3,257.5,187,257.5z
M187,139.7v48.9
c0,1.4,1.5,2.4,2.8,1.7l43.4-22.5c1-0.5,1.3-1.7,0.8-2.7c-9-15.8-25.7-26.6-45-27.3C188,137.8,187,138.6,187,139.7z
M126.2,103.8
l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2,0l-6.8,6.8c-5.6,5.6-5.6,14.6,0,20.2l5.6,5.6c0.9,0.9,2.2,0.7,3-0.2c3.3-4.5,6.9-8.8,10.9-12.8
c4.1-4.1 [...]
+ <g transform="translate(121 2)">
+ <path
d="M721.5,265.6c0,26.7-6.8,46.2-20.5,58.6c-13.7,12.4-34.6,18.6-62.8,18.6c-10.3,0-31.7-2-48.8-5.8l6.3-31
c14.3,3,33.2,3.8,43.1,3.8c15.7,0,26.9-3.2,33.6-9.6s10-15.9,10-28.5v-6.4c-3.9,1.9-9,3.8-15.3,5.8c-6.3,1.9-13.6,2.9-21.8,2.9
c-10.8,0-20.6-1.7-29.5-5.1c-8.9-3.4-16.6-8.4-22.9-15c-6.3-6.6-11.3-14.9-14.8-24.8c-3.5-9.9-5.3-27.6-5.3-40.6
c0-12.2,1.9-27.5,5.6-37.7c3.8-10.2,9.2-19,16.5-26.3c7.2-7.3,16-12.9,26.3-17c10.3-4.1,22.4-6.7,35.5-6.7
c12.7,0,24.4,1.6,35.8,3.5c11.4,1. [...]
+ </g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/antora-ui-camel/src/js/vendor/algoliasearch.bundle.js
b/antora-ui-camel/src/js/vendor/algoliasearch.bundle.js
index 0456b4b..2f4a5d9 100644
--- a/antora-ui-camel/src/js/vendor/algoliasearch.bundle.js
+++ b/antora-ui-camel/src/js/vendor/algoliasearch.bundle.js
@@ -46,7 +46,7 @@
cancel.style.display = 'block'
index
.search(search.value, {
- hitsPerPage: 10,
+ hitsPerPage: 5,
})
.then((results) => {
const hits = results.hits
@@ -54,14 +54,17 @@
const d = {}
d.url = hit.url
var section = hit.hierarchy.lvl0
- if (hit.hierarchy.lvl6 !== null) section = section + ' [' +
hit.hierarchy.lvl6 + ']'
+ if (hit.hierarchy.lvl6 !== null) section = section + '/' +
hit.hierarchy.lvl6
var breadcrumbs = Object.values(hit.hierarchy)
.slice(1)
.filter((lvl) => lvl !== null)
- .join(' » ')
+ .join(' / ')
d.breadcrumbs = ((breadcrumbs !== '') ? breadcrumbs : section)
- d.snippet = hit._snippetResult.content.value + '...'
+ d.snippet = hit._snippetResult.content.value
+ if (d.snippet !== undefined || d.snippet !== null) {
+ d.snippet = d.snippet.split('"').join('') + '...'
+ }
data[section] = data[section] || []
data[section].push(d)
@@ -74,7 +77,11 @@
.then((data) => {
if (Object.entries(data).length === 0 && data.constructor ===
Object) {
return `
- <header class="no_search_results">Nothing Found</header>
+ <header class="no_search_results">No results found for
"${search.value}"</header>
+ <div class="footer-search">
+ <h4 id="algolia">Search By</h4>
+ <img src="/_/img/algolia.svg" />
+ </div>
`
} else {
return `
@@ -82,8 +89,12 @@
${Object.keys(data)
.map(
(section) => `
- <dt>${section}</dt>
- ${data[section]
+ <div class="result">
+ <div class="heading">
+ <dt>${section.split('/')[0]}</dt>
+ <dt class="version">${section.split('/')[1]}</dt>
+ </div>
+ ${data[section]
.map(
(hit) => `
<a href="${hit.url}">
@@ -95,15 +106,24 @@
`
)
.join('')}
- `
+ </div>`
)
.join('')}
</dl>
+ <div class="footer-search">
+ <h4 id="algolia">Search By</h4>
+ <img src="/_/img/algolia.svg" />
+ </div>
`
}
})
.then((markup) => {
results.innerHTML = markup
+ Array.from(results.querySelectorAll('.version')).forEach((version)
=> {
+ if (version.innerHTML === 'undefined') {
+ version.style.display = 'none'
+ }
+ })
container.className = 'navbar-search'
})
}, 150)
