Improve geocoder autocomplete results UI

pixelhumain · Aug 16, 2020 · 7b96317 · 7b96317
1 parent badc0cf
commit 7b96317
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/components/search-bar/search-bar.component.ts b/src/js/components/search-bar/search-bar.component.ts
@@ -146,6 +146,7 @@ export class SearchBarComponent {
             value.getRegion() ||
             value.getCountry()
           }</span>`,
+          icon: 'gogo-icon-marker-symbol'
         })),
       ];
     }

diff --git a/src/scss/components/search-bar/_search-bar.scss b/src/scss/components/search-bar/_search-bar.scss
@@ -172,7 +172,7 @@
         &:before { content: '"'; }
       }
     }
-    + .search_elements, &.search_geocoded + .option {
+    + .search_elements, &.search_geocoded + .option, &.geocoded + .option {
       border-top: 1px solid #eee;
       padding-top: .3rem;
       margin-top: .3rem;
@@ -187,6 +187,20 @@
     }
     &.search_elements {
       padding-top: .6rem;
+      .icon {
+        line-height: 1rem;
+        opacity: .9;
+        font-size: 1rem;
+      }
+    }
+    &.geocoded {
+      .label {
+        font-size: .9rem;
+      }
+      .icon {
+        line-height: .9rem;
+        opacity: .9;
+      }
     }
   }
 }

diff --git a/web/dev-local.html b/web/dev-local.html
@@ -35,7 +35,17 @@
             taxonomy: taxonomy,
             elements: elements
           },
-          theme: "flat"
+          search: {
+            geocodingProvider: "mapbox",
+            meta: {
+              apiKey: "pk.eyJ1IjoiZ29nb2NhcnRvIiwiYSI6ImNqYnhxeHUxZzJ3cG4zMnIyNmZiajF6dmwifQ.2G5IM4roIgpU_fvPBOpssw"
+            }
+          },
+          theme: "flat",
+          fonts: {
+            mainFont: 'Nunito'
+          },
+          language: "fr"
         });
       });
     </script>