Merge a7afca7 into 92d0fed

comment/static/css/comment.css

@@ -13,15 +13,9 @@
     text-decoration: none;
     transition: opacity 200ms ease-in-out;
 }
-#comments .border-bottom {
-    border-bottom: 3px solid #00bc8c !important;
-}
-#comments .hr {
-    margin-top: 0.2rem;
-    margin-bottom: 2.5rem;
-}
 #comments .bb {
-    padding-bottom: 0.3rem;
+    padding-bottom: 2px;
+    border-bottom: 3px solid #00bc8c;
 }
 #comments .text-wrap {
     word-wrap: break-word;
@@ -38,11 +32,11 @@
 }
 #comments textarea {
     min-height: 31px;
-    padding: 4px 15px !important;
+    padding: 4px 15px;
     overflow: hidden;
     resize: none;
 }
-#comments textarea:focus {
+#comments textarea:focus, #comments textarea:hover {
     border: 1px solid #00bc8c;
     outline: none;
 }
@@ -54,18 +48,18 @@ input#search-input:focus::placeholder {
 #comments .js-comment-input:invalid {
     box-shadow: none;
 }
-#comments .js-comment-input:focus {
-    box-shadow: 0 0 0 0.2rem rgba(75, 142, 213, 0.25);
-}
 #comments .edit-comment::before {
     content: none;
 }
 #comments .btn-link {
-    text-decoration: none !important;
+    text-decoration: none;
     padding: 0;
     font-size: 100%;
     font-weight: 400;
 }
+#comments .read-more {
+    font-size: 0.9rem;
+}
 #comments .user-has-reacted,
 #comments .user-has-flagged {
     fill: #ffc96c;

comment/templates/comment/comments/base.html

@@ -2,25 +2,28 @@
 {% load i18n %}
 <section id="comments" class="{% block comment_section_cls %}my-5 mx-3{% endblock comment_section_cls %}">
     <script>window.CSRF_TOKEN = "{{ csrf_token }}"</script>
-    <strong class="border-bottom bb"><span class="js-comment-number">{% get_comments_count model_object user %}</span><span class="comment-translatable"> {% trans "Comments" %}</span></strong>
-    {% if is_subscription_allowed %}
-        <span class="float-right">{% include 'comment/follow/follow.html' with model_object=model_object btnId=0 %}</span>
-    {% endif %}
+    <div class="{% block header_div_cls %}border-bottom mb-4{% endblock header_div_cls %}">
+        <strong class="{% block header_title_cls %}bb{% endblock header_title_cls %}"><span
+                class="js-comment-number">{% get_comments_count model_object user %}</span><span
+                class="comment-translatable"> {% trans "Comments" %}</span></strong>
+        {% if is_subscription_allowed %}
+            <span class="{% block follow_icon_wrapper_cls %}float-right{% endblock follow_icon_wrapper_cls %}">{% include 'comment/follow/follow.html' with model_object=model_object btnId=0 %}</span>
+        {% endif %}
+    </div>
     {% block comment_messages %}
-    {% include "comment/comments/messages.html" %}
+        {% include "comment/comments/messages.html" %}
     {% endblock comment_messages %}
-    <hr class="hr"/>
     <div class="js-comment comment mb-5">
         {% include 'comment/comments/create_comment.html' with placeholder="comment on this post..." comment=None %}
     </div>
-    <div class="js-main-comment mt-5">
-      {% for comment in comments %}
-          {% include 'comment/comments/parent_comment.html' with placeholder='reply to this comment...' %}
-      {% endfor %}
+    <div class="mt-5">
+        {% for comment in comments %}
+            {% include 'comment/comments/parent_comment.html' with placeholder='reply to this comment...' %}
+        {% endfor %}
     </div>
     {% if comments.paginator.num_pages > 1 %}
-    {% block pagination %}
-    {% include 'comment/comments/pagination.html' with active_btn='bg-success' text_style='text-success' li_cls='page-item rounded mx-1' %}
-    {% endblock pagination %}
+        {% block pagination %}
+            {% include 'comment/comments/pagination.html' with active_btn='bg-success' text_style='text-success' li_cls='page-item rounded mx-1' %}
+        {% endblock pagination %}
     {% endif %}
 </section>

comment/templates/comment/comments/child_comment.html

@@ -1,5 +1,4 @@
-
-<div class="js-child-comment blockquote text-wrap mb-4">
+<div class="js-child-comment {% block child_comment_wrapper_cls %}blockquote text-wrap mb-4{% endblock child_comment_wrapper_cls %}">
     <hr/>
     {% include 'comment/comments/comment_body.html' with comment=comment %}
 </div>

comment/templates/comment/comments/comment_body.html

@@ -10,7 +10,7 @@
     {% endif %}
     {% include 'comment/comments/comment_content.html' with comment=comment %}
     {% if comment.user != user %}
-        <div class="col-1">
+        <div class="{% block three_dots_wrapper_cls %}col-1 position-relative d-flex justify-content-end{% endblock three_dots_wrapper_cls %}">
             {% include 'comment/comments/three_dots_menu.html' %}
         </div>
     {% endif %}

comment/templates/comment/comments/comment_content.html

@@ -5,7 +5,7 @@
     {% block comment_content %}
     {% render_content comment 30 %}
     {% endblock comment_content %}
-    <div class="blockquote-footer">
+    <div class="{% block footer_wrapper_cls %}blockquote-footer{% endblock footer_wrapper_cls %}">
         <small>
             {% get_profile_url comment as profile_url %}
             <{% if comment.user %}a{% else %}span{% endif %}
@@ -34,12 +34,12 @@
             {% endif %}
             {% if comment.is_parent %}
                 {% get_replies_count comment user as reply_count %}
-                | <span class="js-reply-number text-dark">{{ reply_count }}</span>
+                | <span class="js-reply-number {% block reply_count_cls %}text-dark{% endblock reply_count_cls %}">{{ reply_count }}</span>
                 <a class="js-reply-link {% block reply_link_cls %}btn btn-link ml-1{% endblock reply_link_cls %}" href="#">
                     {% blocktrans with plural_str=reply_count|pluralize:"y,ies" %} Repl{{ plural_str }} {% endblocktrans %}
                 </a>
                 {% if comment.user == user and is_subscription_allowed %}
-                    <div class="d-inline ml-3">
+                    <div class="{% block follow_icon_wrapper_cls %}d-inline ml-3{% endblock follow_icon_wrapper_cls %}">
                         {% include 'comment/follow/follow.html' with model_object=comment btnId=comment.id %}
                     </div>
                 {% endif %}

comment/templates/comment/comments/content.html

@@ -1,12 +1,12 @@
 {% load i18n %}
-<p class="js-comment-content {% block c_text_cls %}mb-0{% endblock c_text_cls %}">
+<p class="js-comment-content {% block content_text_cls %}mb-0{% endblock content_text_cls %}">
     {% block comment_urlhash %}
     {% include "comment/comments/urlhash.html" with urlhash=urlhash %}
     {% endblock comment_urlhash %}
     {% if text_2 %}
         {{ text_1 }}
         <span class="d-none">{{ text_2 }}</span>
-        <button class="js-read-more-btn btn btn-link btn-xs" style="font-size: 14px">{% trans "read more" %}...</button>
+        <button class="js-read-more-btn {% block read_more_cls %}btn btn-link btn-xs read-more{% endblock read_more_cls %}">{% trans "read more" %}...</button>
     {% else %}
         {{ text_1 }}
     {% endif %}

comment/templates/comment/comments/create_comment.html

@@ -24,9 +24,10 @@
     </form>
 {% endif %}
 {% if user.is_anonymous %}
+    {% block login_info %}
     <div class="d-flex mb-3">
         {% if is_anonymous_allowed %}
-            <p class="text-muted {% if comment %}h7 my-auto {% endif %}">{% trans "Comment Anonymously or" %}
+            <p class="text-muted{% if comment %} h7 my-auto {% endif %}">{% trans "Comment Anonymously or" %}
             <a class="text-success {% if comment %}h7 my-auto {% endif %}" href="{{login_url}}?next={{request.path}}">
                 {% trans "Login" %}
             </a>
@@ -48,4 +49,5 @@
             {% endblock oauth %}
         {% endif %}
     </div>
+    {% endblock login_info %}
 {% endif %}

comment/templates/comment/comments/parent_comment.html

@@ -1,7 +1,7 @@
 {% load comment_tags %}
-<div class="js-parent-comment blockquote text-wrap">
+<div class="js-parent-comment {% block parent_comment_wrapper_cls %}blockquote text-wrap{% endblock parent_comment_wrapper_cls %}">
     {% include 'comment/comments/comment_body.html' with comment=comment %}
-    <div class="js-replies ml-5 my-4 d-none">
+    <div class="js-replies {% block replies_wrapper_cls %}ml-5 my-4{% endblock replies_wrapper_cls %} d-none">
         {% get_comment_replies comment user as replies %}
         {% for comment in replies %}
             {% include 'comment/comments/child_comment.html' %}

comment/templates/comment/comments/three_dots_menu.html

@@ -1,5 +1,5 @@
 {% if allowed_flags and is_subscription_allowed and comment.is_parent %}
-    <div class="js-three-dots three-dots-wrapper float-right">
+    <div class="js-three-dots three-dots-wrapper">
         <div class="three-dots"></div>
         <div class="three-dots"></div>
         <div class="three-dots"></div>

docs/source/styling.rst

@@ -102,6 +102,10 @@ Some block tags may not work on old versions.
 
     {% block comment_section_cls %}my-5 mx-3{% endblock comment_section_cls %}
 
+    {% block header_div_cls %}border-bottom mb-4{% endblock header_div_cls %}
+    {% block header_title_cls %}bb{% endblock header_title_cls %}
+    {% block follow_icon_wrapper_cls %}float-right{% endblock follow_icon_wrapper_cls %}
+
     {% block pagination %}  {# override default pagination classes #}
     {% include 'comment/comments/pagination.html' with active_btn='bg-success' text_style='text-success' li_cls='page-item rounded mx-1' %}
     {% endblock pagination %}
@@ -117,6 +121,10 @@ Some block tags may not work on old versions.
     {% block submit_button_wrapper_cls %}col-sm-3 col-md-2 px-2 m-3 m-sm-0{% endblock submit_button_wrapper_cls %}
     {% block submit_button_cls %}btn btn-outline-success btn-block btn-sm{% endblock submit_button_cls %}
 
+    {% block login_info %}
+    {# Please see 'comment/comments/create_comment.html' template for default block #}
+    {% endblock login_info %}
+
     {% block oauth %}  {# override default oauth urls section #}
     <a class="mx-1 my-0 h4 github-color" href="{% url 'social:begin' 'github' %}?next={{request.path}}"><i class="fa fa-github-square"></i></a>
     <a class="mx-1 my-0 h4 facebook-color" href="{% url 'social:begin' 'facebook' %}?next={{request.path}}"><i class="fa fa-facebook-square"></i></a>
@@ -125,6 +133,25 @@ Some block tags may not work on old versions.
     {% endblock oauth %}
 
 
+**parent_comment.html**
+
+.. code:: jinja
+
+    {% extends "comment/comments/parent_comment.html" %}
+
+    {% block parent_comment_wrapper_cls %}blockquote text-wrap{% endblock parent_comment_wrapper_cls %}
+    {% block replies_wrapper_cls %}ml-5 my-4{% endblock replies_wrapper_cls %}
+
+
+**child_comment.html**
+
+.. code:: jinja
+
+    {% extends "comment/comments/child_comment.html" %}
+
+    {% block child_comment_wrapper_cls %}blockquote text-wrap mb-4{% endblock child_comment_wrapper_cls %}
+
+
 **comment_body.html**
 
 .. code:: jinja
@@ -134,6 +161,8 @@ Some block tags may not work on old versions.
     {% block image_wrapper_cls %}col-2 col-md-1{% endblock image_wrapper_cls %}
     {% block image_cls %}w-100{% endblock image_cls %}
 
+    {% block three_dots_wrapper_cls %}col-1{% endblock three_dots_wrapper_cls %}
+
 
 **comment_content.html**
 
@@ -142,12 +171,25 @@ Some block tags may not work on old versions.
     {% extends "comment/comments/comment_content.html" %}
 
     {% block content_wrapper_cls %}{% if has_valid_profile %}col-9 col-md-10{% else %}co-11 mx-3{% endif %}{% endblock content_wrapper_cls %}
-    {% block comment_content %}   {# override truncate words number - change the number 30 to your desired or 0 if you don't want to fold the comment#}
-        {% render_content comment.content 30 %}
+    {% block comment_content %}   {# override truncate words number - change the number 30 to your desired or 0 if you don't want to fold the comment #}
+        {% render_content comment 30 %}
     {% endblock comment_content %}
 
+    {% block footer_wrapper_cls %}blockquote-footer{% endblock footer_wrapper_cls %}
     {% block username_cls %}{% endblock username_cls %}
+    {% block reply_count_cls %}text-dark{% endblock reply_count_cls %}
     {% block reply_link_cls %}btn btn-link ml-1{% endblock reply_link_cls %}
+    {% block follow_icon_wrapper_cls %}d-inline ml-3{% endblock follow_icon_wrapper_cls %}
+
+
+**content.html**
+
+.. code:: jinja
+
+    {% extends "comment/comments/content.html" %}
+
+    {% block content_text_cls %}mb-0{% endblock content_text_cls %}
+    {% block read_more_cls %}btn btn-link btn-xs read-more{% endblock read_more_cls %}
 
 
 **edit_icon.html**