gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update the search UI

Browse Source
This commit is contained in:
Michael Q Larson
2015-03-05 17:30:05 -08:00
parent 6fc72de232
commit 9df29350ed
3 changed files with 51 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/main.less
View File

@@ -387,6 +387,11 @@ ul {
font-size: 30px;
}
.big-text-field {
font-size: 30px;
height: 57px;
}
.table {
margin-left: -16px;
}

2
views/stories/index.jade
View File

@@ -1,8 +1,10 @@
extends ../layout
block content
script(src='/js/lib/moment/moment.js')
script.
var challengeName = 'Camper News';
var user = !{JSON.stringify(user)};
var page = !{JSON.stringify(page)};
.panel.panel-info
.panel-heading.text-center Camper News
.panel-body

72
views/stories/search-stories.jade
View File

@@ -1,10 +1,27 @@
input#searchArea(type=text)
button#searchbutton
.col-xs-12
.spacer
.input-group
input#searchArea.big-text-field.form-control(type='text', placeholder='Search for...', autofocus)
span.input-group-btn
button#searchbutton.btn.btn-big.btn-primary(type='button') Search
.spacer
#story-list
ul#stories
script.
$('#searchArea').keypress(function(event) {
if (event.keyCode === 13 || event.which === 13) {
executeSearch();
$('#searchArea').focus();
event.preventDefault();
}
});
$('#searchbutton').on('click', function() {
executeSearch();
});
function executeSearch() {
$('#stories').empty();
console.log('clicked or enter button');
var searchTerm = $('#searchArea').val();
var getLinkedName = function getLinkedName(name) {
return name.toLowerCase().replace(/\s/g, '-');
@@ -17,10 +34,8 @@ script.
})
.fail(function (xhr, textStatus, errorThrown) {
console.log('failure');
//$('#comment-button').bind('click', commentSubmitButtonHandler);
})
.done(function (data, textStatus, xhr) {
console.log(data);
for (var i = 0; i < data.length; i++) {
var li = document.createElement('li');
var linkedName = getLinkedName(data[i].storyLink);
@@ -28,31 +43,32 @@ script.
$(li).html(
"<div class='row text-left'>" +
"<div class='col-xs-3 col-sm-1'>" +
"<div class='story-up-votes'>" +
"<span>" + rank + "</span>" +
"<div class='col-xs-3 col-sm-1'>" +
"<div class='story-up-votes'>" +
"<span>" + rank + "</span>" +
"</div>" +
"</div>" +
"<div class='col-xs-2 col-sm-1'>" +
"<img src='" + data[i].author.picture + "' class='img-responsive'/>" +
"</div>" +
"<div class='col-xs-7 col-sm-10'>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
"<a href='/stories/" + linkedName + "'>"
+ data[i].storyLink +
"</a>" +
"</div>" +
"<div class='col-xs-12'>" +
"<span>Posted " +
moment(data[i].timePosted).fromNow() +
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"<div class='col-xs-2 col-sm-1'>" +
"<img src='" + data[i].author.picture + "' class='img-responsive'/>" +
"</div>" +
"<div class='col-xs-7 col-sm-10'>" +
"<div class='row'>" +
"<div class='col-xs-12'>" +
"<a href='/stories/" + linkedName + "'>"
+ data[i].storyLink +
"</a>" +
"</div>" +
"<div class='col-xs-12'>" +
"<span>Posted " +
moment(data[i].timePosted).fromNow() +
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</li>");
"</li>");
$(li).appendTo($('#stories'));
}
});
});
}