diff --git a/external_libraries.py b/external_libraries.py index a5809f377..0ace4a47f 100644 --- a/external_libraries.py +++ b/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 = [ diff --git a/static/css/directives/ui/search-box.css b/static/css/directives/ui/search-box.css index 16bd41efa..c1c13376e 100644 --- a/static/css/directives/ui/search-box.css +++ b/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; diff --git a/static/css/pages/search.css b/static/css/pages/search.css index c7a5db91a..6bb8f77bf 100644 --- a/static/css/pages/search.css +++ b/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; + } +} diff --git a/static/partials/search.html b/static/partials/search.html index df484a81f..d1f35905e 100644 --- a/static/partials/search.html +++ b/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"