Merge pull request #47 from praekelt/feature/comment-thread-template-…

…updates Update comment reply list template
praekeltfoundation · Apr 6, 2017 · 712787f · 712787f
2 parents cde9af6 + 164c766
commit 712787f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/molo/commenting/templates/comments/comment.html b/molo/commenting/templates/comments/comment.html
@@ -15,29 +15,32 @@ <h4 class="comment__author">
     <h6 class="comment__description">
     {% trans "This comment has been removed by the community. Please read our platform rules." %}</h6>
   {% else %}
-
     {% if truncate_comment %}
       <p>{{ node.comment|truncatechars:60 }}</p>
     {% else %}
       <p>{{ node.comment }}</p>
     {% endif %}
     <span class="date">{{ node.submit_date|timesince }} {% trans "Ago" %}</span>
-
     {% if not node.user|is_in_admin_group %}
       <a href="{% url 'molo.commenting:molo-comments-report' node.pk %}?next={% url 'molo.commenting:report_response' node.pk %}" class="call-to-action__nav-item call-to-action__nav-item--response">
       {% trans "Report" %}</a>
     {% endif %}
 
     {% if node.parent == None %}
       {% if do_not_link_replies or node.get_children.count == 0 %}
-        <p>{{ node.get_children.count }} {% trans "Replies" %}</p>
+        <p class="comment__reply-meta-link comment__reply-meta-replies-list-disabled">{{ node.get_children.count }} {% trans "Replies" %}</p>
       {% else %}
         <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}">
           {{ node.get_children.count }} {% trans "Replies" %}
         </a>
       {% endif %}
       {% if request.user.is_authenticated%}
-        <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}#comment-form" class="call-to-action__nav-item call-to-action__nav-item--response">{% trans "Reply"%}</a>
+        <div class="comment__reply-meta">
+          <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}#comment-form" class="call-to-action__nav-item call-to-action__nav-item--response comment__reply-meta-link">{% trans "Reply"%}</a>
+          <a href="{% url 'molo.commenting:molo-comments-reply' node.pk %}#comment-form" class="comment__reply-meta-link comment__reply-meta-replies-list">
+            {% trans "Replies"%}
+          </a>
+        </div>
       {% endif %}
     {% endif %}
   {% endif %}

diff --git a/molo/commenting/templates/notifications/notice.html b/molo/commenting/templates/notifications/notice.html
@@ -2,27 +2,30 @@
     <div class="comment__reply-thread">
       {% with notice.target as article %}
       {% with notice.action_object as comment %}
+      <div class="comment_reply-parent-article">
         {% if comment.user_name.lower == 'anonymous' %}
-        <span class="comment__username">{{comment.user_name}}</span>
-      {% else %}
-        {% if not comment.user.profile.alias %}
-          <span class="comment__username">{% trans "Anonymous" %}</span>
+          <span class="comment__username">{{comment.user_name}}</span>
         {% else %}
-          <span class="comment__username">{{comment.user.profile.alias}}</span>
+          {% if not comment.user.profile.alias %}
+            <span class="comment__username">{% trans "Anonymous" %}</span>
+          {% else %}
+            <span class="comment__username">{{comment.user.profile.alias}}</span>
+          {% endif %}
         {% endif %}
-      {% endif %}
-
-      {% trans "replied to your comment on:" %}<a href="{% pageurl article %}">{{ article.title }}</a>
-        <span class="comment__timestamp">{{ notice.timesince }} {% trans "ago" %}</span>
+        {% trans "replied to your comment on: " %}
+        <a href="{% pageurl article %}">{{ article.title }}</a>
+      </div>
+      <span class="comment__timestamp">{{ notice.timesince }} {% trans "ago" %}</span>
       {% endwith %}
       {% endwith %}
     </div>
-
-    <div class="comment__reply-thread-content comment__reply-thread--">
-      <h3 class="comment__heading">Your Comment:</h3>
-      <p class="comment__subtitle">{{ notice.action_object.parent.comment }}</p>
-    </div>
-    <div class="comment__reply-thread-content">
-      <h3 class="comment__heading">Their Reply:</h3>
-      <p class="comment__subtitle">{{ notice.action_object.comment }}</p>
-    </div>
+    <ul class="reply-thread-listing">
+      <li class="reply-thread-listing__item reply-thread-listing__item--parent-comment">
+        <h3 class="comment__reply-thread-heading">Your comment:</h3>
+        <p class="comment__reply-thread-subtitle">{{ notice.action_object.parent.comment }}</p>
+      </li>
+      <li class="reply-thread-listing__item">
+        <h3 class="comment__reply-thread-heading">Reply:</h3>
+        <p class="comment__reply-thread-subtitle">{{ notice.action_object.comment }}</p>
+      </li>
+    </ul>