From 57eedfbebc481aab4040ecda57d23eabf828733f Mon Sep 17 00:00:00 2001
From: Jayaram Pai
Date: Wed, 4 Dec 2013 00:00:26 +0530
Subject: basic filter and ajax-loader

---
 static/website/css/main.css                | 57 ++++++++++----------
 static/website/js/custom.js                |  8 +++
 static/website/templates/base.html         |  3 +-
 static/website/templates/filter.html       | 86 ++++++++++++++++++++++++++++++
 static/website/templates/get-question.html | 74 +++++++++++++++++++++++++
 static/website/templates/index.html        | 30 ++++++++---
 static/website/templates/new-question.html |  6 ++-
 7 files changed, 225 insertions(+), 39 deletions(-)
 create mode 100644 static/website/templates/filter.html
 create mode 100644 static/website/templates/get-question.html

(limited to 'static/website')

diff --git a/static/website/css/main.css b/static/website/css/main.css
index 315845d..cd42d84 100644
--- a/static/website/css/main.css
+++ b/static/website/css/main.css
@@ -16,55 +16,52 @@
     padding: 15px 0 15px 0;
     border-bottom: 1px solid #f5f5f5;
 }
-#content .question .title {
+#content .question .title a{
     padding: 0 0 7px 0;
     font-size: 1.3em;
     color: #424242;
 }
-#content .question .title a {
-    color: #424242;
-}
-#content .question .category {
-    padding: 2px 5px;
+#content .question .category a,
+#content .question .tutorial a,
+#content .question .minute_range a,
+#content .question .second_range a {
+    padding: 3px 5px;
     margin: 0 10px 0 0;
-    background: #a26dc8;
-    color: #ffffff;
     -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
          -o-border-radius: 3px;
             border-radius: 3px;
 }
-#content .question .tutorial {
-    padding: 2px 5px;
-    margin: 0 10px 0 0;
+#content .question .category a {
+    background: #a26dc8;
+    color: #ffffff;
+}
+#content .question .tutorial a {
     background: #424242;
     color: #ffffff;
-    -webkit-border-radius: 3px;
-       -moz-border-radius: 3px;
-         -o-border-radius: 3px;
-            border-radius: 3px;
 }
-#content .question .minute_range {
-    padding: 2px 5px;
-    margin: 0 10px 0 0;
+#content .question .minute_range a {
     background: #f5f5f5;
     color: #424242;
-    -webkit-border-radius: 3px;
-       -moz-border-radius: 3px;
-         -o-border-radius: 3px;
-            border-radius: 3px;
 }
-#content .question .second_range {
-    padding: 2px 5px;
-    margin: 0 10px 0 0;
+#content .question .second_range a {
     background: #f5f5f5;
     color: #424242;
-    -webkit-border-radius: 3px;
-       -moz-border-radius: 3px;
-         -o-border-radius: 3px;
-            border-radius: 3px;
 }
-
+#content .reply {
+    position: relative;
+    border-bottom: 1px solid #f5f5f5;
+    padding: 25px 0;
+}
+#content .reply .body {
+}
+#content .reply .user {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    padding: 2px 7px;
+    background: #f5f5f5;
+}
 #footer-wrapper {
     background-color: #2d2d2d;
     min-height: 60px;
diff --git a/static/website/js/custom.js b/static/website/js/custom.js
index 20801f6..ef0752e 100644
--- a/static/website/js/custom.js
+++ b/static/website/js/custom.js
@@ -41,4 +41,12 @@ $(document).ready(function() {
             }
         });
     });
+
+    $(document).ajaxStart(function() {
+        $("#ajax-loader").show();
+    });
+
+    $(document).ajaxStop(function() {
+        $("#ajax-loader").hide();
+    });
 });
diff --git a/static/website/templates/base.html b/static/website/templates/base.html
index f89417f..8d95162 100644
--- a/static/website/templates/base.html
+++ b/static/website/templates/base.html
@@ -24,7 +24,8 @@
                         <!-- Collect the nav links, forms, and other content for toggling -->
                         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                             <ul class="nav navbar-nav navbar-right">
-                              <li><a href="#">Home</a></li>
+                              <li><a href="{% url 'website:home' %}">Home</a></li>
+                              <li><a href="{% url 'website:new_question' %}">Ask Question</a></li>
                               <li class="dropdown">
                                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                                 <ul class="dropdown-menu">
diff --git a/static/website/templates/filter.html b/static/website/templates/filter.html
new file mode 100644
index 0000000..5d6fbb3
--- /dev/null
+++ b/static/website/templates/filter.html
@@ -0,0 +1,86 @@
+{% extends 'website/templates/base.html' %}
+{% block content %}
+
+{% if question %}
+    <div class="question">
+            <div class="title">
+                <a href="{% url 'website:get_question' question.id %}">{{ question.title }}</a>
+            </div> 
+
+            <span class="category">
+                <small>
+                    <a href="{% url 'website:filter' question.category %}?qid={{ question.id }}">
+                        {{ question.category }}
+                    </a>
+                </small>
+            </span>
+
+            <span class="tutorial">
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial %}?qid={{ question.id }}">
+                        {{ question.tutorial}}
+                    </a>
+                </small>
+            </span>
+
+            <span class="minute_range">
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}?qid={{ question.id }}">
+                        {{ question.minute_range }} min
+                    </a>
+                </small>
+            </span>
+
+            <span class="second_range">
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}?qid={{ question.id }}">
+                        {{ question.second_range }} sec
+                    </a>
+                </small>
+            </span>
+        </div>
+{% endif %}
+
+<h5>You might also want to take a look at:</h5>
+{% if questions %}
+    {% for question in questions %}
+     <div class="question">
+            <div class="title">
+                <a href="{% url 'website:get_question' question.id %}">{{ question.title }}</a>
+            </div> 
+
+            <span class="category">
+                <small>
+                    <a href="{% url 'website:filter' question.category %}?qid={{ question.id }}">
+                        {{ question.category }}
+                    </a>
+                </small>
+            </span>
+
+            <span class="tutorial">
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial %}?qid={{ question.id }}">
+                        {{ question.tutorial}}
+                    </a>
+                </small>
+            </span>
+
+            <span class="minute_range">
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}?qid={{ question.id }}">
+                        {{ question.minute_range }} min
+                    </a>
+                </small>
+            </span>
+
+            <span class="second_range">
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}?qid={{ question.id }}">
+                        {{ question.second_range }} sec
+                    </a>
+                </small>
+            </span>
+        </div>       
+    {% endfor %}
+{% endif %}
+{% endblock %}
diff --git a/static/website/templates/get-question.html b/static/website/templates/get-question.html
new file mode 100644
index 0000000..b05704f
--- /dev/null
+++ b/static/website/templates/get-question.html
@@ -0,0 +1,74 @@
+{% extends 'website/templates/base.html' %}
+{% load widget_tweaks %}
+{% block content %}
+<div class="question">
+    <div class="title">
+       <a href=""> {{ question.title }} </a>
+    </div>
+
+    <div class="body">
+        {{ question.body }}
+    </div>
+    <br>
+    <span class="category">
+    <small>
+            <a href="{% url 'website:filter' question.category %}">
+                {{ question.category }}
+            </a>
+        </small>
+    </span>
+
+    <span class="tutorial">
+        <small>
+            <a href="{% url 'website:filter' question.category question.tutorial %}">
+                {{ question.tutorial}}
+            </a>
+        </small>
+    </span>
+
+    <span class="minute_range">
+        <small>
+            <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}">
+                {{ question.minute_range }} min
+            </a>
+        </small>
+    </span>
+
+    <span class="second_range">
+        <small>
+            <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}">
+                {{ question.second_range }} sec
+            </a>
+        </small>
+    </span>
+    
+</div>
+
+{% for reply in replies %}
+    <div class="reply">
+        <span class="body">
+            {{ reply.body }}
+        </span>
+
+        <span class="user">
+            {{ reply.user }}
+        </span>
+    </div>
+{% endfor %}
+
+<form action="{% url 'website:question_reply' %}" method="POST"> {% csrf_token %}
+    {% with WIDGET_ERROR_CLASS='field_error' %}
+        <div class="row"> 
+            <div class="col-lg-12">
+                <div class="form-group">
+                    {% render_field form.question value=question.id %}
+                    <label for="id_body">Reply</label>
+                    {% render_field form.body class+='form-control' %}
+                </div>
+            </div>
+        </div>
+    {% endwith %}
+    <input class="btn btn-info" type="submit" value="Submit Reply">
+</form>
+
+{% endblock %}
diff --git a/static/website/templates/index.html b/static/website/templates/index.html
index c54b637..ddc9078 100644
--- a/static/website/templates/index.html
+++ b/static/website/templates/index.html
@@ -4,24 +4,40 @@
     {% for question in questions %}
         <div class="question">
             <div class="title">
-                <a href="">{{ question.title }}</a>
+                <a href="{% url 'website:get_question' question.id %}">{{ question.title }}</a>
             </div> 
-
+            <br>
             <span class="category">
-                <small>{{ question.category }}</small>
+                <small>
+                    <a href="{% url 'website:filter' question.category %}?qid={{ question.id }}">
+                        {{ question.category }}
+                    </a>
+                </small>
             </span>
 
             <span class="tutorial">
-                <small>{{ question.tutorial}}</small>
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial %}?qid={{ question.id }}">
+                        {{ question.tutorial}}
+                    </a>
+                </small>
             </span>
 
             <span class="minute_range">
-                <small>{{ question.minute_range }} min</small>
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}?qid={{ question.id }}">
+                        {{ question.minute_range }} min
+                    </a>
+                </small>
             </span>
 
             <span class="second_range">
-                <small>{{ question.second_range }} sec</small>
+                <small>
+                    <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}?qid={{ question.id }}">
+                        {{ question.second_range }} sec
+                    </a>
+                </small>
             </span>
-        </div>
+        </div> <!-- /.question -->
     {% endfor %}
 {% endblock %}
diff --git a/static/website/templates/new-question.html b/static/website/templates/new-question.html
index 5005e13..81da5cf 100644
--- a/static/website/templates/new-question.html
+++ b/static/website/templates/new-question.html
@@ -1,4 +1,5 @@
 {% extends 'website/templates/base.html' %}
+{% load static %}
 {% load widget_tweaks %}
 {% block content %}
     <h4>
@@ -9,7 +10,10 @@
     <form role="form" action="" method="POST">{% csrf_token %}
     {% with WIDGET_ERROR_CLASS='field_error' %}
 
-    <p>Please enter the tutorial details.</p> 
+    <p>
+        Please enter the tutorial details. 
+        <img id="ajax-loader" src="{% static 'website/images/ajax-loader.gif' %}" style="display:none;">
+    </p>
     <div class="row">
         <div class="col-lg-3 col-md-4 col-sm-4">
             {% render_field form.category class+="form-control"%} 
-- 
cgit