benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Simplify search on articles pages

Browse source
This commit is contained in:
Wesley Moore 2010-06-30 17:56:37 +10:00
parent d4c0954c01
commit 75ba506b2f
6 changed files with 16 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
content/screen.sass
View file

@ -279,7 +279,7 @@ a
margin: 1em 2em 1em 0 margin: 1em 2em 1em 0
ul.menu body.articles #content nav
padding-bottom: 1em padding-bottom: 1em
@ -289,8 +289,6 @@ ul.menu
display: none display: none
float: left float: left
margin-right: 20px margin-right: 20px
background: #fff url(/images/srch_l.gif) 0 0 no-repeat
padding-left: 19px
fieldset fieldset
margin: 0 margin: 0
@ -298,32 +296,11 @@ ul.menu
border: 0 border: 0
label label
color: #999 font-weight: normal
display: none padding-right: 10px
input input
border: 0
margin: 0
outline: 0
vertical-align: middle
height: 19px
width: 180px width: 180px
width: 132px
padding: 3px
background: #fff url(/images/srch_bg.gif) 0 0 repeat-x
float: left
font: 11px/13px "Lucida Grande", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif
color: #000
span.clear
background: #fff url(/images/srch_r.gif) 0 0 no-repeat
float: left
width: 19px
height: 19px
clear: none
.active
background-position: 0 -19px
#respond #respond

48
layouts/articles.html
View file

@ -2,37 +2,22 @@
<html> <html>
<head> <head>
<%= render '_head' %> <%= render '_head' %>
<script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.ba-bbq.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.quicksand.min.js" type="text/javascript" charset="utf-8"></script> <script src="/js/jquery.quicksand.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/mojo.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/liquidmetal.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/application.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
jQuery(function() { jQuery(function() {
WezM.showJavascriptWidgets(); function search_handler(e) {
$('#search input').keypress(function(e) {
var input = $(this); var input = $(this);
var q = (input.val() + String.fromCharCode(e.which)).toLowerCase(); var value = input.val();
// var q = (value + String.fromCharCode(e.which)).toLowerCase();
var q = value.toLowerCase();
var filtered_articles = $('#articles li').filter(function(i) { $('#articles li').filter(function(i) {
var article = $(this); var article = $(this);
var text = article.text().toLowerCase(); return article.text().toLowerCase().indexOf(q) < 0;
// var score = LiquidMetal.score(text, q); }).animate({height: 0, opacity: 0}, {queue: false, duration: 500});
// article.attr("data-score", score); }
// return score > 0; $('#search').show();
return text.indexOf(q) >= 0; $('#search input').keypress(search_handler).change(search_handler).focus();
})
// Sort results
// var sorted_articles = filtered_articles.get().sort(function(a, b) {
// var valA = parseFloat($(a).attr("data-score"));
// var valB = parseFloat($(b).attr("data-score"));
// return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
// });
$("#articles").quicksand($(filtered_articles));
});
}); });
</script> </script>
</head> </head>
@ -48,7 +33,7 @@
['Personal', personal_articles.size], ['Personal', personal_articles.size],
] ]
%> %>
<ul class="inline menu"> <nav class="inline menu">
<% menu.each do |menu_item| <% menu.each do |menu_item|
label, count = menu_item label, count = menu_item
path = (label != "All" ? '/' + label.downcase : '') + "/articles/" path = (label != "All" ? '/' + label.downcase : '') + "/articles/"
@ -64,22 +49,15 @@
<li id="search"> <li id="search">
<fieldset> <fieldset>
<label for="query">Search</label> <label for="query">Search</label>
<input type="text" name="q" id="query" value="" /> <input type="search" name="q" id="query" value="" />
<span class="clear"></span>
</fieldset> </fieldset>
</li> </li>
</ul> </nav>
<ul id="articles" class="articles"> <ul id="articles" class="articles">
<%= yield %> <%= yield %>
</ul> </ul>
<div class="pagination">
<% pagepath = @item.identifier; pagepath += 'page/' if pagepath !~ %r{/page/$} %>
<a href="<%= pagepath %>" class="newer">&laquo; Newer</a>
|
<a href="<%= pagepath %>#2" class="older">Older &raquo;</a>
</div>
</div> </div>
<%= render '_footer' %> <%= render '_footer' %>
</body> </body>

BIN
output/images/srch_bg.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 65 B

BIN
output/images/srch_l.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 303 B

BIN
output/images/srch_r.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 357 B

17
output/js/application.js
View file

@ -12,23 +12,6 @@ var WezM = {
if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { // TODO: This is too generic (iPhone) if(navigator.userAgent.toLowerCase().indexOf('webkit') >= 0) { // TODO: This is too generic (iPhone)
$('#search input').css('paddingTop', 0); $('#search input').css('paddingTop', 0);
} }
// The following should be triggered onchange for the input as well
// (to handle things like Cut with the mouse)
// $('#search input').keyup(function(e) {
// var input = $(this);
// var clear_search = $('#search .clear');
// var value = input.attr('value');
// if(value && (value != '')) {
// clear_search.addClass('active');
// }
// else {
// clear_search.removeClass('active');
// }
// });
$('#search .clear.active').live('click', function() {
$('#search input').attr('value', '').keyup(); // Simulate keypress to clear results
});
}, },
_searchItemSelected: function(article) { _searchItemSelected: function(article) {
document.location.href = article.path; document.location.href = article.path;