From 2dbeb37d3b4ff113a2bfb881b5d1df6787bc8157 Mon Sep 17 00:00:00 2001 From: Jayaram Pai Date: Tue, 17 Dec 2013 12:02:11 +0530 Subject: basic keyword/time search implemented --- static/website/css/main.css | 35 ++++++++- static/website/images/bg-stripes.png | Bin 0 -> 119 bytes static/website/js/search.js | 91 ++++++++++++++++++++++ static/website/templates/ajax-keyword-search.html | 55 +++++++++++++ static/website/templates/ajax-time-search.html | 55 +++++++++++++ static/website/templates/base.html | 11 ++- static/website/templates/search.html | 73 +++++++++++++++++ website/urls.py | 5 +- website/views.py | 56 +++++++++++++ 9 files changed, 377 insertions(+), 4 deletions(-) create mode 100644 static/website/images/bg-stripes.png create mode 100644 static/website/js/search.js create mode 100644 static/website/templates/ajax-keyword-search.html create mode 100644 static/website/templates/ajax-time-search.html create mode 100644 static/website/templates/search.html diff --git a/static/website/css/main.css b/static/website/css/main.css index a5f8c81..543de18 100644 --- a/static/website/css/main.css +++ b/static/website/css/main.css @@ -2,18 +2,36 @@ .navbar>.container .navbar-brand { margin-left: 0; } +.navbar-default { + margin-bottom: 0; +} /* main styles */ +body { + background: #fafafa; + box-shadow: 4px 0 10px #cccccc, -4px 0 10px #cccccc; +} +#page-wrapper { + max-width: 970px; + margin:0 auto; + box-shadow: 0px 0px 15px #cccccc; +} .container { max-width: 970px; } #header-wrapper { - + max-width: 970px; + margin:0 auto; + background: #ffffff; } #header-inner { } #content-wrapper { - padding: 0 0 25px 0; + position: relative; + max-width: 970px; + margin:0 auto; + padding: 15px 0 25px 0; + background: #ffffff; } #content-inner { min-height: 600px; @@ -113,6 +131,8 @@ background: #f5f5f5; } #footer-wrapper { + max-width: 970px; + margin:0 auto; background-color: #2d2d2d; min-height: 60px; } @@ -148,3 +168,14 @@ right: 5px; bottom: 5px; } +#search-bar { + display: none; + min-height: 50px; + padding-top: 15px; + padding-bottom: 15px; + background: #ffffff; + border-bottom: 2px solid #f5f5f5; + width: 970px; + margin: 0 auto; +} + diff --git a/static/website/images/bg-stripes.png b/static/website/images/bg-stripes.png new file mode 100644 index 0000000..4390d95 Binary files /dev/null and b/static/website/images/bg-stripes.png differ diff --git a/static/website/js/search.js b/static/website/js/search.js new file mode 100644 index 0000000..5973e79 --- /dev/null +++ b/static/website/js/search.js @@ -0,0 +1,91 @@ +$(document).ready(function() { + $search_key = $("#search-key"); + $search_key_submit = $("#search-key-submit"); + $keyword_search_results = $("#keyword-search-results"); + + $search_key.keyup(function(e) { + if(e.keyCode == 13) { + $search_key_submit.click(); + } + }); + + $search_key_submit.click(function() { + var key = $search_key.val(); + $.ajax({ + url: "/ajax-keyword-search/", + type: "POST", + data: { + key: key + }, + dataType: "html", + success: function(data) { + $keyword_search_results.html(data); + console.log(data); + } + }); + }); + + $search_time_submit = $("#search-time-submit"); + $category = $("#search-category"); + $tutorial = $("#search-tutorial"); + $minute_range = $("#search-minute-range"); + $second_range = $("#search-second-range"); + $time_search_results = $("#time-search-results"); + + $category.change(function() { + var category = $(this).val(); + $.ajax({ + url: "/ajax-tutorials/", + type: "POST", + data: { + category: category + }, + success: function(data) { + $tutorial.html(data); + $tutorial.removeAttr("disabled"); + console.log("response = " + data); + } + }); + }); + + $tutorial.change(function() { + console.log("tut changed"); + var category = $category.val(); + var tutorial = $(this).val(); + $.ajax({ + url: "/ajax-duration/", + type: "POST", + data: { + category: category, + tutorial: tutorial + }, + success: function(data){ + var $response = $(data); + console.log($response.html()); + $minute_range.html($response.find("#minutes").html()) + $minute_range.removeAttr("disabled"); + $second_range.html($response.find("#seconds").html()) + $second_range.removeAttr("disabled"); + } + }); + }); + + $search_time_submit.click(function() { + $.ajax({ + url: "/ajax-time-search/", + type: "POST", + data: { + category: $category.val(), + tutorial: $tutorial.val(), + minute_range: $minute_range.val(), + second_range: $second_range.val() + }, + dataType: "html", + success: function(data) { + console.log(data); + $time_search_results.html(data); + } + }); + }); + +}); diff --git a/static/website/templates/ajax-keyword-search.html b/static/website/templates/ajax-keyword-search.html new file mode 100644 index 0000000..7d38a42 --- /dev/null +++ b/static/website/templates/ajax-keyword-search.html @@ -0,0 +1,55 @@ +{% if questions %} + {% for question in questions %} +