Highlight targeted comment & add permalink

This commit is contained in:
Gabriel Augendre 2020-08-20 15:45:39 +02:00
parent 1fa73b90fb
commit 23985a3263
3 changed files with 41 additions and 31 deletions

View file

@ -229,6 +229,14 @@ textarea, input {
color: var(--main3);
}
.comment:target {
background-color: var(--warning-background);
}
.permalink {
font-size: 80%;
}
/* MESSAGES */
.messages p {
background-color: var(--background2);

View file

@ -11,35 +11,5 @@
{{ article.get_formatted_content|safe }}
</div>
</article>
<section class="comments">
<h2>Comments</h2>
{% for comment in comments %}
<article id="{{ comment.id }}" class="comment">
<p class="metadata">
<span class="username">{{ comment.username }}</span> |
<time datetime="{{ comment.created_at|date:'c' }}">
{{ comment.created_at|date:"DATETIME_FORMAT" }}
</time>
{% include "articles/admin_link_snippet.html" with article=comment %}
</p>
<p class="content">
{{ comment.content|linebreaksbr }}
</p>
</article>
{% empty %}
No reaction yet, write your own!
{% endfor %}
<form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<button type="submit">Submit</button>
<p class="helptext">
Your comment may not be approved if it's not respectful, on topic or spammy.
If you feel I've made a mistake with your comment, please
<a href="/about-me/">send me a message</a>!
</p>
</form>
</section>
{% include 'articles/comment_snippet.html' %}
{% endblock %}

View file

@ -0,0 +1,32 @@
<section class="comments">
<h2>Comments</h2>
{% for comment in comments %}
<article id="{{ comment.id }}" class="comment">
<p class="metadata">
<a class="permalink" title="Permalink" href="#{{ comment.id }}">🔗</a>
<span class="username">{{ comment.username }}</span> |
<time datetime="{{ comment.created_at|date:'c' }}">
{{ comment.created_at|date:"DATETIME_FORMAT" }}
</time>
{% include "articles/admin_link_snippet.html" with article=comment %}
</p>
<p class="content">
{{ comment.content|linebreaksbr }}
</p>
</article>
{% empty %}
No reaction yet, write your own!
{% endfor %}
<form id="comment-form" action="{% url 'create-comment' slug=article.slug %}" method="post">
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<button type="submit">Submit</button>
<p class="helptext">
Your comment may not be approved if it's not respectful, on topic or spammy.
If you feel I've made a mistake with your comment, please
<a href="/about-me/">send me a message</a>!
</p>
</form>
</section>