From 322ca4dac0308023562a388bd5f8c3c840ef49c3 Mon Sep 17 00:00:00 2001 From: SansPseudoFix Date: Sat, 22 Nov 2014 17:17:59 +0100 Subject: [PATCH] display handle for search bar fix margin and color hidden overflow for long handle and names modified: app/assets/javascripts/widgets/search.js modified: app/assets/stylesheets/autocomplete.css.scss add min width 300px modified: app/assets/javascripts/widgets/search.js modified: app/assets/stylesheets/autocomplete.css.scss --- app/assets/javascripts/widgets/search.js | 5 +++-- app/assets/stylesheets/autocomplete.css.scss | 20 +++++++++++++++++++- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/widgets/search.js b/app/assets/javascripts/widgets/search.js index c114a8818..42d4fe218 100644 --- a/app/assets/javascripts/widgets/search.js +++ b/app/assets/javascripts/widgets/search.js @@ -10,6 +10,7 @@ searchFormAction: searchForm.attr("action"), searchInput: searchForm.find("input[type='search']"), searchInputName: searchForm.find("input[type='search']").attr("name"), + searchInputHandle: searchForm.find("input[type='search']").attr("handle"), options: { cacheLength : 15, delay : 800, @@ -34,9 +35,9 @@ return Diaspora.I18n.t("search_for", row); } else { if (row.avatar) { - return "" + row.name; + return "" + row.name + "
" + row.handle + "
"; } else { - return row.name; + return row.name + "
" + row.handle + "
"; } } }; diff --git a/app/assets/stylesheets/autocomplete.css.scss b/app/assets/stylesheets/autocomplete.css.scss index bed1a77b4..6523cdf98 100644 --- a/app/assets/stylesheets/autocomplete.css.scss +++ b/app/assets/stylesheets/autocomplete.css.scss @@ -3,7 +3,7 @@ background-color: transparent; overflow: hidden; z-index: 99999; - min-width: 247px !important; + min-width: 300px !important; width: 100%; -webkit-border-radius: 3px; @@ -42,6 +42,8 @@ // in relative units scroll will be broken in firefox //:line-height 16px overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .ac_loading { @@ -71,4 +73,20 @@ left: 5px; top: 5px; } + + .search_handle { + font-size: 0.8em; + color: #999; + margin-top: -3px; + } + + .ac_over .search_handle{ + color: #fff; + } + + .ac_over .search_handle, .search_handle { + display: block; + overflow: hidden; + text-overflow: ellipsis; + } }