provide more useful error messages when empty search results

This commit is contained in:
Brad Rydzewski 2015-10-13 12:55:50 -07:00
parent a4dd4e8db8
commit 146d884f11
3 changed files with 61 additions and 2 deletions

View file

@ -1,4 +1,4 @@
var repoExpr = /.+\/.+/;
var remoteRepos = new Bloodhound({
queryTokenizer: Bloodhound.tokenizers.whitespace,
@ -27,6 +27,36 @@ $('.typeahead').typeahead({
display: "full_name",
source: reposWithDefaults,
templates: {
empty: function(obj) {
if (obj.query.match(repoExpr) !== null) {
return [
"<div>",
"<div class='not-indexed-message'>",
"<p>",
"No matches found for",
"<em>",
obj.query,
"</em>",
"</p>",
"<p>",
"This repository may not be indexed yet.",
"<a href='/"+obj.query+"'>",
"Click here",
"</a>",
"to visit this repository page directly.",
"</p>",
"</div>",
"</div>"
].join("\n");
}
return [
"<div>",
"<div class='no-matches-message'>",
"No matches found",
"</div>",
"</div>"
].join("\n");
},
suggestion: function(obj) {
return "<div><div><img src='"+obj.avatar_url+"' width='32px' height='32px' /></div><div>"+ obj.full_name +"</div></div>";
}

View file

@ -34,4 +34,23 @@
margin-left:1rem;
div:last-child
flex: 1 1 auto;
line-height:32px;
line-height:32px;
.no-matches-message
padding: 20px;
color: rgba(0,0,0,0.5);
font-style: italic;
.not-indexed-message
padding: 20px;
padding-bottom:0px;
color: rgba(0,0,0,0.5);
font-style: italic;
em
color: #2b303b;
p:last-child
margin-top:20px;
font-size: 15px;
color: rgba(0, 0, 0, 0.4);
a
color: rgba(0, 0, 0, 0.8);

View file

@ -431,6 +431,16 @@ body.login div.alert { position: fixed; top: 0px; left: 0px; right: 0px; line-he
.tt-selectable div:last-child { flex: 1 1 auto; line-height: 32px; }
.no-matches-message { padding: 20px; color: rgba(0, 0, 0, 0.5); font-style: italic; }
.not-indexed-message { padding: 20px; padding-bottom: 0px; color: rgba(0, 0, 0, 0.5); font-style: italic; }
.not-indexed-message em { color: #2b303b; }
.not-indexed-message p:last-child { margin-top: 20px; font-size: 15px; color: rgba(0, 0, 0, 0.4); }
.not-indexed-message p:last-child a { color: rgba(0, 0, 0, 0.8); }
.hidden { display: none; }
:focus { outline: none; }