Feature/comment icon (#141)

* Comment icon

Author: berk76

svjis/articles/static/css/styles.css

@@ -870,6 +870,10 @@ footer a:hover {
     font-size: 100%;
   }
 
+  .wrapper2 {
+    margin: 0px 5px 0px 5px;
+  }
+
   input {
     font-size:100%;
   }
@@ -991,6 +995,10 @@ footer a:hover {
   }
 
   /* Boxes */
+  .boxes {
+    margin: 10px 0px 10px 0px;
+  }
+
   .box1, .box2 {
     max-width: 400px;
   }

svjis/articles/templates/article.html

@@ -7,7 +7,7 @@
 <div class="article-detail">
     <h1 class="article-title">{{ obj.header|highlight:search|safe }}</h1>
     <p class="info">
-        <a href="{% url 'main_filtered' menu=obj.menu.id %}">{{ obj.menu.description }}</a>:  <strong>{{ obj.created_date|date:"d.m.Y" }}</strong>, {% translate 'Author' %}: <strong>{{ obj.author.first_name }}&nbsp;{{ obj.author.last_name }}</strong>{% if obj.comments %}, {% translate 'Comments' %}: <strong>{{ obj.comments|length }}</strong>{% endif %}
+        <a href="{% url 'main_filtered' menu=obj.menu.id %}">{{ obj.menu.description }}</a>:  <strong>{{ obj.created_date|date:"d.m.Y" }}</strong>, {% translate 'Author' %}: <strong>{{ obj.author.first_name }}&nbsp;{{ obj.author.last_name }}</strong>
     </p>
     {{ obj.perex|highlight:search|safe }}
     {{ obj.body|inject_pictures:assets|highlight:search|safe }}

svjis/articles/templates/main.html

@@ -19,7 +19,13 @@ <h1 class="article-title-list"><a {% if search != '' %} href="{% url 'article' s
                 <a href="{% url 'main_filtered' menu=obj.menu.id %}">{{ obj.menu.description }}</a>:
                 <strong>{{ obj.created_date|date:"d.m.Y" }}</strong>,
                 {% translate 'Author' %}: <strong>{{ obj.author.first_name }}&nbsp;{{ obj.author.last_name }}</strong>
-                {% if obj.comments %}, {% translate 'Comments' %}: <strong>{{ obj.comments|length }}</strong>{% endif %}
+                {% if obj.comments %}
+                    &nbsp;
+                    <svg aria-hidden="true" viewBox="0 0 16 16" height="12" width="12" fill="currentColor" style="vertical-align: middle;">
+                        <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
+                    </svg>
+                    <strong>{{ obj.comments|length }}</strong>
+                {% endif %}
             </p>
             <p>{{ obj.perex|highlight:search|safe }}</p>
         </div>