diff options
Diffstat (limited to 'static/website/templates/get-question.html')
| -rw-r--r-- | static/website/templates/get-question.html | 278 |
1 files changed, 184 insertions, 94 deletions
diff --git a/static/website/templates/get-question.html b/static/website/templates/get-question.html index c1ae565..2ef71b1 100644 --- a/static/website/templates/get-question.html +++ b/static/website/templates/get-question.html @@ -8,123 +8,189 @@ <span class="saving hideme">saving . . .</span> <span class="saved hideme">saved</span> -<div class="question {% if user|can_edit:question %}editable{% endif %}"> - <div class="title {% if user|can_edit:question %}title-editable{% endif %}"> - {{ question.title }} - </div> - - <div id="title-edit" class="hideme"> - <h5>Title</h5> - <input class="form-control" type="text"> - <h5>Question</h5> - </div> - - <div id="questionNicPanel"></div> - <div id="{% if user|can_edit:question %}questionInstance{% endif %}" class="body"> - {{ question.body|safe }} - </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 {% if question.minute_range == 'None' %}hideme{% endif %}"> - <small> - <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}"> - {{ question.minute_range }} min - </a> - </small> - </span> - - <span class="second_range {% if question.minute_range == 'None' %}hideme{% endif %}"> - <small> - <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}"> - {{ question.second_range }} sec - </a> - </small> - </span> - - <a id="question-details-edit" data-toggle="modal" data-target="#detailsModal" href="#" class="hideme"> - <span class="glyphicon glyphicon-edit"></span> - </a> - - <span class="modify"> - {% if user|can_edit:question %} - <a class="edit btn btn-xs btn-info" href="#">Edit</a> - <a class="save btn btn-xs btn-success" data-qid="{{ question.id }}" href="#">Save</a> - {% endif %} - </span> - - <span class="meta"> - <small> - <i> - {{ question.date_created|date:"y-d-m" }}, {{ question.date_created|time }} - </i> - </small> +<div class="row"> + <div class="question-critic col-lg-1 lead"> + <span class="vote upvote" data-qid="{{ question.id }}" data-vote="1"> + <span class="glyphicon glyphicon-circle-arrow-up"></span> + </span> + <div class="votes">34</div> + <span class="vote downvote" data-qid="{{ question.id }}" data-vote="-1"> + <span class="glyphicon glyphicon-circle-arrow-down"></span> + </span> + </div> - <span class="user"> - {{ question.user }} + <div class="col-lg-11 question-wrapper"> + <div class="question {% if user|can_edit:question %}editable{% endif %}"> + <div class="title {% if user|can_edit:question %}title-editable{% endif %}"> + {{ question.title }} + </div> + + <div id="title-edit" class="hideme"> + <h5>Title</h5> + <input class="form-control" type="text"> + <h5>Question</h5> + </div> + + <div id="questionNicPanel"></div> + <div id="{% if user|can_edit:question %}questionInstance{% endif %}" class="body"> + {{ question.body|safe }} + </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 {% if question.minute_range == 'None' %}hideme{% endif %}"> + <small> + <a href="{% url 'website:filter' question.category question.tutorial question.minute_range %}"> + {{ question.minute_range }} min + </a> + </small> + </span> + + <span class="second_range {% if question.minute_range == 'None' %}hideme{% endif %}"> + <small> + <a href="{% url 'website:filter' question.category question.tutorial question.minute_range question.second_range%}"> + {{ question.second_range }} sec + </a> + </small> + </span> + + <a id="question-details-edit" data-toggle="modal" data-target="#detailsModal" href="#" class="hideme"> + <span class="glyphicon glyphicon-edit"></span> + </a> + + <span class="modify"> + {% if user|can_edit:question %} + <a class="edit btn btn-xs btn-info" href="#">Edit</a> + <a class="save btn btn-xs btn-success" data-qid="{{ question.id }}" href="#">Save</a> + {% endif %} + </span> + + <span class="meta"> + <small> + <i> + {{ question.date_created|date:"y-d-m" }}, {{ question.date_created|time }} + </i> + </small> + + <span class="user"> + {{ question.user }} + </span> </span> - </span> </div> <!-- /.question --> + </div> +</div> <!-- /.row --> <h4><u>Answers:</u></h4> - -<div id="replyPanelWrapper" style="display:none;"> - <div id="replyNicPanel" style="display:none;"></div> +<div id="answerPanelWrapper" style="display:none;"> + <div id="answerNicPanel" style="display:none;"></div> </div> -{% for reply in replies %} - <div class="reply {% if user|can_edit:reply %}editable{% endif %}" id="reply{{reply.id}}"> - - <div class="body" id="body{{ reply.id }}"> - {{ reply.body|safe }} - </div> +<div id="commentPanelWrapper" style="display:none;"> + <div id="commentNicPanel" style="display:none;"></div> +</div> - <span class="user"> - {{ reply.user }} +{% for answer in answers %} +<div class="row"> + <div class="answer-critic col-lg-1"> + <span class="vote upvote" data-aid="{{ answer.id }}" data-vote="1"> + <span class="glyphicon glyphicon-circle-arrow-up"></span> </span> - - {% if user|can_edit:reply %} - <span class="modify" style="display:block"> - <a class="edit btn btn-xs btn-info vs" href="#body{{ reply.id}}" data-target="body{{ reply.id }}">Edit</a> - <a class="save btn btn-xs btn-success vs" data-target="body{{ reply.id }}" data-rid="{{ reply.id }}" href="#">Save</a> + <div class="votes">34</div> + <span class="vote downvote" href="#" data-aid="{{ answer.id }}" data-vote="-1"> + <span class="glyphicon glyphicon-circle-arrow-down"></span> </span> - {% endif %} - </div> <!-- /.reply --> + </div> + + <div class="col-lg-11 answer-wrapper"> + <div class="answer {% if user|can_edit:answer %}editable{% endif %}" id="answer{{answer.id}}"> + + <div class="body" id="body{{ answer.id }}"> + {{ answer.body|safe }} + </div> + + <span class="user"> + {{ answer.user }} + </span> + + {% if user|can_edit:answer %} + <span class="modify" style="display:block"> + <a class="edit btn btn-xs btn-info vs" href="#body{{ answer.id}}" data-target="body{{ answer.id }}">Edit</a> + <a class="save btn btn-xs btn-success vs" data-target="body{{ answer.id }}" data-aid="{{ answer.id }}" href="#">Save</a> + </span> + {% endif %} + </div> <!-- /.answer --> + + <div class="row"> + <div class="comments col-lg-11 pull-right"> + <!-- displaying comments --> + {% for comment in answer.answercomment_set.all %} + <div class="comment"> + <div class="body" id="cbody{{ comment.id }}"> + {{ comment.body|safe }} + </div> + + <span class="modify" style="display:block"> + <a class="edit btn btn-xs btn-info vs" href="#cbody{{ comment.id }}" data-target="cbody{{ comment.id }}">Edit</a> + <a class="save btn btn-xs btn-success vs" data-target="cbody{{ comment.id }}" data-cid="{{ comment.id }}" href="#">Save</a> + </span> + </div> <!-- /.comment --> + {% endfor %} + + + <!-- form to add comment --> + <form id="form{{ answer.id }}" method="post" action="/answer-comment/"> {% csrf_token %} + <input type="hidden" name="answer_id" value="{{answer.id}}"> + <textarea name="body" class="new-comment form-control" id="comment{{ answer.id }}" rows="2"></textarea> + </form> + <a class="add-comment" href="#" data-target="comment{{ answer.id }}"> + <small>add comment</small> + </a> + <a class="post-comment" href="#" data-target="comment{{ answer.id }}" data-aid="{{ answer.id }}" data-form="form{{ answer.id }}"> + <small>post comment</small> + </a> + <a class="cancel-comment" href="#" data-target="comment{{ answer.id }}"> + <small>cancel comment</small> + </a> + </div> <!-- comments --> + </div> <!-- /.row --> + <br> <hr> + </div> <!-- /.answer-wrapper --> +</div> <!-- /.row --> {% endfor %} {% if user.is_authenticated %} - <form action="{% url 'website:question_reply' %}" method="POST"> {% csrf_token %} + <form action="{% url 'website:question_answer' %}" 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> + <label for="id_body">Answer</label> {% render_field form.body class+='form-control' %} </div> </div> </div> {% endwith %} - <input class="btn btn-sm btn-info" type="submit" value="Submit Reply"> + <input class="btn btn-sm btn-info" type="submit" value="Submit Answer"> </form> {% else %} <h4> - <a class="btn btn-xs btn-success" href="{% url 'user_login'%}"><b>Log-in</b></a> to reply to this question. + <a class="btn btn-xs btn-success" href="{% url 'user_login'%}"><b>Log-in</b></a> to answer to this question. </h4> {% endif %} @@ -137,7 +203,7 @@ <h4 class="modal-title" id="myModalLabel">Edit Question Details</h4> </div> <div class="modal-body"> - + <h5>The Current question is under:</h5> {{ question.category }} --> {{ question.tutorial }} @@ -147,7 +213,7 @@ {% if question.second_range != 'None' %} --> {{ question.second_range}} {% endif %} - + <h5>Move the question to:</h5> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4"> @@ -223,7 +289,6 @@ <a class="btn btn-sm btn-default" data-dismiss="modal" href="#">Close</a> </div> <div class="clearfix"></div> - </div> <!-- /.modal-body --> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> @@ -243,4 +308,29 @@ {% block javascript %} <script src="{% static 'website/js/thread-user.js' %}"></script> <script src="{% static 'website/js/custom.js' %}"></script> + <script> + $(document).ready(function() { + $vote = $(".vote"); + + $vote.click(function() { + if($(this).hasClass("upvote")) { + /* handle upvote click event */ + if($(this).hasClass("voted")) { + $(this).removeClass("voted"); + } else { + $(this).addClass("voted"); + $(this).siblings(".downvote").removeClass("voted"); + } + } else { + /* handle downvote click event */ + if($(this).hasClass("voted")) { + $(this).removeClass("voted"); + } else { + $(this).addClass("voted"); + $(this).siblings(".upvote").removeClass("voted"); + } + } + }); + }); + </script> {% endblock %} |