From a663c13478a49d29ae0267b6e45badb803267cf0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Valim?= Date: Fri, 12 Jan 2024 18:12:39 +0100 Subject: [PATCH] Improvements to search bar --- assets/css/autocomplete.css | 75 ++++--------------- assets/css/search-bar.css | 1 + .../autocomplete-suggestions.handlebars | 51 ++++++------- ...C7.js => handlebars.templates-TMISDFYZ.js} | 37 ++++----- formatters/html/dist/html-elixir-EWQHIWOK.css | 6 ++ formatters/html/dist/html-elixir-FM2CSD74.css | 6 -- formatters/html/dist/html-erlang-S3KWLODU.css | 6 ++ formatters/html/dist/html-erlang-YUARVD4J.css | 6 -- 8 files changed, 72 insertions(+), 116 deletions(-) rename formatters/html/dist/{handlebars.templates-43PMFBC7.js => handlebars.templates-TMISDFYZ.js} (92%) create mode 100644 formatters/html/dist/html-elixir-EWQHIWOK.css delete mode 100644 formatters/html/dist/html-elixir-FM2CSD74.css create mode 100644 formatters/html/dist/html-erlang-S3KWLODU.css delete mode 100644 formatters/html/dist/html-erlang-YUARVD4J.css diff --git a/assets/css/autocomplete.css b/assets/css/autocomplete.css index 9be8ba922..c4db57714 100644 --- a/assets/css/autocomplete.css +++ b/assets/css/autocomplete.css @@ -1,7 +1,7 @@ .autocomplete { display: none; position: absolute; - width: 84%; + width: calc(100% - 32px); top: 55px; } @@ -12,8 +12,8 @@ border-right: 12px solid transparent; border-bottom: 12px solid var(--autocompleBackground); position: absolute; - top: 9px; - left: 10%; + top: 8px; + left: 26px; transform: translateX(-50%); z-index: 100; background-color: transparent; @@ -22,20 +22,13 @@ .autocomplete-results { list-style: none; margin: 0; - padding: 15px; + padding: 15px 20px; display: flex; justify-content: space-between; color: var(--autocompleteResults); font-family: var(--sansFontFamily); font-weight: 300; font-size: 0.9rem; - gap: 3%; -} - -.autocomplete-results .show { - white-space: normal; - overflow-x: hidden; - width: 84%; } .autocomplete-results .bold { @@ -43,10 +36,6 @@ font-weight: 400; } -.autocomplete-results .mobile-hide { - width: 35%; -} - .autocomplete.shown { display: block; } @@ -61,7 +50,6 @@ box-shadow: 0px 15px 99px 0px var(--autocompleteBorder); overflow-y: auto; max-height: 450px; - padding: 0 0 10px 0; white-space: normal; overflow-x: hidden; } @@ -76,6 +64,14 @@ font-size: 0.9rem; } +.autocomplete-suggestion:first-child() { + border-top: 1px solid var(--suggestionBorder); +} + +.autocomplete-suggestion:last-child() { + border-bottom: 0; +} + .autocomplete-suggestion:hover, .autocomplete-suggestion.selected { background-color: var(--autocompleteHover); @@ -133,51 +129,8 @@ background-color: var(--autocompleteSrollbarTrack); } -@media (max-width: 480px) { - - .autocomplete { - width: 90%; - } - - .autocomplete .triangle { - left: 27%; - } -} - -@media (min-width: 481px) and (max-width: 767px) { - - .autocomplete { - width: 95%; - } - - .autocomplete .triangle { - left: 17%; - } -} - -@media (max-width: 767px) { - .autocomplete { - top: 50px; - left: 0; - right: 0; - z-index: 200; - } - - .autocomplete .triangle { - left: 17%; - } -} - -@media (max-width: 1023px) { - .autocomplete-results { - gap: 0; - } - - .autocomplete-results .show { - width: 100%; - } - - .autocomplete-results .mobile-hide { +@media screen and (max-width: 1023px) { + .autocomplete-results .press-return { display: none; } } diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css index 9a0ba9c0d..2fa014a5f 100644 --- a/assets/css/search-bar.css +++ b/assets/css/search-bar.css @@ -8,6 +8,7 @@ column-gap: 12px; align-items: center; width: 100%; + position: relative; } .search-bar { diff --git a/assets/js/handlebars/templates/autocomplete-suggestions.handlebars b/assets/js/handlebars/templates/autocomplete-suggestions.handlebars index 69b9c03ae..42e9b90c7 100644 --- a/assets/js/handlebars/templates/autocomplete-suggestions.handlebars +++ b/assets/js/handlebars/templates/autocomplete-suggestions.handlebars @@ -1,33 +1,34 @@
- Autocompletion results for - "{{term}}" . - - Press - RETURN - for full-text search. + + Autocompletion results for "{{term}}" + + + Press RETURN for full-text search
- {{#each suggestions}} - -
- {{# if deprecated }} - {{{title}}} - {{ else }} - {{{title}}} - {{/if}} - - {{#if label}} - {{label}} - {{/if}} -
+
+ {{#each suggestions}} + +
+ {{# if deprecated }} + {{{title}}} + {{ else }} + {{{title}}} + {{/if}} - {{#if description}} -
- {{{description}}} + {{#if label}} + {{label}} + {{/if}}
- {{/if}} - - {{/each}} + + {{#if description}} +
+ {{{description}}} +
+ {{/if}} + + {{/each}} +
diff --git a/formatters/html/dist/handlebars.templates-43PMFBC7.js b/formatters/html/dist/handlebars.templates-TMISDFYZ.js similarity index 92% rename from formatters/html/dist/handlebars.templates-43PMFBC7.js rename to formatters/html/dist/handlebars.templates-TMISDFYZ.js index a1e7d38fb..0e5190671 100644 --- a/formatters/html/dist/handlebars.templates-43PMFBC7.js +++ b/formatters/html/dist/handlebars.templates-TMISDFYZ.js @@ -1,27 +1,28 @@ -(()=>{(function(){var d=Handlebars.template,y=Handlebars.templates=Handlebars.templates||{};y["autocomplete-suggestions"]=d({1:function(o,l,a,f,r){var e,n,u=l??(o.nullContext||{}),s=o.hooks.helperMissing,i="function",c=o.escapeExpression,t=o.lookupProperty||function(p,m){if(Object.prototype.hasOwnProperty.call(p,m))return p[m]};return' -
-`+((e=t(a,"if").call(u,l!=null?t(l,"deprecated"):l,{name:"if",hash:{},fn:o.program(2,r,0),inverse:o.program(4,r,0),data:r,loc:{start:{line:15,column:8},end:{line:19,column:15}}}))!=null?e:"")+` -`+((e=t(a,"if").call(u,l!=null?t(l,"label"):l,{name:"if",hash:{},fn:o.program(6,r,0),inverse:o.noop,data:r,loc:{start:{line:21,column:8},end:{line:23,column:15}}}))!=null?e:"")+`
+(()=>{(function(){var d=Handlebars.template,y=Handlebars.templates=Handlebars.templates||{};y["autocomplete-suggestions"]=d({1:function(o,l,a,f,r){var e,n,u=l??(o.nullContext||{}),s=o.hooks.helperMissing,i="function",c=o.escapeExpression,t=o.lookupProperty||function(p,m){if(Object.prototype.hasOwnProperty.call(p,m))return p[m]};return' +
+`+((e=t(a,"if").call(u,l!=null?t(l,"deprecated"):l,{name:"if",hash:{},fn:o.program(2,r,0),inverse:o.program(4,r,0),data:r,loc:{start:{line:15,column:10},end:{line:19,column:17}}}))!=null?e:"")+` +`+((e=t(a,"if").call(u,l!=null?t(l,"label"):l,{name:"if",hash:{},fn:o.program(6,r,0),inverse:o.noop,data:r,loc:{start:{line:21,column:10},end:{line:23,column:17}}}))!=null?e:"")+`
-`+((e=t(a,"if").call(u,l!=null?t(l,"description"):l,{name:"if",hash:{},fn:o.program(8,r,0),inverse:o.noop,data:r,loc:{start:{line:26,column:6},end:{line:30,column:13}}}))!=null?e:"")+` -`},2:function(o,l,a,f,r){var e,n,u=o.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((e=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(l??(o.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:16,column:34},end:{line:16,column:45}}}):n))!=null?e:"")+` -`},4:function(o,l,a,f,r){var e,n,u=o.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((e=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(l??(o.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:18,column:31},end:{line:18,column:42}}}):n))!=null?e:"")+` -`},6:function(o,l,a,f,r){var e,n=o.lookupProperty||function(u,s){if(Object.prototype.hasOwnProperty.call(u,s))return u[s]};return' '+o.escapeExpression((e=(e=n(a,"label")||(l!=null?n(l,"label"):l))!=null?e:o.hooks.helperMissing,typeof e=="function"?e.call(l??(o.nullContext||{}),{name:"label",hash:{},data:r,loc:{start:{line:22,column:30},end:{line:22,column:39}}}):e))+` -`},8:function(o,l,a,f,r){var e,n,u=o.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return`
- `+((e=(n=(n=u(a,"description")||(l!=null?u(l,"description"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(l??(o.nullContext||{}),{name:"description",hash:{},data:r,loc:{start:{line:28,column:10},end:{line:28,column:27}}}):n))!=null?e:"")+` -
+`+((e=t(a,"if").call(u,l!=null?t(l,"description"):l,{name:"if",hash:{},fn:o.program(8,r,0),inverse:o.noop,data:r,loc:{start:{line:26,column:8},end:{line:30,column:15}}}))!=null?e:"")+` +`},2:function(o,l,a,f,r){var e,n,u=o.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((e=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(l??(o.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:16,column:36},end:{line:16,column:47}}}):n))!=null?e:"")+` +`},4:function(o,l,a,f,r){var e,n,u=o.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((e=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(l??(o.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:18,column:33},end:{line:18,column:44}}}):n))!=null?e:"")+` +`},6:function(o,l,a,f,r){var e,n=o.lookupProperty||function(u,s){if(Object.prototype.hasOwnProperty.call(u,s))return u[s]};return' '+o.escapeExpression((e=(e=n(a,"label")||(l!=null?n(l,"label"):l))!=null?e:o.hooks.helperMissing,typeof e=="function"?e.call(l??(o.nullContext||{}),{name:"label",hash:{},data:r,loc:{start:{line:22,column:32},end:{line:22,column:41}}}):e))+` +`},8:function(o,l,a,f,r){var e,n,u=o.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return`
+ `+((e=(n=(n=u(a,"description")||(l!=null?u(l,"description"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(l??(o.nullContext||{}),{name:"description",hash:{},data:r,loc:{start:{line:28,column:12},end:{line:28,column:29}}}):n))!=null?e:"")+` +
`},compiler:[8,">= 4.3.0"],main:function(o,l,a,f,r){var e,n,u=l??(o.nullContext||{}),s=o.lookupProperty||function(i,c){if(Object.prototype.hasOwnProperty.call(i,c))return i[c]};return`
- Autocompletion results for - "`+o.escapeExpression((n=(n=s(a,"term")||(l!=null?s(l,"term"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(u,{name:"term",hash:{},data:r,loc:{start:{line:5,column:27},end:{line:5,column:35}}}):n))+`" . - - Press - RETURN - for full-text search. + + Autocompletion results for "`+o.escapeExpression((n=(n=s(a,"term")||(l!=null?s(l,"term"):l))!=null?n:o.hooks.helperMissing,typeof n=="function"?n.call(u,{name:"term",hash:{},data:r,loc:{start:{line:5,column:53},end:{line:5,column:61}}}):n))+`" + + + Press RETURN for full-text search
-`+((e=s(a,"each").call(u,l!=null?s(l,"suggestions"):l,{name:"each",hash:{},fn:o.program(1,r,0),inverse:o.noop,data:r,loc:{start:{line:12,column:2},end:{line:32,column:11}}}))!=null?e:"")+`
+
+`+((e=s(a,"each").call(u,l!=null?s(l,"suggestions"):l,{name:"each",hash:{},fn:o.program(1,r,0),inverse:o.noop,data:r,loc:{start:{line:12,column:4},end:{line:32,column:13}}}))!=null?e:"")+`
+
`},useData:!0}),y["modal-layout"]=d({compiler:[8,">= 4.3.0"],main:function(o,l,a,f,r){return`