LIL-96 Реализация комментария к лайку или курсу (фронт)

remotes/origin/hasaccess
Vitaly Baev 8 years ago
parent 717a3386b2
commit 66fabf6849
  1. 4
      apps/course/templates/course/blocks/comment.html
  2. 17
      apps/course/templates/course/course.html
  3. 245
      web/build/css/app.css
  4. 2
      web/build/css/app.css.map
  5. 1000
      web/build/js/app.js
  6. 2
      web/src/js/app.js
  7. 60
      web/src/js/modules/comments.js
  8. 19
      web/src/sass/_common.sass
  9. 2
      web/src/sass/app.sass

@ -1,6 +1,6 @@
{% load static %}
<div class="questions__item {% if node.is_child_node %}questions__item_reply{% endif %}">
<div id="question__{{ node.id }}" class="questions__item {% if node.is_child_node %}questions__item_reply{% endif %}">
{% if node.author.photo %}
<div class="questions__ava ava">
<img class="ava__pic" src="{{ node.author.photo.url }}">
@ -19,7 +19,7 @@
<div class="questions__content">{{ node.content }}</div>
</div>
<div class="questions__foot">
<button class="questions__action">ОТВЕТИТЬ</button>
<button class="questions__action question__reply-button" data-reply-id="{{ node.id }}">ОТВЕТИТЬ</button>
</div>
</div>
</div>

@ -195,14 +195,21 @@
<div class="title">Задавайте вопросы:</div>
<div class="questions">
<div class="questions__form">
<div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
<div class="questions__wrap">
<div class="questions__field"><textarea class="questions__textarea" placeholder="Спросите автора курса интересующие вас вопросы"></textarea></div><button class="questions__btn btn btn_light">ОТПРАВИТЬ</button></div>
</div>
<div class="questions__list">
{% include "./blocks/comments.html" with object=course %}
</div>
<form class="questions__form" method="post" action="{% url 'coursecomment' course_id=course.id %}">
<input type="hidden" name="reply_id">
<div class="questions__ava ava"><img class="ava__pic" src="{% static 'img/user.jpg' %}"></div>
<div class="questions__wrap">
<div class="questions__reply-info">В ответ на <a
href="" class="questions__reply-anchor">этот комментарий</a>. <a href="#" class="questions__reply-cancel grey-link">Отменить</a></div>
<div class="questions__field"><textarea class="questions__textarea"
placeholder="Спросите автора курса интересующие вас вопросы"></textarea>
</div>
<button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
</div>
</form>
</div>
</div>
</div>

@ -336,227 +336,6 @@ html {
fill: #1C2635;
}
/**
* Owl Carousel v2.2.1
* Copyright 2013-2017 David Deutsch
* Licensed under ()
*/
/*
* Owl Carousel - Core
*/
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
/* position relative and z-index fix webkit rendering fonts issue */
position: relative;
z-index: 1;
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-backface-visibility: hidden;
/* fix firefox animation glitch */
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
/* fix for flashing background */
-webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-loaded {
display: block;
}
.owl-carousel.owl-loading {
opacity: 0;
display: block;
}
.owl-carousel.owl-hidden {
opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
visibility: hidden;
}
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel.owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.owl-carousel.owl-rtl {
direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
float: right;
}
/* No Js */
.no-js .owl-carousel {
display: block;
}
/*
* Owl Carousel - Animate Plugin
*/
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
z-index: 0;
}
.owl-carousel .owl-animated-out {
z-index: 1;
}
.owl-carousel .fadeOut {
animation-name: fadeOut;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/*
* Owl Carousel - Auto Height Plugin
*/
.owl-height {
transition: height 500ms ease-in-out;
}
/*
* Owl Carousel - Lazy Load Plugin
*/
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease;
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d;
}
/*
* Owl Carousel - Video Plugin
*/
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000;
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none;
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
}
@font-face {
font-family: ProximaNova-Regular;
src: url("fonts/ProximaNova-Regular.woff2") format("woff2"), url("fonts/ProximaNova-Regular.woff") format("woff");
@ -1772,6 +1551,17 @@ a.btn {
max-height: 277px;
}
a.grey-link {
color: #A7A7A7;
border-bottom: 1px #ccc solid;
font-size: 14px;
}
a.grey-link:hover {
color: #000;
border-bottom: 1px #545454 solid;
}
.game {
position: relative;
padding: 70px 0 80px;
@ -3268,9 +3058,9 @@ a.btn {
}
.questions__form {
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid #E6E6E6;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #E6E6E6;
}
.questions__item:not(:last-child) {
@ -3281,6 +3071,11 @@ a.btn {
padding-left: 80px;
}
.questions__reply-info {
display: none;
margin-bottom: 10px;
}
.questions__item_reply .questions__details {
margin-bottom: 10px;
padding: 20px;
@ -3312,7 +3107,7 @@ a.btn {
.questions__textarea {
display: block;
width: 100%;
height: 44px;
height: 70px;
padding: 11px 15px;
border-radius: 2px;
font-size: 16px;

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

@ -7,6 +7,6 @@ import "./modules/search";
import "./modules/toggle";
import "./modules/auth";
import "./modules/select";
// import "./modules/datepicker";
import "./modules/tabs";
import "./modules/popup";
import "./modules/comments";

@ -0,0 +1,60 @@
import $ from 'jquery';
$(document).ready(function () {
// Обработчик отправки комментария. Нам не важно, комментарий к курсу или к уроку - URL берется из action формы
$('form.questions__form').on('submit', function (e) {
e.preventDefault();
const submitButton = $(this).find('button.questions__action');
const replyToInput = $(this).find('input[name=reply_id]');
const replyToValue = replyToInput.val() ? parseInt(replyToInput.val()) : 0;
const commentTextarea = $(this).find('textarea.questions__textarea');
commentTextarea.attr('disabled', 'disabled');
submitButton.attr('disabled', 'disabled');
$.ajax($(this).attr('action'), {
method: 'post',
data: {
reply_id: replyToValue,
comment: commentTextarea.val(),
}
})
.done(function (data) {
console.log(data);
if (data.success === true) {
if (replyToValue > 0) {
$(`#question__${replyToValue}`).after(data.comment);
} else {
$('.questions__list').append(data.comment);
}
commentTextarea.val('');
}
})
.fail(function (xhr) {
})
.always(function () {
commentTextarea.removeAttr('disabled');
submitButton.removeAttr('disabled');
});
});
// Обработчик кнопки "Ответить"
$('.questions__list').on('click', 'button.question__reply-button', function () {
const replyId = $(this).attr('data-reply-id');
const form = $('form.questions__form');
form.find('input[name=reply_id]').val(replyId);
form.find('.questions__reply-anchor').attr('href', `#question__${replyId}`);
form.find('.questions__reply-info').show();
});
// Обработчик отмены комментирования в ответ на комментарий
$('.questions__reply-cancel').on('click', function (e) {
e.preventDefault();
const form = $('form.questions__form');
form.find('input[name=reply_id]').val(0);
form.find('.questions__reply-info').hide();
});
});

@ -1165,6 +1165,14 @@ a.btn
+m
max-height: 185px
a.grey-link
color: #A7A7A7
border-bottom: 1px #ccc solid
font-size: 14px
&:hover
color: #000
border-bottom: 1px #545454 solid
.game
position: relative
padding: 70px 0 80px
@ -2376,9 +2384,9 @@ a.btn
&__item
display: flex
&__form
margin-bottom: 40px
padding-bottom: 20px
border-bottom: 1px solid $border
margin-top: 40px
padding-top: 20px
border-top: 1px solid $border
&__item
&:not(:last-child)
margin-bottom: 25px
@ -2386,6 +2394,9 @@ a.btn
padding-left: 80px
+m
padding: 0
&__reply-info
display: none
margin-bottom: 10px
&__item_reply &__details
margin-bottom: 10px
padding: 20px
@ -2413,7 +2424,7 @@ a.btn
&__textarea
display: block
width: 100%
height: 44px
height: 70px
padding: 11px 15px
border-radius: 2px
font-size: 16px

@ -1,5 +1,5 @@
// done by arturmoroz.com
@import helpers/all
@import generated/sprite-svg
@import lib/owl.carousel
// @import lib/owl.carousel
@import common

Loading…
Cancel
Save