From 8614b5201a4dbe4b67b6ea0fc6262776cba4efa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs?= <heckyel@hyperbola.info>
Date: Thu, 16 Apr 2020 13:34:00 -0500
Subject: [PATCH] organize comments section

---
 cl-theme/templates/comments.html | 130 ++++++++++++++++---------------
 1 file changed, 68 insertions(+), 62 deletions(-)

diff --git a/cl-theme/templates/comments.html b/cl-theme/templates/comments.html
index e1b0d33..92f1e6d 100644
--- a/cl-theme/templates/comments.html
+++ b/cl-theme/templates/comments.html
@@ -1,71 +1,11 @@
-<div class="comments-content" itemscope itemtype="http://schema.org/UserComments">
+<div class="comments-content">
     <!-- comment header -->
     <div class="comments-header has-text-centered">
-        <p class="title is-4">{{ _('Comentarios') }}</p>
+        <p class="title is-4">{{ _('Publicar un comentario en "%(title)s"', title=article.title) }}</p>
     </div>
-
     <div class="comments-wrapper">
         <!-- comments content -->
         <div class="comments-content">
-            <!-- end of comment header -->
-            {% if article.comments %}
-                {% for comment in article.comments %}
-                    <!-- start of comment -->
-                    <div class="media" id="comment-{{comment.slug}}">
-                        <!-- comment user image -->
-                        <figure class="media-left">
-                            <p class="image is-64x64">
-                                {% if comment.avatar %}
-                                    <img src="{{ comment.avatar }}"
-                                         alt="{{ _('Avatar de %(user)s', user=comment.author) }}"
-                                         title="{{ _('Avatar de %(user)s', user=comment.author) }}">
-                                {% else %}
-                                    <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/avatar/avatar.png"
-                                         alt="{{ _('Avatar predeterminado para %(user)s', user=comment.author) }}"
-                                         title="{{ _('Avatar predeterminado para %(user)s', user=comment.author) }}">
-                                {% endif %}
-                            </p>
-                        </figure>
-                        <!-- end of comment user image -->
-
-                        <!-- comment content -->
-                        <div class="media-content">
-                            <div class="content">
-                                <div class="content" itemprop="creator" itemscope itemtype="http://schema.org/Person">
-                                    {% if comment.web %}
-                                        <p itemprop="name">
-                                            <strong>
-                                                <a href="{{ comment.web }}"
-                                                   rel="noopener noreferrer"
-                                                   target="_blank">{{ comment.author }}</a>
-                                            </strong>
-                                        </p>
-                                    {% else %}
-                                        <p itemprop="name"><strong>{{ comment.author }}</strong></p>
-                                    {% endif %}
-                                </div>
-                                <div class="content" itemprop="commentText">
-                                    {{ comment.content }}
-                                </div>
-                                <time class="entry-date published" itemprop="commentTime" datetime="{{ comment.date.isoformat() }}">
-                                    <small>
-                                        <a href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.slug}}" title='Permalink'>
-                                            <abbr title='{{ comment.date|strftime("%Y-%m-%d-T%H-%M-%S") }}'>{{ _('Enlace Permanente') }}</abbr>
-                                        </a> | {{ comment.date|strftime("%H:%M:%S") }}
-                                    </small>
-                                </time>
-                            </div>
-                        </div>
-                        <!-- end of comment content -->
-                    </div>
-                    <!-- end of comments -->
-                {% endfor %}
-            {% endif %}
-
-            <div class="media">
-                <!-- Left empty for line -->
-            </div>
-
             <!-- form begin -->
             <form id="commentform" method="POST" action="{{ SITEURL }}/vendor/form-comments/commentsubmit.php">
                 <input type="hidden" name="post_id" value="{{ article.url }}"/>
@@ -174,3 +114,69 @@
         </div>
     </div>
 </div>
+
+{% if article.comments %}
+    <div class="comments-content" itemscope itemtype="https://schema.org/UserComments">
+        <!-- comment header -->
+        <div class="comments-header has-text-centered">
+            <p class="title is-4">{{ _('Comentarios') }}</p>
+        </div>
+        <div class="comments-wrapper">
+            <!-- comments content -->
+            <div class="comments-content">
+                <!-- end of comment header -->
+                {% for comment in article.comments %}
+                    <!-- start of comment -->
+                    <div class="media" id="comment-{{comment.slug}}">
+                        <!-- comment user image -->
+                        <figure class="media-left">
+                            <p class="image is-64x64">
+                                {% if comment.avatar %}
+                                    <img src="{{ comment.avatar }}"
+                                         alt="{{ _('Avatar de %(user)s', user=comment.author) }}"
+                                         title="{{ _('Avatar de %(user)s', user=comment.author) }}">
+                                {% else %}
+                                    <img src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/avatar/avatar.png"
+                                         alt="{{ _('Avatar predeterminado para %(user)s', user=comment.author) }}"
+                                         title="{{ _('Avatar predeterminado para %(user)s', user=comment.author) }}">
+                                {% endif %}
+                            </p>
+                        </figure>
+                        <!-- end of comment user image -->
+
+                        <!-- comment content -->
+                        <div class="media-content">
+                            <div class="content">
+                                <div class="content" itemprop="creator" itemscope itemtype="https://schema.org/Person">
+                                    {% if comment.web %}
+                                        <p itemprop="name">
+                                            <strong>
+                                                <a href="{{ comment.web }}"
+                                                   rel="noopener noreferrer"
+                                                   target="_blank">{{ comment.author }}</a>
+                                            </strong>
+                                        </p>
+                                    {% else %}
+                                        <p itemprop="name"><strong>{{ comment.author }}</strong></p>
+                                    {% endif %}
+                                </div>
+                                <div class="content" itemprop="commentText">
+                                    {{ comment.content }}
+                                </div>
+                                <time class="entry-date published" itemprop="commentTime" datetime="{{ comment.date.isoformat() }}">
+                                    <small>
+                                        <a href="{{ SITEURL }}/{{ article.url }}#comment-{{comment.slug}}" title='Permalink'>
+                                            <abbr title='{{ comment.date|strftime("%Y-%m-%d-T%H-%M-%S") }}'>{{ _('Enlace Permanente') }}</abbr>
+                                        </a> | {{ comment.date|strftime("%H:%M:%S") }}
+                                    </small>
+                                </time>
+                            </div>
+                        </div>
+                        <!-- end of comment content -->
+                    </div>
+                    <!-- end of comments -->
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+{% endif %}