[camel-website] branch master updated: CAMEL-15335: update the search layout design (#444)

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

[camel-website] branch master updated: CAMEL-15335: update the search layout design (#444)

zregvart
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 <[hidden email]>
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 <[hidden email]>
   
    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(' &raquo; ')
+                .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('&quot;').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)