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
This commit is contained in:
SansPseudoFix 2014-11-22 17:17:59 +01:00
parent 914b1c5374
commit 322ca4dac0
2 changed files with 22 additions and 3 deletions

View file

@ -10,6 +10,7 @@
searchFormAction: searchForm.attr("action"), searchFormAction: searchForm.attr("action"),
searchInput: searchForm.find("input[type='search']"), searchInput: searchForm.find("input[type='search']"),
searchInputName: searchForm.find("input[type='search']").attr("name"), searchInputName: searchForm.find("input[type='search']").attr("name"),
searchInputHandle: searchForm.find("input[type='search']").attr("handle"),
options: { options: {
cacheLength : 15, cacheLength : 15,
delay : 800, delay : 800,
@ -34,9 +35,9 @@
return Diaspora.I18n.t("search_for", row); return Diaspora.I18n.t("search_for", row);
} else { } else {
if (row.avatar) { if (row.avatar) {
return "<img src='"+ row.avatar +"' class='avatar'/>" + row.name; return "<img src='"+ row.avatar +"' class='avatar'/>" + row.name + "<div class='search_handle'>" + row.handle + "</div>";
} else { } else {
return row.name; return row.name + "<div class='search_handle'>" + row.handle + "</div>";
} }
} }
}; };

View file

@ -3,7 +3,7 @@
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
z-index: 99999; z-index: 99999;
min-width: 247px !important; min-width: 300px !important;
width: 100%; width: 100%;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -42,6 +42,8 @@
// in relative units scroll will be broken in firefox // in relative units scroll will be broken in firefox
//:line-height 16px //:line-height 16px
overflow: hidden; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
.ac_loading { .ac_loading {
@ -71,4 +73,20 @@
left: 5px; left: 5px;
top: 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;
}
} }