[refactor] improve auto suggest list structure

Author: zombieFox

src/css/auto-suggest.css

@@ -4,7 +4,7 @@
 font-size:1em;
 }
 
-.auto-suggest-list{
+.auto-suggest{
 background-color:rgb(var(--theme-gray-02));
 margin-top:0.5em;
 padding:1em;
@@ -15,67 +15,57 @@
 max-height:40vh;
 border-radius:var(--theme-radius);
 overflow-y: auto;
-z-index:var(--z-index-auto-suggest-list);
-display: flex;
-flex-direction: row;
-flex-wrap: wrap;
+z-index:var(--z-index-auto-suggest);
 box-shadow:var(--layout-shadow-large);
 }
 
-.auto-suggest-list-item{
-flex-basis:33.3333333333%;
-}
-
-.auto-suggest-list-item:not(:last-child){
-margin-bottom:0;
+.auto-suggest-list{
+display: grid;
+grid-template-columns:repeat(3,1fr);
 }
 
-.auto-suggest-link{
+.auto-suggest-item{
+background-color: transparent;
 padding:0.5em;
+margin:0;
 border:0;
 border-radius:var(--theme-radius);
 width:100%;
 height:100%;
+min-height:6em;
 display: flex;
+position: relative;
+white-space: inherit;
 flex-direction: column;
-justify-content:flex-start;
+justify-content:center;
 align-items: center;
 transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
-.auto-suggest-link:link,
-.auto-suggest-link:visited{
-color:rgb(var(--theme-gray-16));
-text-decoration: none;
+.auto-suggest-item:after{
+content: none;
 }
 
-.auto-suggest-link:hover{
-background-color:rgb(var(--theme-gray-03));
-color:rgb(var(--form-input-text-hover));
-outline: none;
-text-decoration: none;
-box-shadow:var(--form-ring-hover);
+.auto-suggest-item:link,
+.auto-suggest-item:visited{
+background-color: transparent;
 }
 
-.auto-suggest-link:focus{
-background-color:rgb(var(--theme-gray-01));
-color:rgb(var(--form-input-text-focus-active));
-outline: none;
-text-decoration: none;
-box-shadow:var(--form-ring-accent);
+.auto-suggest-item:hover{
+box-shadow:var(--form-ring-hover);
 }
 
-.auto-suggest-link:active{
-color:rgb(var(--theme-style-text));
+.auto-suggest-item:focus{
+box-shadow:var(--form-ring-accent);
 }
 
 .auto-suggest-icon{
 font-size:2em;
 }
 
 .auto-suggest-icon-text{
-color:rgb(var(--theme-gray-08));
-margin-top:0.5em;
+margin-top:1em;
 font-size:0.6em;
 text-align: center;
+line-height:1.6;
 }

src/css/variables.css

@@ -191,7 +191,7 @@
 --z-index-shade:5000;
 --z-index-modal:6000;
 --z-index-menu:7000;
---z-index-auto-suggest-list:8000;
+--z-index-auto-suggest:8000;
 --z-index-dropdown:9000;
 --z-index-edge:10000;
 /* breakpoint */

src/js/auto-suggest.js

@@ -177,59 +177,62 @@ var autoSuggest = (function(){
 fontawesomeIcon: function(){
 suggestItems.forEach(function(arrayItem){
 varli=helper.node("li|class:auto-suggest-list-item");
-varanchor=helper.node("a|href:#,tabindex:1,class:auto-suggest-link");
+varbutton=helper.node("button|tabindex:1,class:auto-suggest-item");
 varicon=helper.node("span|class:auto-suggest-icon fa-"+arrayItem.name);
 if(arrayItem.styles.includes("solid")){
 helper.addClass(icon,"fas");
 }elseif(arrayItem.styles.includes("brands")){
 helper.addClass(icon,"fab");
 };
-anchor.addEventListener("click",function(){
+button.addEventListener("click",function(){
 link.render.autoSuggestIconAction(arrayItem);
 },false);
 vartext=helper.node("span:"+arrayItem.label+"|class:auto-suggest-icon-text");
-anchor.appendChild(icon);
-anchor.appendChild(text);
-li.appendChild(anchor);
+button.appendChild(icon);
+button.appendChild(text);
+li.appendChild(button);
 list.appendChild(li);
 });
 }
 };
 action[_currentInputOptions.type]();
 };
-var_renderAutoSuggestList=function(){
-varautoSuggestWrapper=helper.e(".auto-suggest-wrapper");
+var_renderAutoSuggest=function(){
+varautoSuggestInput=helper.e(".auto-suggest-input");
+varautoSuggest=helper.e(".auto-suggest");
 varautoSuggestList=helper.e(".auto-suggest-list");
-if(autoSuggestList){
+if(autoSuggest){
 while(autoSuggestList.lastChild){
 autoSuggestList.removeChild(autoSuggestList.lastChild);
 };
 }else{
-varstyle={
-left: autoSuggestWrapper.getBoundingClientRect().left,
-top: autoSuggestWrapper.getBoundingClientRect().bottom+window.scrollY,
-width: autoSuggestWrapper.getBoundingClientRect().width
+varbox={
+left: autoSuggestInput.getBoundingClientRect().left,
+top: autoSuggestInput.getBoundingClientRect().bottom+window.scrollY,
+width: autoSuggestInput.getBoundingClientRect().width
 };
+varautoSuggest=helper.node("div|class:auto-suggest list-unstyled");
 varautoSuggestList=helper.node("ul|class:auto-suggest-list list-unstyled");
-body.appendChild(autoSuggestList);
-autoSuggestList.setAttribute("style","width: "+style.width+"px; top: "+style.top+"px; left: "+style.left+"px;");
+autoSuggest.appendChild(autoSuggestList);
+body.appendChild(autoSuggest);
+autoSuggest.setAttribute("style","width: "+box.width+"px; top: "+box.top+"px; left: "+box.left+"px;");
 documentEvent.add();
 };
 _populateList(autoSuggestList);
 };
 if(suggestItems.length>0){
 _autoSuggestActive=true;
-_renderAutoSuggestList();
+_renderAutoSuggest();
 }else{
 render.close();
 };
 };
 
 render.close=function(){
 mod.close();
-varautoSuggestList=helper.e(".auto-suggest-list");
-if(autoSuggestList){
-autoSuggestList.remove();
+varautoSuggest=helper.e(".auto-suggest");
+if(autoSuggest){
+autoSuggest.remove();
 documentEvent.remove();
 _currentInputOptions={};
 _autoSuggestActive=false;

src/js/link.js

@@ -698,7 +698,7 @@ var link = (function(){
 vardisplayIconLableIcon=helper.node("span|class:label-icon");
 vardisplayIconFormIndent=helper.node("div|class:form-indent");
 vardisplayIconInputWrap=helper.node("div|class:input-wrap");
-vardisplayIconFormGroup=helper.node("div|class:form-group form-group-block mb-0 auto-suggest-wrapper");
+vardisplayIconFormGroup=helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input");
 vardisplayIconInput=helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
 vardisplayIconFormGroupText=helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
 vardisplayIconFormGroupClear=helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");