v0.4.5

- Add a Cool Search Option

Author: Arjun

db.sqlite3

@@ -36,3 +36,4 @@ <h1><a href="/">Simple QA </a><small>Add Question</small></h1>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/add.html

@@ -40,3 +40,4 @@ <h4>Answering Question : {{ question.question_text }}</h4>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/answer.html

@@ -34,3 +34,4 @@ <h1><a href="/">Simple QA </a><small>Add Question</small></h1>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/comment.html

@@ -96,3 +96,4 @@ <h3 class="panel-title">Answers</h3>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/detail.html

@@ -1,6 +1,9 @@
 {% load bootstrap3 %}
 
 {% bootstrap_css %}
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+
 {% bootstrap_javascript %}
 
 <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
@@ -14,11 +17,96 @@
   background-color:#E0E0E0;
   color:#500000;
 }
+
+
+#search {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+
+  -webkit-transform: translate(0px, -100%) scale(0, 0);
+  -moz-transform: translate(0px, -100%) scale(0, 0);
+  -o-transform: translate(0px, -100%) scale(0, 0);
+  -ms-transform: translate(0px, -100%) scale(0, 0);
+  transform: translate(0px, -100%) scale(0, 0);
+
+  opacity: 0;
+}
+
+#search.open {
+  -webkit-transform: translate(0px, 0px) scale(1, 1);
+  -moz-transform: translate(0px, 0px) scale(1, 1);
+  -o-transform: translate(0px, 0px) scale(1, 1);
+  -ms-transform: translate(0px, 0px) scale(1, 1);
+  transform: translate(0px, 0px) scale(1, 1);
+  opacity: 1;
+}
+
+#search input[type="search"] {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  color: rgb(255, 255, 255);
+  background: rgba(0, 0, 0, 0);
+  font-size: 60px;
+  font-weight: 300;
+  text-align: center;
+  border: 0px;
+  margin: 0px auto;
+  margin-top: -51px;
+  padding-left: 30px;
+  padding-right: 30px;
+  outline: none;
+}
+#search .btn {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: 61px;
+  margin-left: -45px;
+}
+#search .close {
+  position: fixed;
+  top: 15px;
+  right: 15px;
+  color: #fff;
+  background-color: #428bca;
+  border-color: #357ebd;
+  opacity: 1;
+  padding: 10px 17px;
+  font-size: 27px;
+}
+
 </style>
+<script>
+$(function () {
+  $('a[href="#search"]').on('click', function(event) {
+    event.preventDefault();
+    $('#search').addClass('open');
+    $('#search > form > input[type="search"]').focus();
+  });
+
+  $('#search, #search button.close').on('click keyup', function(event) {
+    if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
+      $(this).removeClass('open');
+    }
+  });
+
+});
+</script>
 
 <div class="container">
 <div class="page-header">
-  <a class="btn btn-lg btn-danger pull-right" href="/add/">Ask Question</a><h1><a href="/">Simple QA </a><small>Open Questions</small></h1>
+  <a class="btn btn-lg btn-warning pull-right" href="#search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Find</a><a class="btn btn-lg btn-danger pull-right" href="/add/">Ask Question</a><h1><a href="/">Simple QA </a><small>Open Questions</small></h1>
 </div>
 
 {% if questions %}
@@ -62,3 +150,13 @@
   <small><a href="/login">Login</a></small>
   {% endif %}
  | <a href="/admin">Admin Panel</a></small></center>
+ <br/><br/>
+
+ <div id="search">
+   <button type="button" class="close">×</button>
+   <form method="post" action="/search/">
+     {% csrf_token %}
+     <input type="search" value="" name="word" placeholder="type keyword(s) here" />
+     <input class="btn btn-lg btn-warning" type="submit" value="Find" />
+   </form>
+ </div>

qa/templates/qa/index.html

@@ -50,3 +50,4 @@ <h3 class="panel-title">New User?</h3>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/login.html

@@ -26,3 +26,4 @@ <h2 class="pull-right">Points: {{ user.points }}</h1>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/profile.html

@@ -39,3 +39,4 @@ <h1><a href="/">Simple QA </a><small>New User Registration</small></h1>
   <small><a href="/login">Login</a></small>
   {% endif %}
   | <a href="/admin">Admin Panel</a></small></center>
+  <br/><br/>

qa/templates/qa/register.html

@@ -8,6 +8,26 @@
 from qa.models import *
 import datetime
 
+def search(request):
+    if request.method == 'POST':
+        word = request.POST['word']
+        latest_question_list = Question.objects.filter(question_text__contains=word)
+        paginator = Paginator(latest_question_list, 10)
+        page = request.GET.get('page')
+        try:
+            questions = paginator.page(page)
+        except PageNotAnInteger:
+        # If page is not an integer, deliver first page.
+            questions = paginator.page(1)
+        except EmptyPage:
+        # If page is out of range (e.g. 9999), deliver last page of results.
+            questions = paginator.page(paginator.num_pages)
+        template = loader.get_template('qa/index.html')
+        context = RequestContext(request, {
+        'questions': questions,
+        })
+    return HttpResponse(template.render(context))
+
 def index(request):
     latest_question_list = Question.objects.order_by('-pub_date')
     paginator = Paginator(latest_question_list, 10)