Merge pull request #2620 from coreos-inc/search-ui-fixes

Search UI fixes

external_libraries.py

@@ -20,7 +20,7 @@ EXTERNAL_JS = [
   'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js',
   'cdnjs.cloudflare.com/ajax/libs/angular-recaptcha/3.2.1/angular-recaptcha.min.js',
   'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js',
-  'cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js',
+  'cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.1.1/typeahead.bundle.min.js',
 ]
 
 EXTERNAL_CSS = [

static/css/directives/ui/search-box.css

@@ -1,10 +1,22 @@
+search-box {
+  display: inline-block;
+  max-width: 100%;
+}
+
 .search-box-element {
     display: inline-block;
     position: relative;
+    text-align: left;
+    max-width: 100%;
+}
+
+.search-box-element .twitter-typeahead {
+  max-width: 100%;
 }
 
 .search-box-element input {
     width: 300px;
+    max-width: 100%;
     display: inline-block;
     border-radius: 0px;
     height: 30px;

static/css/pages/search.css

@@ -84,3 +84,27 @@
 .search .search-results li .search-result-box {
    padding: 6px;
 }
+
+@media screen and (max-width: 767px) {
+  .search {
+    padding: 0px;
+  }
+
+  .search .search-results {
+    padding-left: 12px;
+  }
+
+  .search .result-info-bar .info-span {
+    display: block;
+    float: none !important;
+    text-align: left;
+    margin-bottom: 10px;
+  }
+
+  .search .search-results li .star-icon {
+    color: #ffba6d;
+    font-size: 16px;
+    margin-left: 6px;
+    vertical-align: middle;
+  }
+}

static/partials/search.html

@@ -28,9 +28,8 @@
                   <span class="markdown-view" content="result.description" first-line-only="true"></span>
                 </p>
                 <p class="result-info-bar">
-                  Last Modified:  <span am-time-ago="result.last_modified * 1000"></span>
-
-                  <span class="activity">
+                  <span class="info-span">Last Modified:  <span am-time-ago="result.last_modified * 1000"></span></span>
+                  <span class="info-span activity">
                     activity
                     <span class="strength-indicator" value="::result.popularity"
                           maximum="::maxPopularity"