Typeahead Tweaks (#65)

* Only save unique names to storage

* Preserve styling when typeaheadjs fails to load

layouts/partials/footer.ejs

@@ -78,8 +78,8 @@
       if (xhr.status !== 200) return; // if ajax fails, continue with old listing
 
       var lastFetched = new Date().getTime()
-      var uniqueNames = new $.unique(data.filenames)
-      var data = {lastFetched: lastFetched, filenames: uniqueNames}
+      var uniqueNames = new Set(data.filenames)
+      var data = {lastFetched: lastFetched, filenames: Array.from(uniqueNames)}
       localStorage.setItem('filenames', JSON.stringify(data))
     })
   }

layouts/partials/search.ejs

@@ -3,7 +3,7 @@
     <% const placeholder = template('search.placeholder')%>
     <% const focus = locals.focus || '' %>
     <% const msgOnFocus = placeholder || '' %>
-    <input <%= focus %> id="search-box" type="text" name="q" value="<%= locals.q %>" placeholder="<%- placeholder %>" />
+    <input <%= focus %> id="search-box" class="twitter-typeahead" type="text" name="q" value="<%= locals.q %>" placeholder="<%- placeholder %>" />
     <button class="icon"><i class="fa fa-search"></i></button>
   </form>
 

styles/partials/core/_base.scss

@@ -28,6 +28,10 @@ a {
 
 }
 
+input {
+  box-sizing: border-box;
+}
+
 // Tables
 table {
   border-collapse: collapse;

styles/partials/core/_furniture.scss

@@ -155,10 +155,14 @@
   }
 
   .twitter-typeahead {
-    position: absolute;
+    font-style: normal;
+    font-family: $font-sans;
+    font-size: 16px;
+    line-height: 30px;
+    font-weight: 400;
+    position: relative;
+    width: calc(100% - 65px);
     height: 50px;
-    border-radius: 0;
-    background-color: transparent;
     transition: background-color 0.3s;
     display: inline-block;
     border: 1px solid $gray-40;
@@ -174,34 +178,35 @@
     -ms-transition: background .55s ease;
     -o-transition: background .55s ease;
     transition: background .55s ease;
+    padding-left: 15px;
+    -webkit-font-smoothing: antialiased;
+
     &:hover,
     &:focus,
     &:active {
       outline: none;
       background:  $accent-lightest;
     }
-  }
 
-  .tt-hint {
-    color: $gray-35;
-    background-color: transparent !important;
-  }
 
-  #search-box, .tt-hint {
-    outline: none;
-    font-size: 16px;
-    line-height: 30px;
-    font-weight: 400;
-    font-style: normal;
-    font-family: $font-sans;
-    border: none;
-    padding-left: 15px;
-    width: calc(100% - 65px);
-    height: 100%;
-    -webkit-appearance: none;
-    -webkit-font-smoothing: antialiased;
+    .tt-hint {
+      color: $gray-30;
+      background-color: transparent !important;
+      outline: none;
+      border: none;
+      -webkit-appearance: none;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    // to account for case where typeahead fails to load
+    .twitter-typeahead.tt-input {
+      box-shadow: none;
+      border: none;
+      padding-left: 0;
+    }
   }
 
+
   .icon{
     position: relative;
     z-index: 10;